React 为什么要自定义 Hooks？

历史相关文章2024年：
React 为什么引入 Hooks ？
React 中，Hook 是一个特定的概念

自定义 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）
比如你一个页面组件：

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 把这些状态管理和副作用逻辑封装起来：

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 };
}

在组件中调用

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

4. 总结

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