React 避坑指南：让电脑卡死的“无限循环“

写在前面：如果开发的时候突然听到电脑风扇狂转，或者浏览器卡死不动了，别慌，先按电源键强制关机（bushi）。

广告植入：欢迎访问我的个人网站：https://hixiaohezi.com

作为一个拥有 x 年经验的老菜鸟，我大多时候用的的 vue , 最近在学 react ,觉得useEffect是个好东西。直到我写了一个看似人畜无害的数据查询功能。

需求很简单：当筛选条件变化时，重新请求数据。

function userList() { const [data, setData] = useState([]); // 筛选条件：查"激活状态"的用户 const filter = { status: 'active' }; useEffect(() => { console.log('发起请求...'); fetchData(filter).then(res => setData(res)); }, [filter]); // 依赖 filter，没毛病吧？ return <div>用户列表...</div>; }

保存，刷新。

问题出现

刚开始页面还挺正常。但过了一会儿笔记本的风扇声音突然变大，电脑页整个卡住了。

打开控制台（趁着还能动），Network 面板里那是红旗招展，请求像机关枪一样突突突地发出去：

Request 1 Request 2 ... Request 10086

我不得不使出绝招： 杀掉浏览器进程。

查找原因：该死的"引用类型"

菜，无需多言。

在 JavaScript 里，{}永远不等于{}。

来看看发生了什么惨案：

1. 组件挂载，创建filter对象（地址 A）。
2. useEffect执行，发现filter是新的，发起请求。
3. 请求回来，调用setData更新数据。
4. 组件重新渲染（重点来了！）。
5. 组件函数重新执行，创建新的filter对象（地址 B）。
6. useEffect再次对比依赖：地址 A !== 地址 B。
7. 又要执行 Effect！
8. 回到第 2 步，无限套娃…

解决方案

找到原因，解决办法也就有了。

方案一：useMemo 大法 (推荐 ✅)

既然是对象变了，那我就让它别变。用useMemo把它"冻"住：

// 只有依赖项变了，filter 才会变 const filter = useMemo(() => ({ status: 'active' }), []); useEffect(() => { fetchData(filter); }, [filter]);

方案二：简单粗暴拆解法 (最实用 ✅)

别传对象了，能不能直接传基本类型？

const status = 'active'; useEffect(() => { fetchData({ status }); // 在里面组装对象 }, [status]); // 依赖字符串，字符串 'active' === 'active'，稳如老狗

方案三：JSON.stringify (野路子 ⚡)

实在懒得拆，就把对象转成字符串对比。虽然有点 low，有时候还挺好使。

const filter = { status: 'active' }; useEffect(() => { fetchData(filter); }, [JSON.stringify(filter)]); // 只要内容不变，字符串就不变

总结

重启完电脑，看着不再狂转的风扇，我悟了：
React 的依赖比较是"浅比较"，它只看皮囊（内存地址），不看灵魂（对象内容）。

作为一个老菜鸟，不仅要防闭包，还得防对象。这哪里是写代码，简直是在玩扫雷。

如果这个坑你也踩过，握个爪。

最后，再加个广告，欢迎访问我的个人网站：

👉 hixiaohezi.com

(这里是我的个人网站，虽然没多少技术含量，但主打一个真实)

祝大家的代码永远不卡顿，CPU 永远冷静！