Hooks
Hooks 是 React 16.8 引入的一套 API，主要解决两个问题：
Hooks 的作用
函数组件也能有状态和生命周期
以前函数组件只能是无状态、无生命周期逻辑的“纯展示组件”。
Hooks 可以在函数组件里使用 useState、useEffect 等，实现状态管理和副作用处理。
复用状态逻辑变得更容易
以前状态逻辑复用只能用高阶组件（HOC）或者 Render Props，结构复杂、难以维护。
Hooks 可以抽离成 自定义 Hook，直接复用逻辑而不改变组件结构。
对比 Hooks 和工具函数
| 对比点 | Hooks | 工具函数 |
|---|---|---|
| 目的 | 管理状态、处理副作用、复用组件逻辑 | 纯计算或操作，不涉及组件状态 |
| 依赖 React 渲染 | 依赖 React 的渲染周期（useState/useEffect/fiber） | 独立调用，不受 React 生命周期影响 |
| 调用规则 | 只能在函数组件或自定义 Hook 顶层调用 | 可以在任何地方调用 |
| 返回值 | 通常返回状态、操作方法或对象 | 返回纯值或计算结果 |
| 副作用 | 可以管理副作用（网络请求、订阅、DOM 操作） | 一般不会管理副作用，纯函数 |
Hooks 的使用规则
只能在函数组件或自定义 Hook 顶层调用
不能在条件语句、循环、嵌套函数中调用。不能在普通函数或类组件中调用。
React 内部通过调用顺序在 fiber 上存储状态。条件、循环、早期 return 会破坏顺序，导致状态混乱。
避免在依赖数组中缺失依赖
useEffect/useMemo/useCallback 的依赖数组必须完整，否则可能访问旧的状态或函数。