关于 react-useeffect
面向 React 开发者的指导技能，帮助判断何时使用 Effect，何时在渲染期间或事件处理程序中完成工作。内容强调避免不必要的 Effect，并说明外部同步等适用场景。
主要功能
- 01派生状态与渲染计算规则
- 02使用 useMemo 和 key 属性的替代方案
- 03事件处理程序与状态更新建议
- 04Effect 与外部系统同步的适用条件
- 05数据获取的清理指导
适用场景
- 01替换用于计算显示数据的 Effect
- 02选择属性变化时重置状态的方式
- 03无需监听状态即可处理用户操作
- 04与浏览器 API 或订阅同步
安装
复制下面的命令，在终端中运行。
$
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