1. Hooks 是什么？
Hooks 是 React 16.8 引入的函数式组件特性，允许在不编写 class 的情况下使用 state 和其他 React 特性（如生命周期、副作用等）。本质是一类特殊函数，它们挂载到 React 的调度系统中，在组件渲染时被调用，以“钩入”React 的核心功能。
2. Hooks 的底层原理
- 链表结构：Hooks 通过单向链表记录状态。每次组件渲染时，React 会按顺序遍历链表，读取或更新对应的状态。
- 调用顺序规则：Hooks 必须保证每次渲染的调用顺序一致（不能嵌套在条件/循环中），因为 React 依赖调用顺序来关联状态。
- 闭包与作用域：Hooks 利用闭包保存当前组件的上下文（如
useState的 state 值）。
3. 常用 Hooks 及用途
| Hook 名称 | 作用描述 | 示例场景 |
|---|---|---|
useState |
管理组件内部状态 | 计数器、表单输入 |
useEffect |
处理副作用（数据获取、DOM 操作等） | API 请求、事件监听、定时器 |
useContext |
跨组件层级共享数据（替代部分 Redux 场景） | 主题切换、用户身份传递 |
useReducer |
复杂状态逻辑管理（类似 Redux 的 reducer） | 多状态联动、表单校验 |
useCallback |
缓存函数，避免子组件不必要的重渲染 | 性能优化（配合 React.memo） |
useMemo |
缓存计算结果，避免重复计算 | 复杂计算、过滤列表数据 |
useRef |
获取 DOM 引用或保存可变值（不触发渲染） | 聚焦输入框、保存定时器 ID |
useLayoutEffect |
类似 useEffect，但同步执行（在 DOM 更新后、浏览器绘制前） |
测量 DOM 尺寸后同步更新 |
4. Hooks 的核心用途
- 逻辑复用：通过自定义 Hook（如
useFetch）封装可复用的逻辑，避免高阶组件（HOC）的嵌套问题。 - 简化组件：函数组件 + Hooks 替代 class 组件，代码更简洁（无需
this、生命周期方法）。 - 关注点分离：将相关逻辑聚合到独立的 Hook 中（如数据获取与状态管理分离）。
5. Hooks 的本质
Hooks 是 React 提供的一组 API，它们：
- 不是魔法：底层基于 JavaScript 的闭包和链表实现。
- 与 Fiber 架构协同：React 的 Fiber 调度机制跟踪 Hooks 的调用顺序和状态。
- 约束性设计：通过规则（如“只在顶层调用”）保证状态的一致性。
示例代码：自定义 Hook
// 自定义 Hook：监听窗口大小
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;
}
// 使用
function MyComponent() {
const { width } = useWindowSize();
return <div>Window width: {width}px</div>;
}注意事项
- 条件调用禁止：Hooks 必须在组件顶层调用，不可动态增减。
- 性能优化：合理使用
useMemo/useCallback避免过度渲染。 - 闭包陷阱：
useEffect的依赖数组需正确处理（如使用useRef解决过期闭包）。
Hooks 的设计使 React 函数组件具备了完整能力，同时推动了前端开发向函数式编程风格的演进。