记一次错误使用 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!

相关推荐
斯~内克1 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道1 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维1 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久1 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain2 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏2 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing2 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ2 小时前
React(九)React Hooks
前端·react.js
拉不动的猪3 小时前
vue与react的简单问答
前端·javascript·面试