React Hook useEffect 深入解读：揭秘为什么它总是运行两次

前端

2023-11-22 10:50:11

React Hook useEffect 总是在运行两次：深度解析与应对策略

useEffect 钩子的作用

React useEffect 钩子是一种强大的工具，可让你在组件生命周期中执行副作用，例如获取数据、订阅事件或设置计时器。它提供了在组件挂载时、更新时或卸载时执行特定操作的灵活方法。

useEffect 为何总运行两次？

在 React 18 的严格模式下，useEffect 钩子总是运行两次。这是因为 React 会在第一次运行中检查组件的副作用是否有任何问题，然后再在第二次运行中执行这些副作用。

解决 useEffect 总运行两次的方法

有两种主要方法可以解决此问题：

使用 useCallback 或 useMemo 钩子：

useCallback 和 useMemo 钩子可帮助你在每次渲染时避免重新创建函数或对象。通过将它们存储在这些钩子中，你可以确保仅在发生变化时才重新创建它们。

在 useEffect 钩子中使用空依赖数组：

在 useEffect 钩子中使用空依赖数组（[]）会告诉 React 不需要在每次渲染时运行该副作用。这可以提高性能，因为可以避免不必要的副作用运行。

避免 useEffect 总运行两次的最佳实践

在创建应用程序时，遵循以下最佳实践可以帮助你避免 useEffect 总运行两次的问题：

仅在需要时使用 useEffect 钩子： 避免在组件中使用不必要的 useEffect 钩子。
使用 useCallback 或 useMemo 钩子： 在 useEffect 钩子中使用这些钩子可以避免在每次渲染时重新创建函数或对象。
在 useEffect 钩子中使用空依赖数组： 在不需要在每次渲染时运行副作用时，使用空依赖数组。

示例代码

import { useEffect, useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 每次渲染时都会重新创建函数
  const handleClick = () => {
    setCount(count + 1);
  };

  // 使用 useCallback 来避免每次渲染时重新创建函数
  const handleClick useCallback(() => {
    setCount(count + 1);
  }, []);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>点击</button>
    </div>
  );
};