一座前端文明的地层：React 源码考古报告

你有没有想过：为什么 React 19 还能完美运行 React 15 的代码？

为什么 useState 看起来那么简单，源码里却绕了三层？

打开 React 本体仓库，我发现它不是一份代码，而是一座 文明遗址。

发掘现场

本次考古的发掘地点为当前项目。这不是普通应用，而是一座 React 本体仓库：

packages/react、react-dom、react-reconciler、scheduler、react-server 与 compiler 共同构成遗址群。

考古对象不是某个页面如何渲染，而是一个前端文明如何把 "组件" 扩展成调度、服务端流、并发渲染与编译体系。

🏺 第一件出土物：混合时代的 API 铭文

发掘位置 ：packages/react/src/ReactClient.js

php 复制代码

Component,
PureComponent,
useState,
useTransition,
use,
ViewTransition,
ReactCompilerRuntime as __COMPILER_RUNTIME,

这块石碑很像一块混合时代的石碑：

Component / PureComponent ------ React 早期阶层，class 组件时代的制度痕迹
useState ------ 2019 年 Hooks 革命
use / ViewTransition / __COMPILER_RUNTIME ------ React 19 以后更现代的基础设施

现代框架常追求"破旧立新"，但 React 的源码显示出另一种历史策略：不彻底拆毁旧城，而是在旧城边修新城区。

🏺 第二件出土物：useState 背后的行政系统

发掘位置 ：packages/react/src/ReactHooks.js

ini 复制代码

const dispatcher = ReactSharedInternals.H;
return dispatcher.useState(initialState);

表面上，你写的是 useState(0)；实际上，它依赖当前渲染期注入的 dispatcher。

Hook 不是孤立函数，而是进入某种仪式现场后才有效的符号。

历史学视角下，这像古代法令：文本很短，权力却来自背后的行政系统。

React 把"状态"从 class 实例迁移到 Fiber 当前执行上下文中，完成了从对象生命周期到渲染时序治理的转变。

🏺 第三件出土物：Fiber Lane 的道路系统

发掘位置 ：packages/react-reconciler/src/ReactFiberLane.js

复制代码

SyncLane
TransitionLanes
IdleLane
OffscreenLane

这些 lane 不是普通常量，而是 React 并发时代的道路、关卡与优先级。

早期 React：更像一次性重建 UI 树
Fiber 之后：渲染被拆成可暂停、可恢复、可插队的工作

现代对比中，Vue、Svelte 等框架多从响应式依赖追踪入手，而 React 选择建设一个调度国家 ：更新不是只问"谁变了"，还要问 "现在该不该处理"。

🏺 第四处遗迹：一座被封存的旧城门

发掘位置 ：packages/react-dom/src/client/ReactDOMRootFB.js

erlang 复制代码

ReactDOM.render was removed in React 19.
Use createRoot instead.

这句话极具考古价值。

ReactDOM.render 曾是入城大门
React 18 开始，createRoot 成为并发渲染的入口
到 React 19，旧门被封存

这里能看到一次制度迁徙：从"把组件渲染到 DOM 节点"变成"创建一个具备调度能力的根"。

现代 React 的 root 不只是容器，它是并发、错误处理、水合与过渡机制的行政中心。

🏺 第五件出土物：服务器时代的水渠工程

发掘位置 ：packages/react-dom/src/server/ReactDOMFizzServerNode.js

scss 复制代码

const request = createRequestImpl(children, options);
startWork(request);
pipe(destination)

React 不再只在浏览器里建造界面，而是在服务器上分段生产 HTML，通过 stream 输送到客户端。

时代	方案
早期	`renderToString`（一次性吐出完整字符串）
现代	`renderToPipeableStream`（分批供水）

先让 shell 到达，再让 Suspense 后续内容补齐。这和现代 Web 的目标一致：更快首屏、更细粒度水合、更接近全栈框架的运行模型。

🏺 第六件出土物：编译器时代的自动化学院

发掘位置 ：compiler/docs/DESIGN_GOALS.md

React Compiler 的目标是：让应用默认更快，减少手写 React.memo()、useMemo()、useCallback() 的需要。

这里出现了文明晚期的新阶层：编译器。

过去：性能优化依赖开发者经验
现在：React 试图把一部分经验制度化，让编译器识别纯渲染、响应式作用域与安全变换

总结：React 的权力迁移史

把六件文物串起来，你会看到一条清晰的演进脉络：

时代	权力中心
Class 时代	组件贵族
Hooks 时代	函数公民
Fiber 时代	调度官僚
SSR / RSC 时代	服务器水利
Compiler 时代	自动化学院

这座仓库不是单一年代的建筑，而是多层地层。

React 的演化不是技术点的堆叠，而是权力中心的持续迁移：

从组件自身 → 迁到渲染器

从 DOM → 迁到 root

从手写优化 → 迁到编译系统

它的现代性，恰恰体现在：旧物仍可辨认，而新秩序已经接管运行。

💬 写在最后

你还在 React 源码里发现过哪些 "旧城遗迹" ？

或者你对编译器时代的 React 有什么期待？

欢迎在评论区一起考古 🔽