React18中

在React 18中，useEffect 钩子在开发环境中使用 <React.StrictMode> 包裹时会执行两次，这其实是React团队有意为之的一个特性，旨在帮助开发者更早地发现并发模式相关的问题。虽然这个现象在开发时可能会让一些初学者感到困惑，但了解背后的原因和如何应对，将会使你的React开发之路更加顺畅。，打包部署后就没有这个问题。

看官方文档是这么说的：

你可以在开发环境中使用 <StrictMode> 以利于暴露并发模式相关的问题。严格模式是不影响生产环境的，但是在开发环境中它将会记录额外的警告日志，并且被视为幂等的函数将被调用两次。

我们在index.js文件中可以看到

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<App /> 组件被 <React.StrictMode> 包裹，因此任何在 <App /> 组件或其子组件中使用的 useEffect 钩子都会被调用两次。

然而，如果你不希望 useEffect 在开发环境中被调用两次，你可以选择移除 <React.StrictMode>：

root.render(
    <App />
);

但请注意，移除 <React.StrictMode> 可能会让你错过一些潜在的问题。因此，在开发过程中，建议保留 <React.StrictMode>，并确保你的代码能够正确处理其带来的额外调用。

对于 useEffect 钩子被调用两次的情况，你可以通过检查其依赖项和副作用的清理函数来确保代码的正确性

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

读者评论