React 18 并发渲染下,为什么 useEffect 会执行两次?
在 React 18 的 StrictMode 下,开发环境里组件挂载时 useEffect 会执行两次。这不是 bug,而是 React 为了帮助开发者提前发现副作用清理问题而刻意为之的行为。很多人在接入 React 18 或者升级现有项目时,会突然看到控制台里接口请求翻倍、定时器被创建两次、WebSocket 连接重复建立,甚至出现数据竞争。这个现象在开发环境最明显,生产环境不会重复执行。背后的机制是 React 18 引入了并发渲染和可复用的状态,StrictMode 会模拟组件被卸载再重新挂载的过程。文章会从实际代码出发,分析重复执行的真实原因、哪些副作用会受影响,以及如何写出在并发模...