React18在StrictMode下useEffect会执行2次

1,247 阅读1分钟

最近用新的create-react-app创建了新工程,然后发现诡异的事情是正常写代码useEffect里的代码会执行2次

image.png

浏览器控制台里会重复输出 test render

这是怎么回事呢?查了半天文档,最后确定 是React18后,StrictMode会额外对组件进行卸载、安装1次

image.png

为什么这样设计?原因是 react为未来的功能 离屏渲染 做铺垫,让大家先适应下,检查额外的副作用,改进代码

image.png

总结下来有几种解决方案,按自己需要选择,没有最优解

1、注释StrictMode

image.png

优点:改动量少

缺点:不符合react未来发展趋势

但是眼不见心不烦的最好办法了

2、对effect里的代码做处理

如果是注册了监听事件,就在return里移除

image.png

如果是发起了接口请求,那就做额外的判断,避免重复发起请求

image.png

该方案对业务代码改动比较多,带来心智负担比较大

3、忽略

即什么都不做,发起2次请求就发起2次请求。因为主要是 开发环境受影响,生产环境无影响

只要不是强迫症非要解决这个,可以考虑这个方案