现象:开发模式下面,发现useEffect函数会被执行多次,测试是2次,使用的react是18版本;但打包后的程序则是符合预期的只执行一次。
按官方对这个函数的用法,useEffect在没有定义第2个参数的时候,模拟的是componentDidMount,里面的return函数模拟的是componentWillUnmount的生命周期。
例如:
useEffect(()=>{
...componentDidMount 对应要做的事情
return ()=>{
...componentWillUnmount 对应要做的事情
}
},[])
找了很多资料都说不清楚,一般说词是StrictMode导致,如下代码
<>
<App />
</>
如果把上面的<>标签去掉,则不会产生执行多次的问题。
网上查询这个严格模式之所以要有执行多次useEffect的行为是想提醒开发者,注意清除副作用,提前暴露问题等
相关文章
- React 的 useEffect 清理函数详解
- react路由无法跳转(To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function)
- jquery的click 事件点击一次会累加执行多次的解决方法
- jQuery的click事件一次点击执行多次的原因与解决办法
- react useEffect 执行多次
- c语言for循环多条件判断,解决在for循环内判断条件多次执行
- react中副作用函数(useEffect)详解
- React 简析useEffect return执行时机
- React - useEffect函数的理解和使用
- React第十五章(useEffect)