关于 react-useeffect
面向 React 开发的指南，说明何时需要 Effect，何时应改用渲染期间计算、事件处理器或其他替代方案，重点是避免不必要地使用 useEffect。
主要功能
- 01说明 Effect 的适用场景
- 02派生状态的替代做法
- 03事件处理器使用建议
- 04数据获取与清理指导
- 05选择方案的决策树
适用场景
- 01检查使用 useEffect 的组件
- 02从 props 或状态派生值
- 03无需 Effect 地处理用户操作
- 04在清理逻辑下获取数据
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-useeffect确认已加载。
附带文件alternatives.mdanti-patterns.md
详细介绍
你可能不需要 Effect
Effect 是 React 的逃生舱口。它们让你能够与外部系统同步。如果不涉及外部系统，你就不应该需要 Effect。
快速参考
| 场景 | 不要 | 要 |
|---|---|---|
| 从 props/state 派生状态 | useState + useEffect | 在渲染期间计算 |
| 开销较大的计算 | 用 useEffect 缓存 | useMemo |
| prop 变化时重置 state | 带 setState 的 useEffect | key prop |
| 响应 user 事件 | 监视 state 的 useEffect | 直接在事件处理函数中处理 |
| 通知父组件变更 | 调用 onChange 的 useEffect | 在事件处理函数中调用 |
| 获取数据 | 不带清理的 useEffect | 带清理的 useEffect 或框架机制 |
何时你确实需要 Effect
- 与外部系统同步（非 React 组件、浏览器 API）
- 对外部 store 的订阅（尽可能使用
useSyncExternalStore） - 因组件显示而运行的分析/日志
- 带正确清理的数据获取（或使用框架的内置机制）
何时你不需要 Effect
- 为渲染转换数据 - 在顶层计算，自动重新运行
- 处理 user 事件 - 使用事件处理函数，你明确知道发生了什么
- 派生 state - 直接计算：
const fullName = firstName + ' ' + lastName - 链式 state 更新 - 在事件处理函数中计算所有下一次 state
决策树
Need to respond to something?
├── User interaction (click, submit, drag)?
│ └── Use EVENT HANDLER
├── Component appeared on screen?
│ └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│ └── CALCULATE DURING RENDER
│ └── Expensive? Use useMemo
└── Need to reset state when prop changes?
└── Use KEY PROP on component
详细指导
评论
支持 Markdown