mcpField
R
react-hooks

react-hooks

github.com/full-stack-skills开发2157 次安装5 周前更新
代码仓库

关于 react-hooks

此技能为 React Hooks 的状态与副作用管理提供使用指南,涵盖内置 Hook、自定义 Hook 和常见规则。适用于需要处理依赖、清理逻辑及闭包问题的 React 开发者。

主要功能

  1. 01讲解 useState、useEffect 与 useContext
  2. 02涵盖 useRef、useMemo 和 useCallback
  3. 03介绍 useReducer 与 useLayoutEffect
  4. 04说明自定义 Hook 命名及调用规则
  5. 05提醒依赖完整与清理订阅、定时器

适用场景

  1. 01使用 Hook 管理组件状态和副作用
  2. 02编写可复用的自定义 Hook
  3. 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 规则与最佳实践,避免闭包与依赖问题

如何使用此技能

  1. 基础:useState、useEffect(依赖数组、清理函数);useContext、useRef。
  2. 进阶:useMemo、useCallback、自定义 Hook;useReducer、useLayoutEffect。
  3. 参考:https://react.dev/reference/react

最佳实践

  • 确保依赖数组完整;清理订阅与定时器。
  • 自定义 Hook 命名为 useXxx;避免在条件或循环中调用 Hook。

关键词

React Hooks、useState、useEffect、自定义 Hook

评论

支持 Markdown