1、Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案
ReactDOM.createPortal(child, container )

• 第一个参数(child)是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment
• 第二个参数(container)是一个 DOM 元素

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
class Modal extends PureComponent {
    render() {
        return ReactDOM.createPortal(
            this.props.children,
            document.getElementById("modal")
        )
    }
}

class Home extends PureComponent {
    render () {
        return (
            <div>
                <h2>Home</h2>
                <Modal> <h2>Title</h2> </Modal>
            </div>
        )
    }
}
export default class App extends PureComponent {
    render() {
        return (
            <div> <Home /> </div>
        )
    }
}

2、Fragment

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点
1、用法

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

2、短语法

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

3、带 key 的 Fragments

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

3、StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
检查的内容：

• 识别不安全的生命周期
• 关于使用过时字符串 ref API 的警告
• 关于使用废弃的 findDOMNode 方法的警告
• 检测意外的副作用
  • 组件的constructor会被调用两次，这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用， 在生产环境中，是不会被调用两次的
• 检测过时的 context API

import React, { PureComponent, StrictMode } from 'react'
class Home extends PureComponent {
    constructor(props) {
        super(props)
        console.log("constructor Home")
    }
    UNSAFE_componentWillMount() {
        console.log("Home -- componentWillMount")
    }
    render() {
        return (
            <div>Home</div>
        )
    }
}
export default class App extends PureComponent {
    render() {
        return (
            <div>
                <StrictMode>
                    <Home />
                </StrictMode>
            </div>
        )
    }
}