React18的componentDidMount重复执行两次

最新推荐文章于 2023-09-30 02:23:32 发布

Eric加油学！

最新推荐文章于 2023-09-30 02:23:32 发布

阅读量788

点赞数 1

分类专栏：前端文章标签：前端 react Powered by 金山文档

本文链接：https://blog.csdn.net/m0_56698268/article/details/129244393

版权

前端专栏收录该内容

53 篇文章 4 订阅

订阅专栏

用React18简单的在componentDidMount里面写了个定时器，每1秒加1，但发现它每一秒会加2

    componentDidMount(){
        this.timer = setInterval(()=>{
            this.setState(state => ({count: state.count+1}))
        },1000)
    }

在定时器里加上打印语句，发现每秒输出2句，也就是执行了2次。因为是用的React 18.2.0版本，有一些改动，根据官网的介绍，大致意思如下：

在未来，React会提供一个新特性，该特性会使得组件取消加载后能维持状态。React 18会再Strict Mode中引入一个新的开发模式。React将会对每一个组件自动取消加载并重新加载。如果其干扰了你的应用，移除Strict Mode就能够修复组件重新加载的问题。（本人蹩脚的英语翻译的，将就这看。。。）

所以只需要将index.js文件里的React.StrictMode高阶组件包围去掉即可。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
        <App />   
  // </React.StrictMode>
);

然后就解决了这个问题