React 为什么要自定义 Hooks？

自定义 Hook（Custom Hook）在 React 中相当于：

✅ 一个可以复用的逻辑片段，封装了多个内置 Hooks 的组合和行为

1.类比理解

自定义 Hook 相当于	说明
🔁 可复用的逻辑函数	封装了 `useState` / `useEffect` / `useRef` 等逻辑，用来复用状态、事件、生命周期
🧩 逻辑组件（但没有 UI）	和组件很像，但它不返回 JSX，只处理逻辑
🧰 React 的逻辑工具函数	让你把组件逻辑分离出来，避免重复和臃肿

2. 为什么用自定义 Hook？

在实际开发中，组件里状态管理 + 副作用处理容易混乱和重复。自定义 Hook 可以让你：

分离逻辑：把复杂逻辑提取成独立的函数。
复用逻辑：多个组件共用同样的逻辑（如登录检测、滚动监听、节流防抖等）。
减少重复：避免 copy-paste 多段 useEffect/useState。

3. demo

React 组件中经常会出现很多状态（useState）和副作用（useEffect）

比如你一个页面组件：

c 复制代码

function UserPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUserData()
      .then(res => setUser(res))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, []);
  
  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p>出错了: {error.message}</p>}
      {user && <p>欢迎，{user.name}</p>}
    </div>
  );
}

问题一：代码堆积，逻辑不清晰

useState 很多，变量之间关联不直观。

useEffect 中网络请求逻辑、异常处理混在组件里，影响可读性。
问题二：多个组件中写了重复逻辑

假设你还有另一个组件也需要请求用户数据，就得复制那堆 useState + useEffect 逻辑
怎么解决？

💡 用自定义 Hook 把这些状态管理和副作用逻辑封装起来：

c 复制代码

function useUserData() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUserData()
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  return { user, loading, error };
}

在组件中调用

c 复制代码

function UserPage() {
  const { user, loading, error } = useUserData();
  ...
}

4. 总结

自定义 Hook 本质是	用途
`function useXXX() { ... }`	把多个 Hook 组合封装为复用逻辑
不返回 JSX，只返回数据或方法	用于组件中调用
让组件更干净、逻辑更清晰	提高可维护性、可读性