React副作用与外部系统同步总览
React 中 effect 类 Hook 与网络、DOM、订阅、第三方系统之间的同步边界总览。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
React副作用与外部系统同步总览
React 里的 effect 相关问题，核心不是“记住依赖数组怎么写”，而是先判断：这段逻辑是不是在和 React 外部系统同步。
为什么要放在一起理解
因为 useEffect 和 useLayoutEffect 经常被误当成“渲染后随便写逻辑的地方”，但它们真正服务的是同步外部系统。
什么叫外部系统
- 网络请求
- DOM API
- 定时器
- 事件订阅
- 第三方库实例
为什么要先理解这层，而不是先背 useEffect
因为很多 React 问题的根源不是“依赖数组不会写”，而是压根没先判断这段逻辑该不该进 effect。
这层判断比 API 细节更重要：
- 只是根据数据算 UI 吗
- 只是响应一次用户事件吗
- 还是说状态变化后，真的需要把外部世界同步成这个状态
只有第 3 类，才是真正的 effect 视角。
两个常见入口
useEffect
适合大多数普通副作用同步场景。
useLayoutEffect
适合必须在浏览器绘制前完成的布局相关副作用。
一条实用判断线
- 只是渲染逻辑？不要进 effect
- 只是事件响应？优先放事件函数
- 真的是状态变化后要和外部系统同步？再进入 effect
一个典型对比
不该进 effect 的：
const fullName = firstName + ' ' + lastName更像 effect 的：
useEffect(() => {
const id = window.setInterval(tick, 1000)
return () => window.clearInterval(id)
}, [tick])前者是渲染计算，后者是和定时器系统建立同步关系。
常见误区
- 把所有异步逻辑都塞进
useEffect - 依赖数组只靠“试出来”而不是理解依赖来源
- 把 effect 当成“生命周期替代品大全”
最短记忆方式
effect 不负责描述 UI，本质负责描述“组件如何和外部世界保持同步”。