React 中如何使用自定义Hook封装可复用逻辑

在日常的开发中，我们总会碰到这样的场景，有一些接口数据总是会在不同的地方重复用到，如标签的，组织架构的等等，这时候，如果我们可以在这里写一些可供复用的函数，那么将会大大提高开发的效率。

在 React 中，自定义 Hook 是封装可复用逻辑的核心工具，它允许开发者将组件逻辑抽象为独立函数，并在多个组件中共享。以下是关于 React 自定义 Hook 的详细指南：

一、自定义 Hook 的核心概念

定义与命名规范

自定义 Hook 是以 use 开头的普通 JavaScript 函数，内部可调用其他 React Hook（如 useState、useEffect）。例如：useFetch、useToggle。
核心作用

• 逻辑复用：避免重复代码（如数据获取、表单验证）。

• 状态隔离：每个 Hook 实例独立管理状态。

• 解耦复杂逻辑：将副作用、状态更新等从组件中分离。

二、创建自定义 Hook 的步骤

基础结构

javascript 复制代码

import { useState, useEffect } from 'react';

function useCustomHook(params) {
  // 使用内置 Hook 管理状态或副作用
  const [state, setState] = useState(initialValue);

  // 返回需要暴露给组件的值或方法
  return { state, method };
}

示例：数据获取 Hook

javascript 复制代码

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

使用场景：在组件中直接调用 const { data } = useFetch('api/data')。

三、使用自定义 Hook 的流程

导入 Hook

javascript 复制代码

import useCounter from './hooks/useCounter';

调用并解构返回值

javascript 复制代码

function Counter() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>Count: {count}</button>;
}

典型应用案例

• 窗口尺寸监听：useWindowSize 返回实时宽高。

• 本地存储同步：useLocalStorage 自动保存数据到 localStorage。

• 表单状态管理：useForm 处理输入值和验证。

四、最佳实践与注意事项

单一职责原则

每个 Hook 应聚焦单一功能（如仅处理数据获取或仅管理表单状态）。
依赖数组优化

在 useEffect 中明确依赖项，避免不必要的渲染或内存泄漏：
javascript 复制代码
```
useEffect(() => {
  // 仅在 url 变化时重新获取数据
}, [url]);
```
错误处理与边界

在自定义 Hook 中捕获异常，并通过返回值暴露错误状态（如 error 字段）。
文档与类型支持

• 为 Hook 添加 JSDoc 注释，说明参数和返回值。

• 使用 TypeScript 增强类型安全（如定义输入/输出接口）。

五、高级场景与生态工具

与现有库集成

• React Query：结合 useQuery 实现数据缓存和自动更新。

• React Router：使用 useNavigate 管理路由跳转。
性能优化

• 使用 useCallback 缓存回调函数。

• 通过 useMemo 避免重复计算。

六、完整示例：自定义 Hook 实现防抖功能

javascript 复制代码

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// 在组件中使用
function SearchBox() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    // 延迟 500ms 后触发搜索
    fetchResults(debouncedQuery);
  }, [debouncedQuery]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

通过合理使用自定义 Hook，开发者可以显著提升代码的可维护性和复用性。建议结合具体业务场景设计 Hook，并参考 React 官方文档及社区最佳实践。