React 严格模式下 useEffect 执行两次的解决方法

前端

2023-02-28 06:31:31

useEffect 执行两次：原因和解决方案

什么是 useEffect？

useEffect 是 React 中的一个钩子函数，用于在组件生命周期的不同阶段执行副作用。副作用包括获取数据、设置计时器或修改 DOM。

为什么 useEffect 可能执行两次？

当启用 React 的严格模式时，useEffect 可能会执行两次。严格模式是一种开发环境，可以帮助开发者发现代码中的潜在问题。它执行额外的检查，其中包括在组件的首次渲染后检查 useEffect。

如何解决 useEffect 执行两次的问题？

有几种方法可以解决 useEffect 执行两次的问题：

1. 使用 Cleanup 函数

在 useEffect 中使用 cleanup 函数可以防止它执行两次。cleanup 函数将在组件卸载时执行，用于清理 useEffect 创建的任何资源。例如：

useEffect(() => {
  // 创建副作用

  // 返回 Cleanup 函数
  return () => {
    // 清理副作用
  };
}, []);

2. 使用 React.memo

React.memo 是一个高阶组件，可以记忆组件，防止不必要的重新渲染。当组件的 props 没有改变时，React.memo 将阻止组件重新渲染。例如：

const MyComponent = React.memo(() => {
  // 组件代码
});

3. 使用 React.lazy

React.lazy 可以延迟加载组件，直到它们被需要时才加载。这可以减少组件的加载时间，防止 useEffect 在组件加载完成之前执行。例如：

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
};

4. 使用 React.Suspense

React.Suspense 可以等待组件加载，直到它们加载完成。这可以防止 useEffect 在组件加载完成之前执行。例如：

const MyComponent = () => {
  // 组件代码
};

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
};