告别useEffect依赖难题：如何精简代码，提升性能

2023-02-06 16:54:20

用 useEffect Hooks 优化 React 组件：精简依赖项的艺术

useEffect：一种强大的工具，也是一把双刃剑

useEffect 是 React Hooks 中最流行的一个，它允许我们在函数组件中执行副作用操作。然而，它有一个让人头疼的地方：它要求将 effect 中使用到的所有变量都放入依赖项数组（deps 数组）中。这可能会导致大量不必要的 effect 执行，从而降低代码性能。

应对挑战的 5 个妙招

为了解决这个问题，我们可以采取以下 5 种方法来精简 useEffect 的依赖项：

1. 减少不必要的依赖项

在编写 useEffect 时，仔细考虑哪些变量真正需要作为依赖项。如果某个变量在 effect 中根本没有使用，那就不要把它放入 deps 数组中。

代码示例：

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    // 返回一个 cleanup function 来清除定时器
    return () => {
      clearInterval(interval);
    };
  }, []); // 因为我们不使用任何变量，所以 deps 数组为空

  return (
    <div>
      <h1>计数器：{count}</h1>
    </div>
  );
};

2. 使用 useEffect Cleanup Function

useEffect 的第二个参数可以作为 cleanup function 来使用。cleanup function 会在 effect 被销毁时执行，可以用来做一些清理工作，例如取消定时器或注销事件监听器。

代码示例：

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  }, []); // 因为我们不使用任何变量，所以 deps 数组为空

  // 返回一个 cleanup function 来清除定时器
  return () => {
    clearInterval(interval);
  };

  return (
    <div>
      <h1>计数器：{count}</h1>
    </div>
  );
};

3. 使用 useRef Hook

useRef Hook 可以用来存储一个可变引用。这个引用不会在每次组件渲染时发生变化，因此我们可以用它来存储一些不想作为 useEffect 依赖项的变量。

代码示例：

const MyComponent = () => {
  const countRef = useRef(0);

  useEffect(() => {
    const interval = setInterval(() => {
      countRef.current++;
    }, 1000);
  }, []); // 因为我们使用 useRef，所以 deps 数组为空

  return (
    <div>
      <h1>计数器：{countRef.current}</h1>
    </div>
  );
};

4. 使用 useMemo Hook

useMemo Hook 可以用来缓存一个计算结果。这个计算结果不会在每次组件渲染时重新计算，因此我们可以用它来优化一些耗时的操作。

代码示例：

const MyComponent = () => {
  const heavyCalculation = useMemo(() => {
    // 耗时的计算
    return Math.random();
  }, []);

  useEffect(() => {
    // 使用缓存的计算结果
    console.log(heavyCalculation);
  }, [heavyCalculation]);

  return <div></div>;
};

5. 使用 useCallback Hook

useCallback Hook 可以用来缓存一个函数。这个函数不会在每次组件渲染时重新创建，因此我们可以用它来优化一些需要频繁执行的函数。

代码示例：

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // 点击处理程序
  }, []);

  useEffect(() => {
    // 使用缓存的点击处理程序
    document.addEventListener('click', handleClick);
  }, [handleClick]);

  return <div></div>;
};