React 源码解读流程:从入口到渲染的全链路揭秘

React 是目前前端最流行的框架之一,但很多开发者只会停留在使用层面,对于 React 内部是如何运作的缺乏深入理解。本文将带你从源码角度出发,梳理 React 的运行流程,帮助你建立整体认知。


一、源码结构概览

在深入分析之前,我们需要知道 React 源码大致分为以下几个部分:

  • react :核心 API(useStateuseEffect 等 hooks,以及 createElement 等方法)。
  • react-dom:负责 DOM 渲染相关逻辑,包括调和(reconciliation)、Fiber 架构实现等。
  • scheduler:调度优先级,决定任务的执行顺序。
  • shared:共享工具方法和常量。

了解目录结构有助于我们在阅读源码时快速定位。


二、React 启动流程

当我们在应用里写下:

javascript 复制代码
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

那么内部会经历怎样的流程呢?

1. ReactDOM.render

  • 入口位于 react-dom 包。
  • 会调用 legacyRenderSubtreeIntoContainerrenderSubtreeIntoContainer → 最终进入 createRoot (React 18 以后则推荐使用 createRoot API)。

2. 创建 FiberRoot

  • React 会为整个应用创建一个 FiberRoot,它是 Fiber 架构的根节点。
  • 每个组件会对应一个 FiberNode

3. 开始初次渲染

  • 初次渲染走 同步模式,即直接构建 Fiber 树并渲染到 DOM。
  • 过程中会执行组件函数,调用 Hooks,得到虚拟 DOM。

三、Fiber 架构与调和流程

1. Fiber 的作用

  • 链表结构:每个 FiberNode 保存对父节点、子节点、兄弟节点的引用。
  • 可中断渲染:React 将渲染拆解为任务片段,可以被打断和恢复。

2. Reconciliation(调和)

  • 对比新旧 Fiber 树,找出需要更新的节点(Diff 算法)。
  • 生成 effect list(副作用链表),记录需要对 DOM 做的操作。

3. Commit 阶段

分为三个小步骤:

  • before mutation :在 DOM 变更前执行(比如 getSnapshotBeforeUpdate)。
  • mutation:执行 DOM 更新。
  • layout :调用 componentDidMountuseLayoutEffect 等。

四、Hooks 的执行原理

useState 为例:

  1. 初次渲染时,React 会在 FiberNode 上建立一个 hook 链表,每个 hook 保存状态。
  2. useState(initialState) 会返回一个 [state, dispatch]
  3. 当调用 dispatch 时,会创建一个 update 对象,放入更新队列。
  4. 下次渲染时,从队列里取出最新状态,计算后替换。

这也是为什么 hook 必须写在函数组件最外层,不能在 if/else 里写 ------ React 需要保证 hook 顺序一致。


五、Scheduler 调度

React 并不是所有任务都立即执行,而是根据优先级:

  • Immediate:立即执行(比如用户输入)。
  • User-blocking:高优先级(比如按钮点击)。
  • Normal:普通渲染任务。
  • Low / Idle:低优先级任务。

Scheduler 通过 requestIdleCallbackMessageChannel 等机制实现任务切片,让渲染更流畅。


六、整体流程图

php 复制代码
ReactDOM.render
   ↓
创建 FiberRoot → 创建 Fiber 树
   ↓
Render 阶段(调和:Diff 算法,构建 Fiber 树)
   ↓
Commit 阶段(DOM 更新,调用生命周期/Effect)
   ↓
Scheduler 负责调度优先级

七、总结

React 源码解读的核心在于三个关键点:

  1. Fiber 架构:链表化数据结构,支持可中断渲染。
  2. 调和 & 提交:Diff 算法找出变化,commit 阶段更新 DOM。
  3. Scheduler 调度:任务分片与优先级控制,提升流畅度。

如果你想深入研究 React 源码,可以从 react-reconcilerscheduler 两个包入手,配合调试工具一步步跟踪调用链路。

相关推荐
IT_陈寒14 分钟前
5种JavaScript性能优化技巧:从V8引擎原理到实战提速200%
前端·人工智能·后端
蒋星熠14 分钟前
Maven项目管理与构建自动化完全指南
java·前端·python·自动化·maven
sweethhheart28 分钟前
【typora激活使用】mac操作方式
前端·数据库·macos
itslife43 分钟前
vite 源码 - 创建服务
前端·javascript
跟着珅聪学java1 小时前
vue通过spring boot 下载文件教程
前端·spring boot·后端
tt5555555555552 小时前
嵌入式开发面试八股文详解教程
linux·c++·驱动开发·面试
码侯烧酒2 小时前
前端IM应用开发中的难点解析与总结
前端·websocket
程序新视界2 小时前
面试中,如何筛选合格的人才?
面试·程序员
聪明的笨猪猪3 小时前
Java “线程池(1)”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
非专业程序员3 小时前
逆向分析CoreText中的字体级联/Font Fallback机制
前端·ios