记一次错误使用 useEffect 导致电脑差点“报废”

Alang2025-04-01 18:52

背景

起因我在开发 A 项目，过程中写了一点代码（未仔细检查），然后就挂着 A 项目去开发 B 项目了。感觉电脑差点报废，原因竟然是....

不对劲

结果这几天我一直发现电脑有点卡，明显感觉不对劲，回忆下这几天不对劲的点：

周末挂机2天，电脑 CPU 温度变成 100°，我还以为是没关机过，刻意锁屏休眠了一下，不过温度降到 80°还是很高。
偶尔切换窗口卡顿，编码卡顿
网络卡顿

就这样持续了 3 天，我都没去管！以为是电脑长时间没关机的原因，周末关机试一下！

按理说不应该，mac 长时间不关键不影响呀，何况我 mac mini 都没电池，怕啥！

排查问题

一、查看电脑进程，发现一个 Google Chorome Helper 占用较高！

二、打开 Chorome > 更多工具 > 任务管理器

cpu 飙升到 155%!

三、发现了目标标签，打开标签，发现有个报错信息一直在轮询报错

四、check A 项目代码！根据报错信息搜索 useEffect 找到了如下罪魁祸首！！！

tsx 复制代码

const Demo = ({ data }) => {
    // 选中的值
    const [selectedKeys, setSelectedKeys] = useState([])
    
    // 选项列表
    const options = data.map(v => ({
      label: v,
      value: v
    }))
    
    // 监听，默认全部选中
    useEffect(() => {
      setSelectedKeys(options.map(v => v.value))
    }, [options])
}

这代码相信大家一看就明白了吧！useEffect 会 setSelectedKeys，然后组件重新渲染, options 就会改变，然后又会触发 useEffect！

解决方法，监听 options 改成props 的 data 就好了。

tsx 复制代码

// 监听，默认全部选中
useEffect(() => {
  setSelectedKeys(options.map(v => v.value))
}, [data])

事后总结

事后想想太可怕了，CPU 一直保持在 100°，然后磁盘读取、操作都变得卡顿。原因竟然是自己的粗心，加上当时 B 项目有点紧急，就没仔细测试和看到标签的报错信息，导致这个标签一直挂着，然后 CPU 就炸了！流汗！发出来供大家娱乐一下（嘲笑）。

大家引以为戒呀！心疼我的电脑 3s！