React Useeffect 说明文档

# React useEffect 最佳实践 一份全面的指南，教你何时在 React 中使用 `useEffect`，更重要的是，何时**不要**使用它。本技能基于 React 官方文档，并为常见的 useEffect 反模式提供了实用的替代方案。 ## 目的 副作用 (Effects) 是 React 响应式范式中的**逃生舱**。它们允许你与浏览器 API、第三方组件或网络请求等外部系统同步。然而，许多开发者过度使用副作用来处理 React 本可以通过其他方式更好地解决的任务。 本技能帮助你： - 识别何时真正需要副作用，何时不需要 - 识别常见的反模式及其修复方法 - 应用更好的替代方案，如 `useMemo`、`key` 属性和事件处理器 - 编写干净、可维护且无竞态条件的副作用代码 ## 何时使用此技能 当你处于以下情况时使用： - 编写或审查 `useEffect` 代码 - 使用 `useState` 存储派生值 - 实现数据获取或订阅 - 在组件间同步状态 - 遇到陈旧数据或竞态条件导致的 Bug - 怀疑你的副作用是否必要 **触发短语：** - "我应该在这里使用 useEffect 吗？" - "如何修复这个 useEffect？" - "我的副作用导致了过多的重新渲染" - "使用 useEffect 获取数据" - "当 props 改变时重置状态" - "从 props 派生状态" ## 工作原理 本技能通过三个关键资源提供指导： 1. **快速参考表** - 针对常见场景的 DO/DON'T 模式快速查询 2. **决策树** - 确定正确方法的视觉流程图 3. **详细反模式** - 9 个常见错误及其解释和修复 4. **更好的替代方案** - 8 个替换不必要副作用的成熟模式 本技能教你提出正确的问题： - 是否涉及外部系统？ - 我是在响应用户事件还是组件挂载？ - 这个值可以在渲染期间计算吗？ - 我需要在 prop 改变时重置状态吗？ ## 关键特性 ### 1. 快速参考指南 展示常见场景 DO/DON'T 的可视化表格： - 从 props/state 派生状态 - 昂贵的计算 - 在 prop 改变时重置状态 - 用户事件响应 - 通知父组件 - 数据获取 ### 2. 决策树 清晰的流程图，引导你从“需要响应某事吗？”找到正确解决方案： - 用户交互 → 事件处理器 - 组件挂载 → 副作用 (用于外部同步/分析) - 派生