State与生命周期管理
State 更新与生命周期是 React 面试的核心考点。你需要掌握 setState 的同步/异步、useState 的闭包陷阱、类组件生命周期与 Hooks 映射。以下框架帮你快速拆解面试题。
面试问答卡片
▎问题1：setState 是同步还是异步？为什么有时打印旧值？
考察点：是否理解 React 的批量更新机制、合成事件与原生事件的区别。
回答框架：
- 先说结论：在 React 合成事件和生命周期中异步（批量）；在 setTimeout、原生事件中同步。
- 解释原因：React 通过事务机制收集更新，在回调结束后一次性批量渲染。
- 给代码示例说明。
简短示例回答：
“setState 在合成事件和钩子内是异步的，因为 React 会合并多次更新提升性能。但在 setTimeout 或原生事件中，因为脱离 React 上下文，会立即同步更新。打印旧值是因为组件还没重新渲染，可以通过回调或 useEffect 拿到最新值。”
可能追问：React 18 的自动批量更新如何处理？如何强制同步更新？
避坑提醒：不要依赖 setState 后的立即取值；优先使用 useEffect 或 setState 回调。
▎问题2：useState 是如何保证状态独立且可追踪的？
考察点：Hooks 实现原理、Fiber 架构中的链表结构、闭包陷阱。
回答框架：
- 基于 Fiber 节点上的 memoizedState 链表存储。
- 每次渲染按顺序读取 Hook 队列，调用 useState 返回当前值。
- 更新状态使用 dispatchAction 推入更新队列，触发重新渲染。
简短示例回答：
“useState 内部在 Fiber 节点上维护一个单向链表，每个 Hook 节点存储 state 和 dispatch。组件渲染时按顺序取出对应 state，更新时 dispatch 把新值放入队列，标记组件需要重新执行。这也是为什么不能在条件语句中使用 Hooks——会破坏链表顺序。”
可能追问：useState 和 useReducer 本质区别？为什么 Hooks 不能写在循环/条件里？
避坑提醒：避免在回调中直接使用旧 state 导致闭包过期；用函数式更新 setState(prev => prev + 1)。
▎问题3：类组件的生命周期在函数组件中如何映射？
考察点：生命周期理解、useEffect 第二参数、清理函数作用。
回答框架：
- 挂载阶段：useEffect(fn, []) 模拟 componentDidMount。
- 更新阶段：useEffect(fn, [dep]) 模拟 componentDidUpdate（依赖变化）。
- 卸载阶段：useEffect 返回的清理函数模拟 componentWillUnmount。
- 注意：useEffect 在每次渲染后执行，与类组件生命周期时机不同。
简短示例回答：
“函数组件用 useEffect 完成生命周期 side effect：空依赖数组对应挂载/卸载；带依赖的数组对应更新；return 清理函数对应 componentWillUnmount。但注意 useEffect 执行在渲染之后，而 componentDidMount 在浏览器绘制之前。若要同步操作，可以用 useLayoutEffect。”
可能追问：如何精确模拟 componentDidUpdate（忽略初始执行）？useLayoutEffect 与 useEffect 区别？
避坑提醒：避免 useEffect 遗漏依赖导致无限循环；清理函数需正确取消订阅/定时器。
项目案例：大型后台管理系统状态管理重构
项目名称：Admin-Dashboard 运营后台（中台业务）
业务背景：老项目使用类组件 + Redux，状态分散、更新逻辑冗余，导致页面卡顿和难以维护。
规模指标：模块 40+，页面 120+，日均 PV 80 万，状态节点 300+。
技术栈：React 18 + TypeScript + Hooks + Context + useReducer + React Query（数据请求）。
核心难点：状态层级深、跨组件通信多、渲染性能瓶颈。重构时需保证业务不停服。
面试高频追问：为什么不用 Redux 而选择 Context？如何处理 Context 导致的 Provider 层级嵌套？怎么监控渲染次数？
可迁移回答话术：“我们采用『领域驱动』原则按业务拆分 Context，每个 Context 管理独立状态域，配合 useMemo 阻止无意义渲染。对于高频更新（如表格筛选），使用 useReducer 保证不可变更新，并搭配 React.memo 和 useCallback 减少子组件更新。”