526互联

React useEffect 在组件挂载时运行了两次

发布时间 2023-12-18 10:02:58作者: 还是一直这样

在使用 useEffect 这个 hook 时，发现useEffect会执行2次

useEffect(() => {
  console.log("执行 useEffect");
}, []);

控制台输出：

执行 useEffect
执行 useEffect

查看 疑难解答 官方文档，官方解释如下：

在开发环境下，如果开启严格模式，React 会在实际运行 setup 之前额外运行一次 setup 和 cleanup

解决方法

可以将 index.tsx 里面的 React.StrictMode 注释掉

root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  // </React.StrictMode>
);