mcpField
R
react-hooks

react-hooks

github.com/partme-ai开发71680 次安装3 周前更新
代码仓库

关于 react-hooks

面向 React 开发者的 Hooks 技能，涵盖内置 Hook 和可复用自定义 Hook，并指导 Hook 选择、依赖项处理、清理逻辑与使用规则。

主要功能

  1. 01内置 React Hooks 指导
  2. 02可复用自定义 Hook 模式
  3. 03使用 useReducer 管理复杂状态
  4. 04依赖项与清理检查
  5. 05Hook 规则与记忆化指导

适用场景

  1. 01管理组件状态和副作用
  2. 02提取可复用的有状态逻辑
  3. 03处理复杂状态转换

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill react-hooks

安装后在 Claude Code 中输入/react-hooks确认已加载。

附带文件LICENSE.txt

详细介绍

适用场景

在用户希望执行以下操作时使用此技能：

  • 使用 React 内置 Hook（useState、useEffect、useContext、useRef、useMemo、useCallback）
  • 创建用于复用有状态逻辑的自定义 Hook
  • 使用 useReducer 管理复杂状态
  • 使用记忆化 Hook 优化组件性能
  • 使用 useEffect 处理副作用（数据获取、订阅、计时器）
  • 理解并遵循 Hook 规则

使用方法

工作流
  1. 确定最适合用户需求的 Hook
  2. 遵循 Hook 规则：只能在顶层调用 Hook；只能在 React 函数中调用 Hook
  3. 生成 Hook 代码，并正确设置依赖数组和清理函数
  4. 验证不存在过时闭包或缺失的依赖项
1. useState 和 useEffect
import { useState, useEffect } from 'react';

function useUserData(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      })
      .catch(err => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });

    return () => { cancelled = true; }; // Cleanup on unmount or userId change
  }, [userId]);

  return { user, loading, error };
}
2. 使用 useReducer 管理复杂状态
import { useReducer } from 'react';

type State = { count: number; step: number };
type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'setStep'; payload: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + state.step };
    case 'decrement': return { ...state, count: state.count - state.step };
    case 'setStep':   return { ...state, step: action.payload };
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
3. useMemo 和 useCallback
import { useMemo, useCallback } from 'react';

function FilteredList({ items, filter }: { items: Item[]; filter: string }) {
  // Memoize expensive computation
  const filtered = useMemo(
    () => items.filter(item => item.name.includes(filter)),
    [items, filter]
  );

  // Memoize callback to prevent child re-renders
  const handleSelect = useCallback((id: string) => {
    console.log('Selected:', id);
  }, []);

  return <ItemList items={filtered} onSelect={handleSelect} />;
}
4. 自定义 Hook 模式
import { useState, useCallback } from 'react';

function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(prev => !prev), []);
  return [value, toggle];
}

// Usage
function Modal() {
  const [isOpen, toggleOpen] = useToggle(false);
  return <>{isOpen && <div>Modal Content</div>}<button onClick={toggleOpen}>Toggle</button></>;
}

最佳实践

  • 始终在 useEffect 依赖数组中包含所有依赖项（使用 ESLint 插件 react-hooks/exhaustive-deps）
  • 在 useEffect 的返回函数中清理订阅、计时器和监听器
  • 自定义 Hook 的名称以 use 为前缀（例如：useAuth、useFetch）
  • 切勿在条件语句、循环或嵌套函数中调用 Hook
  • 仅在可测量的性能收益明显时使用 useCallback 和 useMemo
  • 状态转换复杂时，优先使用 useReducer，而不是多次调用 useState

资源

关键词

React Hooks、useState、useEffect、useContext、useReducer、useMemo、useCallback、useRef、自定义 Hook、Hook 规则、依赖数组、清理、记忆化

评论

支持 Markdown