在React useEffect中如何安全地使用动态数组作为依赖项

在React函数组件中，useEffect的依赖项数组用来控制副作用的执行时机，当依赖项发生变化时才会重新执行副作用逻辑。很多开发者会直接将动态生成的数组放入依赖项，却经常遇到无限渲染、副作用重复执行的问题，这需要从React的依赖比较机制入手理解原因。

为什么直接把动态数组作为依赖项会有问题

React在对比useEffect的依赖项时，使用的是Object.is方法进行浅比较。对于数组这种引用类型，每次组件渲染时如果动态生成新的数组，即使数组内容完全一致，引用地址也会发生变化，React会认为依赖项发生了改变，从而触发useEffect重新执行。

比如下面的错误示例：

import { useEffect, useState } from 'react';

function Demo() {
  const [count, setCount] = useState(0);
  // 每次渲染都会生成新的arr引用
  const arr = [count, count * 2];

  useEffect(() => {
    console.log('副作用执行了，当前arr:', arr);
  }, [arr]); // 直接把动态数组作为依赖

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

上面的代码中，每次count变化触发组件重新渲染，都会生成一个新的arr数组，即使arr的内容只是跟随count变化，useEffect也会每次都执行，如果副作用中还有修改count的逻辑，就会陷入无限循环。

安全使用动态数组作为依赖项的方案

方案一：使用useMemo缓存数组引用

useMemo可以缓存计算结果，只有当依赖项变化时才重新计算，我们可以用它来缓存动态数组，保证数组引用只在内容真正变化时才更新。

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

function Demo() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState('');

  // 用useMemo缓存arr，只有count变化时才重新生成arr
  const arr = useMemo(() => {
    return [count, count * 2];
  }, [count]);

  useEffect(() => {
    console.log('副作用执行了，当前arr:', arr);
  }, [arr]); // 现在arr的引用会被稳定缓存

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加count</button>
      <button onClick={() => setOtherState(Math.random())}>修改其他状态</button>
    </div>
  );
}

这个方案中，即使otherState变化导致组件重新渲染，只要count没有变化，arr的引用就不会改变，useEffect也不会被触发，避免了不必要的执行。

方案二：序列化数组作为依赖

如果不想额外使用useMemo，也可以把数组通过JSON.stringify序列化成字符串作为依赖项，因为字符串是基本类型，内容相同的话Object.is比较结果就是相等的。

import { useEffect, useState } from 'react';

function Demo() {
  const [count, setCount] = useState(0);
  const arr = [count, count * 2];

  useEffect(() => {
    console.log('副作用执行了，当前arr:', arr);
  }, [JSON.stringify(arr)]); // 用序列化后的字符串作为依赖

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

需要注意的是，这个方案只适合数组内容是基本类型的情况，如果数组中包含函数、循环引用等无法被JSON序列化的内容，就会出问题。另外频繁序列化也会有轻微的性能开销。

方案三：提取数组的关键状态作为依赖

如果动态数组是由几个固定的状态计算得到的，也可以直接把这些状态作为useEffect的依赖项，完全避开数组引用的问题。

import { useEffect, useState } from 'react';

function Demo() {
  const [count, setCount] = useState(0);
  // 假设arr是[count, count*2]，直接把count作为依赖
  useEffect(() => {
    const arr = [count, count * 2];
    console.log('副作用执行了，当前arr:', arr);
  }, [count]); // 直接依赖生成数组的关键状态

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

这个方案是最推荐的，因为完全符合React的依赖设计理念，也不需要额外的缓存或者序列化操作，性能也是最好的。

不同方案的适用场景对比

注意事项

• 不要直接把props传递过来的动态数组作为useEffect依赖，除非父组件已经做好了引用缓存，否则同样会出现引用变化的问题。
• 如果数组内容可能包含undefined、null等特殊情况，使用JSON.stringify方案时要注意序列化后的结果是否符合预期。
• 如果动态数组的生成逻辑很复杂，优先考虑把生成逻辑抽成useMemo，既保证引用稳定，也方便逻辑复用。

ReactuseEffect动态数组依赖useMemoJSON_stringify修改时间：2026-07-02 11:33:39