前端面试准备 04：React 核心——渲染、更新、Hooks 心智模型、并发与 SSR（面试表达模板）

React 面试最怕“讲不清自己写的东西”。这一篇给你一套表达框架。

01 两句话讲清 React#

• 渲染（render）：根据 state/props 计算 UI（纯计算，尽量无副作用）
• 更新（commit）：把变化应用到宿主环境（DOM），并执行副作用（effects）

如果你能围绕这两句话解释 hooks、性能与并发，大多数追问都能接住。

02 Hooks 心智模型：闭包陷阱为什么会发生#

必会点：

• 组件函数每次渲染都会重新执行
• effect 的回调捕获的是当次渲染的变量（闭包）
• 依赖数组是“告诉 React 何时重新订阅/重新执行副作用”

高频追问：

• 为什么不能在条件语句里调用 hooks？
• useMemo/useCallback 什么时候是负收益？
• 如何避免 stale closure？（依赖、ref、函数式 setState）

03 性能：先定位，再优化（别上来就 memo）#

面试表达建议：

• 先说“如何定位”：React DevTools Profiler
• 再说“如何优化”：拆分组件、稳定 props、列表虚拟化、避免不必要的 state 上提

04 并发与 Suspense：你不需要背实现，但要会讲取舍#

你要能说清：

• 并发渲染让 React 可以中断/恢复渲染（更好的响应）
• Suspense 是“声明式的加载边界”

05 SSR/Streaming：从“SEO”升级到“性能/体验”#

你要能讲清：

• SSR 的收益：更快首屏内容到达、SEO、分享预览
• SSR 的成本：服务端负载、缓存复杂度、同构边界（浏览器 API）
• Streaming 的意义：更早把可用内容送到客户端

06 自测清单#

• 我能解释一次“组件为什么重渲染”并给出定位方法吗？
• 我能讲清一个 effect 依赖问题的根因与修复吗？
• 我能描述 SSR 的收益与代价，并给出适用场景吗？

07 练习题（笔试 + 示例代码 + 原理）#

题 1（问答）：为什么说“React 渲染是计算 UI，副作用属于 effect”？#

参考答案（原理）#

• 渲染阶段可能被打断/重做（尤其在并发模式下）
• 如果在渲染阶段做副作用（订阅、请求、改 DOM），会导致重复执行、状态错乱
• effect 运行在 commit 之后，React 能保证 DOM 已经更新，并且能在依赖变化/卸载时清理

题 2（输出题）：stale closure#

function Demo() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      console.log(count);
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <div>{count}</div>;
}

这段代码有什么问题？如何修复？为什么？

参考答案（原理）#

• effect 依赖数组为空，回调捕获的是初始渲染的 count=0
• 定时器里永远读到 0，并且 setCount(count + 1) 永远设置为 1

修复方式 1：使用函数式更新（不依赖闭包里的 count）：

setCount((c) => c + 1);

修复方式 2：把 count 放进依赖数组（会导致 interval 重建，通常不如函数式更新合适）。

题 3（编码题）：实现一个 useLatest#

目标：解决闭包读旧值的问题。

export function useLatest<T>(value: T) {
  // TODO
}

参考答案（原理 + 代码）#

原理：ref 在组件生命周期内稳定，更新 ref 不会触发渲染，适合承载“最新值供回调读取”。

import { useRef } from 'react';

export function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;
  return ref;
}

下一篇进入工程化：构建、依赖、质量体系与发布流程，是 8 年工程师最能拉开差距的部分。