name: react-useeffect description: 来自官方文档的React useEffect最佳实践。在编写/审查useEffect、useState用于派生值、数据获取或状态同步时使用。教授何时不使用Effect以及更好的替代方案。
你可能不需要使用Effect
Effect是React的一个逃生舱口。它们让你与外部系统同步。如果没有外部系统参与，你可能不需要Effect。
快速参考
| 情况 | 不要 | 做 |
|---|---|---|
| 从props/state派生的状态 | useState + useEffect |
在渲染期间计算 |
| 昂贵计算 | useEffect 用于缓存 |
useMemo |
| 重置状态当prop改变 | 使用useEffect和setState |
使用key prop |
| 用户事件响应 | useEffect 监视状态 |
直接在事件处理器中处理 |
| 通知父组件变化 | useEffect 调用onChange |
在事件处理器中调用 |
| 获取数据 | useEffect 没有清理 |
useEffect 带清理或使用框架 |
当你确实需要Effect时
- 与外部系统同步（非React小部件、浏览器API）
- 订阅外部存储（尽可能使用
useSyncExternalStore） - 分析/日志记录，因为组件显示而运行
- 数据获取带适当清理（或使用框架的内置机制）
当你不需要Effect时
- 转换数据用于渲染 - 在顶层计算，自动重新运行
- 处理用户事件 - 使用事件处理器，你知道发生了什么
- 派生状态 - 直接计算：
const fullName = firstName + ' ' + lastName - 链式状态更新 - 在事件处理器中计算所有下一个状态
决策树
需要响应某事？
├── 用户交互（点击、提交、拖动）？
│ └── 使用事件处理器
├── 组件出现在屏幕上？
│ └── 使用Effect（外部同步、分析）
├── Props/state改变需要派生值？
│ └── 在渲染期间计算
│ └── 昂贵？使用useMemo
└── 需要重置状态当prop改变？
└── 使用组件上的KEY PROP