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

写在前面：如果开发的时候突然听到电脑风扇狂转，或者浏览器卡死不动了，别慌，先按电源键强制关机（bushi）。
广告植入：欢迎访问我的个人网站：https://hixiaohezi.com

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

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

tsx 复制代码

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 里，{} 永远不等于 {}。

来看看发生了什么惨案：

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

解决方案

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

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

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

tsx 复制代码

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

useEffect(() => {
  fetchData(filter);
}, [filter]);

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

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

tsx 复制代码

const status = 'active';

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

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

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

tsx 复制代码

const filter = { status: 'active' };

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

总结

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

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

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

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

👉 hixiaohezi.com

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

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