Portals

`createPortal(children, domNode, key?)`

调用 createPortal 创建 portal，并传入 JSX 与实际渲染的目标 DOM 节点：

参数

children：React 可以渲染的任何内容，如 JSX 片段（<div /> 或 <SomeComponent /> 等等）、Fragment（<>...</>）、字符串或数字，以及这些内容构成的数组。
domNode：某个已经存在的 DOM 节点，例如由 document.getElementById() 返回的节点。在更新过程中传递不同的 DOM 节点将导致 portal 内容被重建。
可选参数 key：用作 portal key 的独特字符串或数字。

返回值

createPortal 返回一个可以包含在 JSX 中或从 React 组件中返回的 React 节点。如果 React 在渲染输出中遇见它，它将把提供的 children 放入提供的 domNode 中。

警告

portal 中的事件传播遵循 React 树而不是 DOM 树。例如点击 <div onClick> 内部的 portal，将触发 onClick 处理程序。如果这会导致意外的问题，请在 portal 内部停止事件传播，或将 portal 移动到 React 树中的上层。

import React, { PureComponent } from 'react'
import { createPortal } from 'react-dom'
export class App extends PureComponent {
  render() {
    return (
      <div>
        {createPortal(
          <p>这个子节点被放置在 document body 中。</p>,
          document.body
        )}
      </div>
    )
  }
}

export default App

`<Fragment> (<>...</>)`

<Fragment> 通常使用 <>...</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。当你需要单个元素时，你可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></>。

参数

可选 key：列表中 <Fragment> 的可以拥有 keys。

注意事项

如果你要传递 key 给一个 <Fragment>，你不能使用 <>...</>，你必须从 'react' 中导入 Fragment 且表示为<Fragment key={yourKey}>...</Fragment>。
当你要从 <><Child /></> 转换为 [<Child />] 或 <><Child /></> 转换为 <Child />，React 并不会重置 state。这个规则只在一层深度的情况下生效，如果从 <><><Child /></></> 转换为 <Child /> 则会重置 state。在这里查看更详细的介绍。

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  render() {
    const arr = [1, 3, 4, 52, 34]
    return (
      <>
        <h1>标题一</h1>
        <h2>标题二</h2>
        <ul>
          {/* 列表显示数据内容如果绑定Key需要编写完整标签 */}
          {
            arr.map((item, index) => {
              return (
                <Fragment key={item}>
                  <li>{item}</li> 
                  <h1>测试多值</h1>
                </Fragment>
              )
            })
          }
        </ul>
      </>
    )
  }
}

export default App

StrictMode严格模式

StrictMode 是一个用来突出显示应用程序中潜在问题的工具:
- 与 Fragment 一样，StrictMode 不会渲染任何可见的 Ul;
- 它为其后代元素触发额外的检查和警告;
- 严格模式检查仅在开发模式下运行;它们不会影生产构建，

严格模式检查的是什么?

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <StrictMode>
         <Content />
      </StrictMode>
    </>
  );
}

识别不安全的生命周期
使用过时的ref API
检查意外的副作用

这个组件的constructor会被调用两次:
这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用;
在生产环境中，是不会被调用两次的，

使用废弃的findDOMNode方法
- 在之前的React API中，可以通过findDOMNode来获取DOM
检测过时的context APl

早期的Context是通过static属性声明Context对象属性，通过getChildContext返回Context对象等方式来使用Context的;

portals和fragment-StrictMode严格模式

Portals

createPortal(children, domNode, key?)

参数

返回值

警告

<Fragment> (<>...</>)

参数

注意事项

StrictMode严格模式

严格模式检查的是什么?

`createPortal(children, domNode, key?)`

`<Fragment> (<>...</>)`