第二章：React Hooks

自定义 Hooks

什么是自定义 Hooks？

自定义 Hooks 是 React 提供的一种机制，允许开发者将组件逻辑提取到可重用的函数中。通过自定义 Hooks，可以将状态逻辑、副作用（如数据获取）或其他 React 特性封装成独立的函数，从而在多个组件之间共享逻辑，避免代码重复。

自定义 Hooks 的基本规则

  1. 命名必须以 use 开头：React 通过命名约定识别 Hooks，确保其符合 Hooks 的规则（如只能在函数组件或自定义 Hooks 中调用）。
  2. 可以调用其他 Hooks：自定义 Hooks 内部可以调用 useState、useEffect 等内置 Hooks。
  3. 独立的状态：每次调用自定义 Hook 都会创建独立的状态，不会与其他组件共享。

如何编写自定义 Hooks？

以下是一个简单的自定义 Hook 示例，用于跟踪窗口大小：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

使用自定义 Hooks

在组件中使用自定义 Hook 就像调用普通函数一样：

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      Window width: {width}, height: {height}
    </div>
  );
}

常见自定义 Hooks 场景

  1. 数据获取：封装 fetch 逻辑，避免重复代码。
  2. 表单处理：管理表单状态和验证逻辑。
  3. 定时器或订阅：统一管理副作用清理。
  4. 浏览器 API 交互：如 useLocalStorage、useGeolocation 等。

自定义 Hooks 的优势

  • 逻辑复用：减少重复代码，提高可维护性。
  • 关注点分离：将复杂逻辑从组件中抽离，使组件更简洁。
  • 易于测试：自定义 Hooks 可以单独测试，无需依赖组件。

注意事项

  • 避免过度抽象：仅在逻辑确实需要复用时才提取为自定义 Hook。
  • 遵循 React Hooks 规则：确保只在顶层调用 Hooks，不要在循环或条件语句中使用。

总结

自定义 Hooks 是 React 生态中强大的工具，能够显著提升代码的可维护性和复用性。通过合理封装逻辑，开发者可以构建更清晰、更高效的 React 应用。


（注：以上内容为 Markdown 格式，可直接用于书籍章节编写。）
Last Updated::