现象:开发模式下面,发现useEffect函数会被执行多次,测试是2次,使用的react是18版本;但打包后的程序则是符合预期的只执行一次。
按官方对这个函数的用法,useEffect在没有定义第2个参数的时候,模拟的是componentDidMount,里面的return函数模拟的是componentWillUnmount的生命周期。
例如:
useEffect(()=>{
...componentDidMount 对应要做的事情
return ()=>{
...componentWillUnmount 对应要做的事情
}
},[])
找了很多资料都说不清楚,一般说词是StrictMode导致,如下代码
<>
<App />
</>
如果把上面的<>标签去掉,则不会产生执行多次的问题。
网上查询这个严格模式之所以要有执行多次useEffect的行为是想提醒开发者,注意清除副作用,提前暴露问题等