type
Post
status
Published
date
Dec 10, 2024
slug
避免过度useEffect使用
summary
useEffect 适合管理渲染之外的副作用，但过度使用会把组件变成依赖迷宫。这篇用反例和自定义 Hook 说明怎么把副作用收拢。
tags
开发
建站
工具
category
技术分享
icon
password
synced
synced
paired_with
3551d487-a2a1-819f-88b7-fc45d3c269a8
source_hash
b8a94d017af2dbaefecd61ab5667f3b3555f55c1eedb981979a88da011671844
translation_locked
translation_locked
useEffect 是 React 里那种"看起来很好用结果用着用着把组件搞崩"的 Hook。我自己写过不少被它毒打的项目，有些坑是真踩了好几次才学乖。这篇文章想聊聊我对 useEffect 的看法，什么时候用、什么时候别用、用了之后怎么收尾不会留炸弹。
副作用是什么
先说清楚 React 里的一个核心概念。所谓副作用 (side effect)，就是组件渲染过程之外的那些事，比如
- 调 API 拿数据
- 直接改 DOM
- 订阅外部数据源
- 设个定时器或者监听个事件
这些事不属于"渲染"本身，但它们会影响渲染结果。React 不知道它们什么时候发生，所以才需要 useEffect 这个出口去管它们。
useEffect 大概长这样
声明式、自带清理钩子、依赖追踪，看着是真挺香。但当你一个组件里塞了五六个 useEffect，问题就来了。
真正坑人的写法
我以前写过这种代码，现在回头看真想抽自己一巴掌。
四个 useEffect 散在一个组件里，各自盯着自己的依赖，谁先谁后、谁触发谁、哪个会引起重渲染，看一眼很难一下捋清楚。再加点
useCallback 和 useMemo，组件直接进入"不敢动"的状态。我现在怎么写
一句话，不是所有副作用都需要 useEffect。能抽出去就抽出去。最常见的几种处理方式
- 把同一类副作用抽成自定义 Hook，组件里只剩一行调用
- 数据获取交给 React Query / SWR / 服务器组件，别自己写 useEffect
- 真的要写 useEffect 的时候，盯紧依赖数组和清理函数
下面是把上面那个组件抽干净后的样子。
那个
mounted 标志位是用来防止组件卸载之后还在 setState 的，不然控制台里那条红色警告会一直跟着你。写在最后
useEffect 不是问题，乱用 useEffect 才是。我现在写新组件之前都会先问自己一句"这件事必须等组件渲染完之后再做吗"，如果答案是"其实可以放到组件外面"，那就别塞进 useEffect 里。
📎 参考文章
- 作者:LeoQin
- 链接:https://leoqin.com/article/%E9%81%BF%E5%85%8D%E8%BF%87%E5%BA%A6useEffect%E4%BD%BF%E7%94%A8
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
