React.StrictMode 这个是什么

Question

index.ts 文件中 React.StrictMode 包含一个 <App / > 会让你执行两次，

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

能删除他吗 或者这个有什么作用

Answer 1

阿莱克斯刘 2022-07-07 14:57:00

StrictMode 是一个用来检查项目中潜在问题的组件，它不会参与UI渲染，只会为嵌套元素提供检查和警告。

1、识别不安全的生命周期
2、关于使用过时字符串 ref API 的警告
3、关于使用废弃的 findDOMNode 方法的警告
4、检测意外的副作用
5、检测过时的 context API

不使用StrictMode不会对系统造成任何影响，不过为了避免错误最好使用StrictMode。至于渲染两次app的问题，错误应该来源于你的代码而不是StrictMode，因为StrictMode不参与UI渲染。

• 提问者 慕村0538170 #1

  是不是 检查意外的副作用 导致的 https://juejin.cn/post/6844904084768587790 这篇文章和我情况很类似 我想表达应该是这种意思

• 阿莱克斯刘 回复 提问者 慕村0538170 #2

  仔细阅读了一下文档，这是我一直忽略了的情况。使用StrictMode以可能会引起部分生命周期方法的多次调用，文档https://link.zhihu.com/?target=https%3A//zh-hans.reactjs.org/docs/strict-mode.html%23detecting-unexpected-side-effects

• 阿莱克斯刘 #3

  所以，请不要在这些方法中包含副作用。我之前确实没有注意到这个问题，strictMode莫名其妙的调用，尤其是在react 17以后还修改了console的规则，对程序员不是特别友好。不过，既然react要这样处理肯定还是有它的原因，我们还是得多读文档，欢迎继续讨论这个话题。谢谢你的提问。