严格模式

React 官方文档: 严格模式

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

检测意外的副作用

React 可以在提交之前多次调用渲染阶段生命周期的方法，或者在不提交的情况下调用它们。

因此某些方法（如: setState）可能会被多次调用，所以不要在它们内部编写副作用相关的代码，这点非常重要。

严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过故意重复调用以下函数来实现的该操作。

举例

function App() {
  const [num, update] = useState(0)

  function onClick() {
    update(num + 1)
  }

  console.log('render')

  return <p onClick={onClick}>{num}</p>
}

当 App 被 StrictMode 包裹，点击 p 触发更新后，App 组件会 render 两次。

备注

在 v17 之前，例子中 console.log 会执行两次。但在 v17 之后，React 覆写了 console 方法，所以 console.log 只会执行一次，但组件实际会 render 两次

这么做的目的是：作为函数组件，App 的副作用应该在 useEffect 回调中执行。

如果不规范书写副作用（比如在组件函数体内写副作用），那么重复 render 更容易暴露可能产生的 bug。

检测意外的副作用​

举例​

检测意外的副作用

举例