【React】自定义 Hook 的场景与注意事项

在 React 开发中，自定义 Hook 是一种强大的工具，用于封装组件逻辑并实现逻辑复用。以下是关于自定义 Hook 的适用场景和注意事项的详细说明。

---

一、自定义 Hook 的适用场景

1. 逻辑复用

当多个组件中有相似的逻辑时，可以通过自定义 Hook 将这些逻辑抽离，避免重复代码。

示例：管理表单状态

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  return [values, handleChange];
}

// 使用自定义 Hook
function Form() {
  const [formValues, handleChange] = useForm({ username: '', password: '' });

  return (
    <form>
      <input name="username" value={formValues.username} onChange={handleChange} />
      <input name="password" value={formValues.password} onChange={handleChange} />
    </form>
  );
}

---

2. 状态管理

自定义 Hook 可以封装复杂的状态管理逻辑，例如计时器、分页、加载状态等。

示例：计时器 Hook

import { useState, useEffect } from 'react';

function useTimer(initialTime) {
  const [time, setTime] = useState(initialTime);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return time;
}

// 使用自定义 Hook
function Timer() {
  const time = useTimer(0);

  return <div>计时：{time} 秒</div>;
}

---

3. 数据获取

将数据获取逻辑封装到自定义 Hook 中，可以让组件更专注于渲染逻辑。

示例：封装数据请求

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 使用自定义 Hook
function UserList() {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <div>加载中...</div>;
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

4. 事件监听

自定义 Hook 可以封装事件监听逻辑，例如窗口大小变化、键盘事件等。

示例：窗口大小监听

import { useState, useEffect } from 'react';

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

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

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

  return size;
}

// 使用自定义 Hook
function WindowSize() {
  const { width, height } = useWindowSize();

  return (
    <div>
      窗口宽度：{width}px，高度：{height}px
    </div>
  );
}

---

5. 动画或复杂的交互逻辑

当涉及复杂的动画或交互逻辑时，可以通过自定义 Hook 将相关逻辑封装起来。

示例：动画 Hook

import { useState, useEffect } from 'react';

function useFadeIn(duration = 1000) {
  const [opacity, setOpacity] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setOpacity(1), duration);
    return () => clearTimeout(timeout);
  }, [duration]);

  return { opacity };
}

// 使用自定义 Hook
function FadeInText() {
  const style = useFadeIn(2000);

  return <div style={{ ...style, transition: 'opacity 2s' }}>Hello, World!</div>;
}

---

二、自定义 Hook 的注意事项

1. 命名规范

• 自定义 Hook 必须以 use 开头，例如 useForm、useFetch。
• 这是 React 的约定，React 会通过这个命名来判断是否是一个 Hook。

---

2. 遵循 Hook 的规则

自定义 Hook 内部同样需要遵循 React Hook 的规则：

1. 只能在顶层调用：不能在循环、条件或嵌套函数中调用 Hook。
2. 只能在函数组件或其他 Hook 中调用：不能在普通的 JavaScript 函数中调用 Hook。

---

3. 依赖项管理

• 如果自定义 Hook 内部使用了 useEffect，确保正确管理依赖项。
• 使用 ESLint 插件（eslint-plugin-react-hooks）检查依赖数组是否完整。

---

4. 返回值设计

• 自定义 Hook 的返回值可以是数组或对象，推荐使用对象以提高可读性。
• 如果返回多个值，建议使用解构赋值的方式。

---

5. 封装粒度

• 自定义 Hook 的封装粒度要适中，避免过度封装导致代码难以理解。
• 一个自定义 Hook 应该只关注一个特定的功能或逻辑。

---

6. 避免副作用泄漏

• 如果自定义 Hook 中有副作用（如事件监听、定时器等），一定要在 useEffect 的清理函数中移除这些副作用。

---

三、总结

自定义 Hook 是提升代码复用性和可维护性的利器，但需要合理设计和使用。以下是关键点总结：

1. 适用场景：逻辑复用、状态管理、数据获取、事件监听、动画等。
2. 命名规范：以 use 开头，符合 React 的约定。
3. 遵循规则：遵守 Hook 的调用规则，正确管理依赖项。
4. 设计合理：保持封装粒度适中，返回值清晰，避免副作用泄漏。

如果你有具体的需求或代码片段，可以提供，我可以帮你设计一个合适的自定义 Hook！