关于 react-useeffect
为 React 开发者提供的 Hook 使用指南，说明何时应避免 useEffect，以及何时需用它同步外部系统。通过常见场景和替代方案帮助选择合适做法。
主要功能
- 01区分需要与不需要 Effect 的场景
- 02提供常见反模式及替代方案
- 03指导派生状态在渲染期间计算
- 04介绍 useMemo、key 和事件处理器
适用场景
- 01避免用 Effect 处理派生数据
- 02处理用户操作引发的状态变化
- 03为数据获取添加清理逻辑
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-useeffect确认已加载。
附带文件alternatives.mdanti-patterns.md
详细介绍
你可能不需要 Effect
Effect 是 React 的逃生舱口。它们可以让你与外部系统同步。如果不涉及外部系统，你就不需要 Effect。
快速参考
| 情况 | 不要这样做 | 应该这样做 |
|---|---|---|
| 根据 props/state 派生状态 | useState + useEffect | 在渲染期间计算 |
| 耗时计算 | 用 useEffect 缓存 | useMemo |
| 在 prop 变化时重置状态 | 使用 setState 的 useEffect | key prop |
| 响应用户事件 | 使用 useEffect 监听状态 | 直接使用事件处理函数 |
| 通知父组件发生更改 | 使用 useEffect 调用 onChange | 在事件处理函数中调用 |
| 获取数据 | 不带清理逻辑的 useEffect | 带清理逻辑的 useEffect 或框架 |
何时确实需要 Effect
- 与外部系统同步（非 React 组件、浏览器 API）
- 订阅外部存储（尽可能使用
useSyncExternalStore） - 因组件显示而运行的分析/日志记录
- 正确清理的数据获取（或使用框架内置机制）
何时不需要 Effect
- 转换渲染所需的数据 - 在顶层计算，它会自动重新运行
- 处理用户事件 - 使用事件处理函数，你清楚具体发生了什么
- 派生状态 - 直接计算：
const fullName = firstName + ' ' + lastName - 串联状态更新 - 在事件处理函数中计算所有下一个状态
决策树
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