React不常用知识点

·  阅读 99

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 组件的 constructorrender 以及 shouldComponentUpdate 方法
  2. class 组件的生命周期方法 getDerivedStateFromProps
  3. 函数组件体
  4. 状态更新函数 (即 setState 的第一个参数)
  5. 函数组件通过使用 useStateuseMemo 或者 useReducer

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

注意:

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

Disable console during the repeated render in Strict Mode.
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改