关于 react-useeffect
面向 React 开发者的技能，帮助判断何时应使用 Effect，以及如何用渲染计算、事件处理器或其他机制替代不必要的 Effect。
主要功能
- 01区分外部同步与派生数据
- 02用渲染过程计算派生状态
- 03以 useMemo 缓存昂贵计算
- 04用事件处理器响应用户操作
- 05为数据获取处理清理逻辑
适用场景
- 01重构由 props 或 state 派生的数据
- 02避免用 Effect 处理用户事件
- 03为外部订阅选择合适机制
- 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