背景
起因我在开发 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!