最近用新的create-react-app创建了新工程,然后发现诡异的事情是正常写代码useEffect里的代码会执行2次
浏览器控制台里会重复输出 test render
这是怎么回事呢?查了半天文档,最后确定 是React18后,StrictMode会额外对组件进行卸载、安装1次
为什么这样设计?原因是 react为未来的功能 离屏渲染 做铺垫,让大家先适应下,检查额外的副作用,改进代码
总结下来有几种解决方案,按自己需要选择,没有最优解
1、注释StrictMode
优点:改动量少
缺点:不符合react未来发展趋势
但是眼不见心不烦的最好办法了
2、对effect里的代码做处理
如果是注册了监听事件,就在return里移除
如果是发起了接口请求,那就做额外的判断,避免重复发起请求
该方案对业务代码改动比较多,带来心智负担比较大
3、忽略
即什么都不做,发起2次请求就发起2次请求。因为主要是 开发环境受影响,生产环境无影响
只要不是强迫症非要解决这个,可以考虑这个方案