用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>
);
然后就解决了这个问题