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

背景

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

不对劲

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

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

就这样持续了 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!

相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15887 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo7 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊9 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz10 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom10 小时前
iframe实战:跨域通信与安全隔离
前端·安全