React自定义Hook中useEffect依赖项的正确处理姿势：避坑指南

2025/7/8 07:02:49 171 0 0 0

大家好，我是你们的老朋友，一个在React世界里摸爬滚打多年的老鸟。最近很多小伙伴问我，自定义Hook里的useEffect依赖项到底该怎么写才不翻车？今天就来跟大家聊聊这个话题，保证看完这篇，你的Hook再也不会因为依赖项的问题而莫名其妙地重新渲染或者出现一些难以追踪的bug。

为什么`useEffect`的依赖项这么重要？

首先，我们来回顾一下useEffect的作用。useEffect允许你在函数组件中执行副作用操作，比如数据请求、DOM操作、订阅事件等等。它的第二个参数，也就是依赖项数组，告诉React什么时候应该重新执行这个副作用。

如果依赖项数组为空，那么useEffect只会在组件挂载后执行一次，卸载前执行清除函数（如果有的话）。如果依赖项数组不为空，那么只有当依赖项数组中的某个值发生改变时，useEffect才会重新执行。

问题就出在这里。如果你不正确地指定依赖项，可能会导致以下问题：

不必要的渲染： useEffect会频繁执行，导致组件不必要地重新渲染，影响性能。
潜在的bug： useEffect依赖了过时的状态或变量，导致一些意想不到的错误。

常见的错误用法

在深入最佳实践之前，我们先来看看一些常见的错误用法，避免大家踩坑：

依赖项缺失： 在useEffect中使用了某个状态或变量，但是没有把它添加到依赖项数组中。这会导致useEffect依赖了过时的值。

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

  useEffect(() => {
    // 错误：缺少count依赖
    setTimeout(() => {
      console.log(`Count is: ${count}`); // 总是输出初始值
    }, 1000);
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}

依赖了不稳定的值： 依赖项数组中包含了每次渲染都会创建的新对象或函数。这会导致useEffect每次渲染都会执行。

function MyComponent() {
  const [text, setText] = useState('');

  useEffect(() => {
    // 错误：每次渲染都会创建一个新的对象
    const options = { text: text };
    console.log('Options changed!');
  }, [{ text: text }]);

  return (
    <input value={text} onChange={e => setText(e.target.value)} />
  );
}

过度依赖： 为了避免依赖项缺失，把所有状态和变量都添加到依赖项数组中。这会导致useEffect过于频繁地执行。

function MyComponent() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [c, setC] = useState(0);

  useEffect(() => {
    // 错误：过度依赖，即使a, b, c没有被使用也会触发
    console.log('Something changed!');
  }, [a, b, c]);

  return (
    <div>
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
      <button onClick={() => setC(c + 1)}>Increment C</button>
    </div>
  );
}

正确处理`useEffect`依赖项的姿势

那么，如何才能正确地处理useEffect的依赖项呢？这里有一些建议：

只依赖useEffect中使用的状态和变量： 这是最基本的要求。如果useEffect中没有使用某个状态或变量，那么就不应该把它添加到依赖项数组中。

使用useCallback和useMemo优化： 如果useEffect依赖了一个函数或对象，而这个函数或对象是在组件内部创建的，那么可以使用useCallback和useMemo来避免每次渲染都创建新的函数或对象。

import React, { useState, useEffect, useCallback } from 'react';

function MyComponent() {
  const [text, setText] = useState('');

  // 使用 useCallback 缓存函数
  const handleChange = useCallback(
    e => {
      setText(e.target.value);
    },
    [setText]
  );

  useEffect(() => {
    // 正确：handleChange 是一个稳定的函数
    console.log('Text changed!');
  }, [handleChange]);

  return <input value={text} onChange={handleChange} />;
}

使用useRef存储可变值： 如果需要在useEffect中访问一个可变的值，但是不希望useEffect因为这个值的改变而重新执行，可以使用useRef来存储这个值。

import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 每次渲染后更新 ref 的值
  useEffect(() => {
    countRef.current = count;
  });

  useEffect(() => {
    // 可以访问最新的 countRef.current，但不会触发 useEffect 重新执行
    setTimeout(() => {
      console.log(`Count is: ${countRef.current}`);
    }, 1000);
  }, []);

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

使用useEffect的函数式更新： 当你需要在useEffect中更新状态，并且新的状态依赖于之前的状态时，可以使用setState的函数式更新形式，这样可以避免依赖过时的状态。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 使用函数式更新，避免依赖过时的 count
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
}

将逻辑封装到自定义Hook中： 如果你的组件中有一些复杂的副作用逻辑，可以把这些逻辑封装到自定义Hook中，这样可以使组件更简洁，更容易维护。

总结

正确处理useEffect的依赖项是编写高质量React代码的关键。希望通过这篇文章，大家能够更好地理解useEffect的依赖项，避免常见的错误，写出更健壮、更高效的React应用。记住，只依赖useEffect中使用的状态和变量，使用useCallback、useMemo和useRef来优化性能，使用函数式更新来避免依赖过时的状态，将逻辑封装到自定义Hook中。掌握了这些技巧，你就可以自信地驾驭useEffect，让你的React代码更加出色！

如果觉得这篇文章对你有帮助，请点个赞或者分享给你的朋友们吧！谢谢大家！

React老司机 React Hooks useEffect 依赖项处理

React自定义Hook中useEffect依赖项的正确处理姿势：避坑指南

为什么useEffect的依赖项这么重要？

常见的错误用法

正确处理useEffect依赖项的姿势

总结

评论点评

为什么`useEffect`的依赖项这么重要？

正确处理`useEffect`依赖项的姿势