React 面经
核心考点
1. Hooks 原理
- useState：基于链表结构存储状态，每次渲染按调用顺序取值，不能在条件/循环中使用
- useEffect：在 commit 阶段后异步执行；依赖数组为空时只在 mount 时执行；返回清理函数在下次 effect 执行前或 unmount 时调用
- useCallback / useMemo：依赖不变时跳过重新计算；useCallback 缓存函数引用，useMemo 缓存计算结果
- useRef：返回 mutable 对象，不触发重新渲染；常用于存访问 DOM 或保存跨渲染的值
2. Fiber 架构
- React 16 引入，将渲染拆成可中断的「工作单元」
- 两个阶段：Reconcile（可中断，生成 effect list）→ Commit（同步，不可中断，操作 DOM）
- 支持时间分片（Time Slicing）和并发特性（Concurrent Mode）
3. Virtual DOM & Diff 算法
- Diff 策略：同层对比 + key 复用
- key 相同类型相同 → 复用节点；key 不同 → 销毁重建
- 为什么不直接操作 DOM？批量更新 + 跨平台抽象
4. 状态管理对比
| 库 | 特点 |
|---|---|
| Redux | 单向数据流，中间件丰富，适合大型项目 |
| Zustand | 轻量，基于 hooks，无样板代码 |
| Jotai | 原子化状态，按需订阅，细粒度更新 |
| Recoil | Facebook 出品，selector 依赖图 |
5. 性能优化
React.memo包裹组件，跳过 props 未变化的渲染useMemo/useCallback缓存昂贵计算和回调- 列表渲染加稳定
key，避免不必要的重建 - 懒加载：
React.lazy+Suspense - 使用
useTransition标记非紧急更新
6. 高频面试题
- 合成事件 vs 原生事件：React 对原生事件封装，统一冒泡到 root 上处理
- 批量更新：React 18 默认开启 Automatic Batching，多次 setState 合并为一次渲染
- 为什么不能在循环中用 Hooks：Hooks 靠调用顺序与 fiber 节点一一对应
- 受控 vs 非受控组件：受控组件状态由 React 管理；非受控用 ref 读取 DOM 值
💡 建议结合源码阅读 React 官方文档 react.dev 加深理解