10_严格模式StrictMode

严格模式StrictMode

严格模式为 组件内的整个组件树启用额外的开发环境检查，这些检查有助于在开发过程中尽早地发现组件中的常见错误。

• StrictMode不会渲染任何可见的UI
• 它会为其后代元素触发额外的检查和警告
• 仅在开发模式下运行，不会影响生产构建

严格模式的作用：

1. 识别不安全的生命周期
2. 使用过时的API：ref、findDOMNode、getChildContext等
3. 检查意外的副作用

通过有意地双重调用(double-invoking)以下函数：

• 组件函数体（仅限顶层逻辑，不包括事件处理程序内的代码）
• 传递给 useState、set函数、useMemo 或 useReducer 的函数。
• 部分类组件的方法，例如 constructor、render、shouldComponentUpdate 等（请参阅完整列表）。

如果一个函数是纯函数，运行两次不会改变其行为，因为纯函数每次都会产生相同的结果。然而，如果一个函数是非纯函数（例如，它会修改接收到的数据），运行两次通常会产生明显的差异（这就是它是非纯函数的原因！）。这有助于及早发现并修复错误。

可以尝试着在函数组件的函数体中调用一个console.log你会发现它会执行两次，如果浏览器中安装了React Developer Tools，第二次调用会显示为灰色。

可以为应用程序的任何部分开启严格模式，被包裹元素和它的后代元素都会进行检查。

import React, { PureComponent } from 'react'

export class Home extends PureComponent {
  // 严格模式下会报警告
  UNSAFE_componentWillMount() {
    console.log("Home UNSAFE_componentWillMount")
  }

  constructor(props) {
    super(props)
    console.log("Home Constructor")
  }

  componentDidMount() {
    console.log("Home componentDidMount")
  }

  render() {
    console.log("Home Render")

    return (
      <div>
        <h2>Home Page</h2>
      </div>
    )
  }
}

class App extends PureComponent {
  render() {
    return (
      <div>
        <StrictMode>
          <Home/>
        </StrictMode>
        <Profile/>
      </div>
    )
  }
}

export default App