关于 react-hooks
此技能为 React Hooks 的状态与副作用管理提供使用指南,涵盖内置 Hook、自定义 Hook 和常见规则。适用于需要处理依赖、清理逻辑及闭包问题的 React 开发者。
主要功能
- 01讲解 useState、useEffect 与 useContext
- 02涵盖 useRef、useMemo 和 useCallback
- 03介绍 useReducer 与 useLayoutEffect
- 04说明自定义 Hook 命名及调用规则
- 05提醒依赖完整与清理订阅、定时器
适用场景
- 01使用 Hook 管理组件状态和副作用
- 02编写可复用的自定义 Hook
- 03检查依赖数组及订阅清理逻辑
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ full-stack-skills/ react-skills --skill react-hooks安装后在 Claude Code 中输入/react-hooks确认已加载。
附带文件agents/openai.yamlLICENSE.txt
详细介绍
何时使用此技能
在用户希望执行以下操作时使用此技能:
- 用 React Hooks(useState、useEffect、useContext、自定义)管理状态与副作用
- 遵循 Hooks 规则与最佳实践,避免闭包与依赖问题
如何使用此技能
- 基础:useState、useEffect(依赖数组、清理函数);useContext、useRef。
- 进阶:useMemo、useCallback、自定义 Hook;useReducer、useLayoutEffect。
- 参考:https://react.dev/reference/react
最佳实践
- 确保依赖数组完整;清理订阅与定时器。
- 自定义 Hook 命名为 useXxx;避免在条件或循环中调用 Hook。
关键词
React Hooks、useState、useEffect、自定义 Hook
评论
支持 Markdown