react18版本useEffect和componentDidMount会被触发两次

 

 

 

 

 

            useEffect和componentDidMount会被触发了两次

 

一.  问题根源: React 18版本的问题

　    　2022 年 3 月 29 日 React 18 发布   官方日志传送门

　　    如果你项目在更新到 React 18 之后迥异行为，或许正是因为 useEffect()或componentDidMount默认变为被运行 2 次了。

　　    虽然这种情况只发生在 development mode 中，但无疑每位开发者都会遇到。

　　    另一个限制条件是 只在 strict mode 发生，但这同样是用 create-react-app 或 Next.js 所构建应用的默认选项。

二.  解决方案

　　   1. 可以把 index.js 文件里的 StrictMode 高阶组件去除

 　　  

 

 　　  2. 在 Next.js 中，可以在 next.config.js 文件里增加这个选项：

　　　　

reactStrictMode: false

 

 

更多参考链接: https://blog.csdn.net/tonylua/article/details/125117960

　　　　　　  https://www.5axxw.com/questions/content/kmfkg2