---

名称: react-hooks 描述: 精通React hooks模式，包括自定义hooks、组合、优化和测试策略。 允许工具: Read, Write, Edit, Bash, Glob, Grep

React Hooks 技能

提供React hooks高级模式、组合策略和性能优化的专家级协助。

能力

• 设计和实现具有适当抽象的自定义hooks
• 为复杂状态和副作用管理组合hooks
• 使用记忆化模式优化hooks性能
• 实现用于数据获取、订阅和本地存储的hooks
• 使用React Testing Library测试自定义hooks
• 应用hooks规则和最佳实践

使用场景

在以下情况下调用此技能：

• 为可重用逻辑创建自定义hooks
• 为现有hooks进行性能优化
• 使用useReducer实现复杂状态逻辑
• 构建带缓存的数据获取hooks
• 创建表单处理hooks

输入参数

参数	类型	是否必需	描述
hookName	字符串	是	hook名称（带use前缀）
purpose	字符串	是	hook应实现的功能
parameters	数组	否	hook的输入参数
returnType	字符串	否	预期的返回值结构
dependencies	数组	否	所需的外部依赖项

配置示例

{
  "hookName": "useDebounce",
  "purpose": "以可配置延迟对值进行防抖处理",
  "parameters": [
    { "name": "value", "type": "T" },
    { "name": "delay", "type": "number" }
  ],
  "returnType": "T"
}

Hook模式

状态管理Hooks

// 使用useReducer处理复杂状态
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(v => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  return { value, toggle, setTrue, setFalse };
}

副作用Hooks

// 带清理的useEffect
function useEventListener<K extends keyof WindowEventMap>(
  eventName: K,
  handler: (event: WindowEventMap[K]) => void,
  element: Window | HTMLElement = window
) {
  const savedHandler = useRef(handler);

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const eventListener = (event: WindowEventMap[K]) => savedHandler.current(event);
    element.addEventListener(eventName, eventListener);
    return () => element.removeEventListener(eventName, eventListener);
  }, [eventName, element]);
}

数据获取Hooks

function useFetch<T>(url: string, options?: RequestInit) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const abortController = new AbortController();

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url, {
          ...options,
          signal: abortController.signal,
        });
        if (!response.ok) throw new Error(response.statusText);
        const json = await response.json();
        setData(json);
      } catch (err) {
        if (err instanceof Error && err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
    return () => abortController.abort();
  }, [url]);

  return { data, error, loading };
}

最佳实践

• 始终遵循Hooks规则
• 使用exhaustive-deps ESLint规则
• 传递给子组件的回调函数进行记忆化
• 尽可能返回稳定的引用
• 在useEffect中正确处理清理
• 使用refs存储不应触发重新渲染的值

目标流程

• react应用开发
• 自定义hooks库
• 状态管理设置
• 性能优化
• 前端测试