React不常用知识点

1. React.StrictMode

使用create-react-app创建的项目，使用react hook开发，最开始为了查看setState会触发几次渲染，但是发现开发环境下只要调用就会在函数体打印两次log。经查找原因，发现，这个是

ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById("root"));

中的React.StrictMode导致的，它限制了全局使用严格模式。

首先，其官方定义：

与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告（只在开发模式触发；production环境不会）。

其为了更好的检查代码的内存泄漏和或出现无效的应用程序状态，严格模式下，会对某些函数和生命周期运行两遍。

1. class 组件的 constructor，render 以及 shouldComponentUpdate 方法
2. class 组件的生命周期方法 getDerivedStateFromProps
3. 函数组件体
4. 状态更新函数 (即 setState 的第一个参数）
5. 函数组件通过使用 useState，useMemo 或者 useReducer

因为我是验证的setState函数，所以也会触发两次，导致两次log 。本质上有一次log是严格模式为了检验代码触发的。

注意：

重复log的问题，在React17.0中应该不会再发生。因为更新日志中有：

Disable console during the repeated render in Strict Mode.