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