React 中 useEffect 依赖函数导致无限循环
React 中 useEffect 依赖函数导致无限循环：原因与解决方案
在 React 中使用 useEffect 时，如果依赖数组中包含函数引用，很容易触发无限循环。这类问题看似复杂，但本质源于 JavaScript 的引用比较机制与 React 渲染流程的结合。本教程将带你从根源理解问题，并提供可立即应用的解决方法。
问题再现：一个经典的无限循环场景
假设你有一个组件，需要在 useEffect 中调用一个从父组件传入的回调函数，并将其作为依赖。
import { useEffect, useState } from 'react';
function Parent() {
const [count, setCount] = useState(0);
const logCount = () => {
console.log('Count is:', count);
};
return <Child onLog={logCount} />;
}
function Child({ onLog }) {
useEffect(() => {
onLog();
}, [onLog]); // ⚠️ 危险：onLog 每次渲染都是新函数
return <div>Child Component</div>;
}
运行这段代码后，useEffect 会不断执行，控制台无限打印，浏览器标签页甚至可能卡死。为什么会这样？我们要先理解两个关键概念。
无限循环的根本原因
1. 函数引用在每次渲染时都会变化
在 Parent 组件中，每次 count 更新，Parent 重新渲染，logCount 会被重新定义，生成一个全新的函数实例。尽管函数体的内容看起来相同，但 logCount === 另一个 logCount 的结果是 false，因为它们是不同的引用。
2. useEffect 依赖比较的规则
useEffect 使用 Object.is 对依赖数组中的每一项进行浅比较。当 onLog 作为依赖传入 [onLog] 时，React 会对比上一次渲染时的 onLog 和本次渲染的 onLog。由于它们是两个不同的引用，React 认为依赖发生了变化，于是重新执行 effect 函数。
执行 effect 函数又调用了 onLog，这通常没问题，但问题出在整个渲染循环中：
- 初始渲染：
Parent渲染，创建logCount（引用 A），传给Child，Child的 effect 执行onLog()。 - 如果
onLog内部触发了状态更新（例如父组件中的setCount），会导致Parent重新渲染。 Parent重新渲染时，logCount又被重新创建（引用 B），Child接收到新的onLogprop。- 由于
[onLog]依赖变化，Child的 effect 再次执行，调用onLog，可能再次触发状态更新... 周而复始。
即使 onLog 本身不直接引发状态更新，useEffect 执行后，React 因为依赖变化而安排 effect 再次运行，在浏览器空闲时不断触发，形成无限循环。
解决方案：如何安全地将函数作为依赖
根据具体场景，可以从以下几种最佳实践中选择合适的方法。
方案一：将函数从组件外部移入——当函数不依赖于组件状态或 props 时
如果一个函数不访问任何组件内的状态或 props，不要把它定义在组件内部。将其提取到组件外部，引用永远不会改变。
function logSomething() {
console.log('This function is always stable');
}
function Child({ onLog }) {
useEffect(() => {
onLog();
}, [onLog]); // ✅ onLog 引用永远不变
return <div>Child</div>;
}
function Parent() {
return <Child onLog={logSomething} />;
}
方案二：用 useCallback 包裹函数——让函数引用在依赖不变时保持稳定
如果函数必须定义在组件内部（因为它使用了 state 或 props），请使用 useCallback 并正确传入依赖数组。useCallback 会返回一个记忆化的函数，仅在依赖变化时才会更新引用。
function Parent() {
const [count, setCount] = useState(0);
const logCount = useCallback(() => {
console.log('Count is:', count);
}, [count]); // ✅ count 未变时，logCount 引用不变
return <Child onLog={logCount} />;
}
function Child({ onLog }) {
useEffect(() => {
onLog();
}, [onLog]);
return <div>Child</div>;
}
现在，只有当 count 实际变化时，logCount 才会得到新引用，effect 才会重新执行，不会形成无意义的循环。
方案三：使用 useRef 存储最新函数——避免把函数加入依赖数组
当你需要调用一个频繁变化的函数，但不想因此重新触发 effect 时，可以使用 useRef 保存该函数的最新版本，然后在 effect 中调用它，同时 effect 的依赖仅包含真正需要监听的变化值。
function Child({ onLog }) {
const onLogRef = useRef(onLog);
// 始终同步最新 onLog 引用
useEffect(() => {
onLogRef.current = onLog;
});
useEffect(() => {
const timer = setInterval(() => {
// ✅ 永远拿到最新的 onLog 函数，但 effect 不依赖它
onLogRef.current();
}, 1000);
return () => clearInterval(timer);
}, []); // 空依赖，仅挂载时启动定时器
return <div>Child</div>;
}
这种方式尤其适合定时器、事件监听等场景，可以避免因为函数引用变化而反复注册/注销监听器。
方案四：使用函数式更新避免依赖——适用于基于旧值更新 state 的情况
如果你的函数只是用来更新 state，并且新值依赖于旧值，可以直接在 useState 的更新函数中使用函数式更新，而不再需要将整个函数作为依赖。
function Parent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(prev => prev + 1); // 不依赖外部 count
}, []); // ✅ 依赖数组为空，引用永远不变
return <Child onIncrement={increment} />;
}
如何诊断与排查无限循环问题
当组件出现意外的大量更新或卡顿时，可以遵循以下步骤定位问题：
- 检查
useEffect依赖数组：确认是否把每次渲染都重新创建的函数、对象或数组作为依赖。 - 使用
console.log或 React DevTools Profiler：在 effect 内部打印执行次数，观察是否呈指数级增长。 - 使用
eslint-plugin-react-hooks：该插件的exhaustive-deps规则会帮你发现遗漏或多余的依赖，并给出警告。 - 临时使用
useRef计数：在 effect 内累加 ref 值，判断是否超过了预期的执行次数。
最佳实践总结
- 不要恐慌地移除依赖：关闭 eslint 警告或随意忽略依赖只会隐藏问题。应努力使依赖稳定。
- 优先使用
useCallback和useMemo：它们是 React 提供给函数和值记忆化的标准工具。 - 善用函数式 setState：减少对当前 state 的依赖。
- 考虑组件的设计：有时将函数下沉到子组件内部，或提升到父组件外部，可以从结构上消除依赖问题。
- 使用
useRef作为最后手段：当其他方案都过于复杂时，ref是绕过引用比较的有效模式，但要确保语义清晰。
理解了 React 的渲染机制和 JavaScript 的引用比较，useEffect 依赖函数导致无限循环的问题就能迎刃而解。选用上述任意一种方案，便能编写出稳定且高效的副作用逻辑。