react项目，如何解决重复两次渲染的问题？禁用StrictMode

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

聊聊react项目自身都客观存在的问题，就是组件两次渲染的问题。当然这个问题并不是很大，但是可能会给程序分析带来逻辑上的困惑。比如可能会困惑于这些逻辑为什么走了两次？其实，这些可能都是一个美丽的误会。当然，重复渲染的问题还有其它的情况，这里不做过多解释。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述react默认的模块项目里面，会重复渲染的问题。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

！想清楚看明白！

想清楚看明白，自己的项目实际情况，到底是哪一种情况！

第一种情况，如果可以正常运行，只是想进一步优化，减少不必要的渲染，请考虑memo或PureComponent。
第二种情况，像本文所描述的一样，所有的代码都执行了两次，注意是两次，那么请考虑禁用StrictMode。
第三种情况，组件反复渲染死循环。这个是你代码写的有问题，比如在组件初始化阶段，修改了state之类的会引起组件的重新渲染。然后又修改了state，然后再渲染，如此往复死循环。

就目前的情况来看，强烈建议大家禁用这个默认的StrictMode。默认开启的时候，会有一些莫名无法解释的事情发生。关闭的时候，目前还没有看到有什么影响。

问题重现

为了更好的说明问题，苏南大叔在这里还是拿一个刚刚初始化的create-react-app项目来说事。参考文章：

• https://newsn.net/say/create-react-app.html
• https://newsn.net/say/create-react-app-typescript.html

在app.js里面，放置一个console.log()输出，用于观察是否被执行，以确定是否被渲染。代码如下：

function App() {
  console.log("重新渲染");
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}
export default App;

可以发现：在调试状态下，对应的console被输出两次。

解决方案一

在react项目的成品状态下，对应的console输出一次。所以，可以build之后使用。

npm run build

build之后的代码，可以放在推荐的serve下，也可以放在传统容器下面看效果，具体情况就具体分析了。

解决方案二【推荐】

如果对于这个多次渲染的问题有较大困扰的话，还可以去除StrictMode模式即可。即使是在调试模式下，也不会有两次渲染的问题了。

相关链接

• https://newsn.net/say/create-react-app-typescript.html
• https://newsn.net/say/create-react-app.html
• https://newsn.net/say/seo-web-vital.html

总结

更多react项目经验文章，请点击链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。