React Strict Mode 的作用

前言 ​

目前，React 的脚手架创建出来的项目的根组件会被 StrictMode 包裹，官方的说法是它可以让我们在开发期间尽早地发现常见的 bug。

总体来说，它可以：

• 在整个组件树中生效。
• 也可以让一部分组件树开启严格模式。
• 开发期间会有两次渲染，我们可以发现一些错误。
• 开发期间副作用会被重新执行，我们可以发现一些错误。
• 严格模式会对被弃用的 API 发出警告，我们可以做一些修改。

全局严格模式和局部严格模式 ​

我们只需要在需要严格模式的地方，将组件用 <StrictMode> 包裹即可，其实如果我们的项目没有什么历史报复的话，我们使用全局模式即可。

是否要开启全局模式，取决与你或你的团队是否会犯一些低级错误，需不需要对即将弃用的 API 发出警告。

官方提到的注意事项是，如果一个 React App 由两个团队维护的话，需要达成共识，因为一旦启用严格模式，从启用严格模式的组件开始，其子组件是无法退出严格模式的。

开发时，两次渲染 ​

官方有一个犯错误的示例代码，它对 props 上传入的一个 Array 类型的数据做了 push 操作，严格模式的两次渲染就会 push 两次，我们就可以及时从界面上发现我们的错误。

这里吐槽一下，自己和身边同事还没有发现会这样写 react 代码的，但是这个作用聊胜于无吧。

开发时，重新执行副作用 ​

这就是本文标题里提到的问题。

官方的错误代码是一个连接聊天室的应用的例子，它犯的错误是没有在适合的时候断开连接。

两次执行副作用，如果我们没有在 useEffect 的 return 函数里断开连接，会导致有两次连接，真实场景下应该是会报错的，我们可以提前发现这种漏洞。

一般我们的应用会在 useEffect 里发送网络请求，这时候如果不知道严格模式的小伙伴可能就会慌了，以为是哪里写了 bug。

而我们如果知道了严格模式的这一现象，而且 build 后并不会有这个问题，我们就不会慌了。

对被弃用的 API 发出警告 ​

官方给了一些弃用的 API 作为例子，然而全都是 class 组件里的，真的已经很少用了。

我们简单了解一下严格模式的这个作用即可，如果碰到旧项目里出现问题，可以适当根据警告对代码做出修改。