原理与前沿：为什么这样设计，又往哪走

5.1架构：Reconciler 与 Renderer 分离

前四章讲的全部——重跑组件、协调、状态、effect——发生在 React 的协调层（Reconciler）。它和把结果落到具体平台的渲染层（Renderer）是分开的：同一套协调逻辑，react-dom 落到浏览器 DOM，react-native 落到原生视图。

5.2为什么用虚拟 DOM，而不是信号

React 选择“state 变就重跑整个组件、diff 虚拟树、最小提交”，换取一个显式、可预测的心智模型。

5.3为什么是 Hook，而不是 class

函数组件 + Hook 让逻辑按“关注点”聚合、可抽成自定义 Hook 复用，代价是接受第 4 章那条“调用顺序”规则。

5.4为什么坚持不可变

代价在第 3 章已经领教：更新嵌套结构要层层展开，啰嗦，于是有 Immer 这类库帮忙。收益是整套优化的地基——下一节的编译器，正是建立在“引用没变就一定没变”这个约定上。

5.5前沿一：React 19 与编译器（截至 2026-06）

React 19（2024-12 稳定）把异步与资源读取纳入核心；React Compiler 1.0（2025-10 GA）让“手动记忆化”基本退场。

React 19：少写样板

React 19 于 2024-12 稳定，几个改变心智的点：Actions 配合 useActionState / useFormStatus / useOptimistic，把表单提交的 pending、错误、乐观更新做成内建；use() 可在渲染中读取 Promise（配合 Suspense）或 Context；ref 成了普通 prop，forwardRef 不再需要。

// React 18 及以前：转发 ref 必须包一层 forwardRef
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

// React 19：ref 就是一个普通 prop（forwardRef 已弃用）
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

React Compiler：手动记忆化退场

React Compiler 1.0 于 2025-10 GA。它在编译期分析组件，自动插入等价于 useMemo / useCallback / React.memo 的缓存，跳过未变部分的重渲染——甚至能在 early-return 之后做记忆化，超出手写能力。结果：新代码基本不再手写这三个 API，它们留作逃生舱。

// 手动记忆化时代：到处包 useMemo / useCallback
const filtered = useMemo(() => items.filter(fn), [items]);
const onClick   = useCallback(() => doThing(id), [id]);

// React Compiler（2025-10 GA）：写朴素代码，编译器自动插入等价缓存
const filtered = items.filter(fn);
const onClick   = () => doThing(id);

5.6前沿二：Server Components（截至 2026-06）

组件默认在服务端运行（可直读数据、不进浏览器 bundle）；用 "use client" 标记需要交互的组件，它们才下发到浏览器。

// 默认在服务端运行：可直接读数据，不进浏览器 bundle
async function ProductPage({ id }) {
  const product = await db.products.get(id);   // 服务端直读
  return <ProductView product={product} />;
}

// 需要交互的组件：用 "use client" 标记，下发到浏览器
"use client";
function AddToCart({ id }) {
  const [count, setCount] = useState(1);       // state 只能在客户端
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

5.7跨概念综合：把取舍用起来

一个具体抉择，串起本章与前四章：一个“商品详情 + 加入购物车”的页面，该怎么切分？商品信息的读取与展示——纯函数、无 state（§1.2）——放服务端组件，省下 bundle 与一次客户端请求（§5.6）；“加入购物车”的按钮带 count state 与点击事件（§3、§1.4），必须 "use client"。是否要手动 memo 购物车列表？在开了 React Compiler 的项目里不必（§5.5），但你仍要能判断“这次重渲染是否真的多余”——而这个判断，靠的正是第 2 章的 render/commit 区分。新工具没有让旧心智过时，是让它更省力。