Skip to main content

严格模式

warning

严格模式只在开发环境中才会起作用，不会影响生产构建！

React 17 严格模式介绍

https://17.reactjs.org/docs/strict-mode.html

React18 的严格模式新功能：

  1. 在 React 17 的时候每个组件都会 render 两次，但是其中一次是被 React 默认隐藏了，用户无法得到任何提示。现在是通过柔和的方式告诉用户，颜色为灰色。#20090 2.为了消除不安全的副作用(开发者导致的）。在添加了<StrictMode> 以后。React 会有意渲染两次。(mount -> unmount ->mount)。
  2. 在以下的生命周期，在提交 render 阶段之前会多次调用渲染阶段生命周期，或者在不进入 render 流程的时候进行调用。目的是检验是否存在副作用，React 自身不能检测副作用，但是通过这些手段来辅助用户发现它们。
  • constructor
  • componentWillMount（或 UNSAFE_componentWillMount）
  • componentWillReceiveProps（或 UNSAFE_componentWillReceiveProps）
  • componentWillUpdate（或 UNSAFE_componentWillUpdate）
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • setState 更新函数（第一个参数）
React 18 的初衷是希望帮助用户提早发现问题。但实际情况它所造成的恶劣影响已经远远超过了它产生的高光时刻，比如我们如果有两次的 ajax 请求，或者赋值等等...

解决方案： 如果我们想要避免这种情况，将 React.StrictMode 标签注释掉即可。

在未来，React 18 的严格模式可以保证组件拥有可重用的状态。在组件卸载以后，重新挂载可以使用卸载前的状态。类似于 vue 中的 keep-alive。