上周三凌晨两点，我在紧急修复一个线上崩溃的仪表盘页面——组件在切换筛选条件时频繁触发死循环渲染，导致页面卡死。而这一切的罪魁祸首，竟是一行看似无害的useEffect依赖数组。
当你的 useEffect 开始"自杀式循环"
场景是这样的：一个实时展示用户行为数据的看板，需要根据用户选择的timeRange和categoryId动态拉取数据。代码初版长这样：
const [data, setData] = useState([]); // 第一次崩溃：漏掉依赖项 useEffect(() => { fetchData(timeRange).then(setData); }, []); // 😱 缺少 timeRange 依赖- 第一次崩溃：用户切换时间范围时数据不更新。我马上意识到漏了依赖项——新手常犯的错误嘛！于是火速改成：
useEffect(() => { fetchData(timeRange, categoryId).then(setData); }, [timeRange, categoryId]); // ✅ 看起来没问题了？- 第二次崩溃：当
categoryId变化时，组件开始以每秒 10+ 次的频率疯狂请求。问题出在fetchData内部使用了setData，而每次setData都会触发组件重新渲染——因为fetchData在每次渲染时都是一个新的函数引用！
依赖项的"引用陷阱"
React 对依赖数组的比对是
浅比较（shallow comparison）。当你的依赖项包含对象、函数或数组时，每次渲染都会生成新的引用，导致useEffect认为依赖项"变化"了。看这段代码：
const getFetchOptions = () => ({ timeout: 3000, headers: { Authorization: token } }); useEffect(() => { fetchData(timeRange, getFetchOptions()).then(setData); }, [timeRange, getFetchOptions]); // 💥 每次都是新的 getFetchOptionsgetFetchOptions在每次渲染时都是全新的函数，即使实际内容没变。解决方案：// 正确做法1：将函数移入 useEffect useEffect(() => { const getFetchOptions = () => ({...}); fetchData(timeRange, getFetchOptions()).then(setData); }, [timeRange, token]); // ✅ 只依赖真正会变的原始值 // 正确做法2：useCallback 记忆化 const getFetchOptions = useCallback(() => ({...}), [token]);当依赖项是"不稳定对象"
- 第三次崩溃：我自以为学聪明了，把所有依赖项都拆成了原始值。但还是在处理一个复杂筛选对象时栽了跟头：
const [filters, setFilters] = useState({ timeRange: '7d', categories: [1, 2], advanced: { includeInactive: false } }); useEffect(() => { fetchData(filters).then(setData); }, [filters]); // 💣 对象整体作为依赖项虽然每次修改都用setFilters更新，但某些操作会先浅拷贝对象：
const handleToggleInactive = () => { const newFilters = { ...filters }; // 浅拷贝 newFilters.advanced.includeInactive = !filters.advanced.includeInactive; setFilters(newFilters); };由于advanced内部属性变化不会改变newFilters的引用，useEffect没有触发！解决方案：
// 正确做法：依赖项细化到内部属性 useEffect(() => { fetchData(filters).then(setData); }, [filters.timeRange, filters.categories, filters.advanced.includeInactive]); // 或者深度比较（谨慎使用） useEffect(() => { if (!deepEqual(prevFilters, filters)) { fetchData(filters).then(setData); } }, [filters]);避坑清单：useEffect 依赖数组的死亡陷阱
useMemo/useCallback）useEffect中修改依赖项本身，引发无限循环终极法则：像编译器一样思考
现在我的习惯是：
每当写完useEffect，先问自己三个问题：- 这个 effect 依赖的所有值都列出来了吗？（React Hooks ESLint 插件是必备）
- 依赖项中有没有可能"意外变化"的引用类型？
- 如果依赖项变化，会不会触发不必要的重复执行？
最后留个思考题：你在处理useEffect依赖时，有没有遇到过什么反直觉的崩溃场景？欢迎在评论区分享你的血泪史。
