关于 react-useeffect
面向开发者的 React 指导技能，帮助判断何时使用 Effect。它说明派生状态、事件和计算的替代做法，也涵盖与外部系统同步的情况。
主要功能
- 01说明 Effect 的适用时机
- 02提供派生状态的替代方案
- 03建议使用事件处理函数
- 04使用 useMemo 处理耗时计算
- 05提供数据获取清理指导
适用场景
- 01检查用 Effect 处理派生数据的组件
- 02选择响应用户操作的实现方式
- 03规划与外部系统同步
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-useeffect确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
alternatives.mdanti-patterns.mdREADME.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