关于react.js:react源码解析3react源码架构

33次阅读

共计 6010 个字符，预计需要花费 16 分钟才能阅读完成。

react 源码解析 3.react 源码架构

视频课程（高效学习）：进入课程

课程目录：

1. 开篇介绍和面试题

2.react 的设计理念

3.react 源码架构

4. 源码目录构造和调试

5.jsx& 外围 api

6.legacy 和 concurrent 模式入口函数

7.Fiber 架构

8.render 阶段

9.diff 算法

10.commit 阶段

11. 生命周期

12. 状态更新流程

13.hooks 源码

14. 手写 hooks

15.scheduler&Lane

16.concurrent 模式

17.context

18 事件零碎

19. 手写迷你版 react

20. 总结 & 第一章的面试题解答

21.demo

这一章的目标是让咱们认识一下 react 源码架构和各个模块。

在真正的代码学习之前，咱们须要在大脑中有一个 react 源码的地图，晓得 react 渲染的大抵流程和框架，这样能力从上帝视角看 react 是怎么更新的，来吧少年。

react 的外围能够用 ui=fn(state)来示意，更具体能够用

const state = reconcile(update);
const UI = commit(state);

下面的 fn 能够分为如下一个局部：

  • Scheduler（调度器）：排序优先级，让优先级高的工作先进行 reconcile
  • Reconciler（协调器）：找出哪些节点产生了扭转，并打上不同的 Flags（旧版本 react 叫 Tag）
  • Renderer（渲染器）：将 Reconciler 中打好标签的节点渲染到视图上

一图胜千言：

jsx

jsx 是 js 语言的扩大，react 通过 babel 词法解析（具体怎么转换能够查阅 babel 相干插件），将 jsx 转换成 React.createElement，React.createElement 办法返回 virtual-dom 对象（内存中用来形容 dom 阶段的对象），所有 jsx 实质上就是 React.createElement 的语法糖，它能申明式的编写咱们想要组件呈现出什么样的 ui 成果。在第 5 章 jsx 咱们会具体介绍 jsx 解析之后的后果。

Fiber 双缓存

Fiber 对象下面保留了包含这个节点的属性、类型、dom 等，Fiber 通过 child、sibling、return（指向父节点）来造成 Fiber 树，还保留了更新状态时用于计算 state 的 updateQueue，updateQueue 是一种链表构造，下面可能存在多个未计算的 update，update 也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。

双缓存是指存在两颗 Fiber 树，current Fiber 树形容了以后出现的 dom 树，workInProgress Fiber 是正在更新的 Fiber 树，这两颗 Fiber 树都是在内存中运行的，在 workInProgress Fiber 构建实现之后会将它作为 current Fiber 利用到 dom 上

在 mount 时（首次渲染），会依据 jsx 对象（Class Component 或的 render 函数者 Function Component 的返回值），构建 Fiber 对象，造成 Fiber 树，而后这颗 Fiber 树会作为 current Fiber 利用到实在 dom 上，在 update（状态更新时如 setState）的时候，会依据状态变更后的 jsx 对象和 current Fiber 做比照造成新的 workInProgress Fiber，而后 workInProgress Fiber 切换成 current Fiber 利用到实在 dom 就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对 dom 好性能的操作。

​ 例如上面代码的 Fiber 双缓存构造如下，在第 7 章会具体解说

function App() {const [count, setCount] = useState(0);
  return (
       <>
      <h1
            onClick={() => {
          // debugger;
          setCount(() => count + 1);
        }}
        >
                     <p title={count}>{count}</p> xiaochen
      </h1>
    </>
  )
}

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

scheduler

Scheduler 的作用是调度工作，react15 没有 Scheduler 这部分，所以所有工作没有优先级，也不能中断，只能同步执行。

咱们晓得了要实现异步可中断的更新，须要浏览器指定一个工夫，如果没有工夫残余了就须要暂停工作，requestIdleCallback 貌似是个不错的抉择，然而它存在兼容和触发不稳固的起因，react17 中采纳 MessageChannel 来实现。

//ReactFiberWorkLoop.old.js
function workLoopConcurrent() {while (workInProgress !== null && !shouldYield()) {//shouldYield 判断是否暂停工作
    workInProgress = performUnitOfWork(workInProgress); 
  }
}

在 Scheduler 中的每的每个工作的优先级应用过期工夫示意的，如果一个工作的过期工夫离当初很近，阐明它马上就要过期了，优先级很高，如果过期工夫很长，那它的优先级就低，没有过期的工作寄存在 timerQueue 中，过期的工作寄存在 taskQueue 中，timerQueue 和 timerQueue 都是小顶堆，所以 peek 取出来的都是离当初工夫最近也就是优先级最高的那个工作，而后优先执行它。

Lane 模型

react 之前的版本用 expirationTime 属性代表优先级，该优先级和 IO 不能很好的搭配工作（io 的优先级高于 cpu 的优先级），当初有了更加细粒度的优先级示意办法 Lane，Lane 用二进制位示意优先级，二进制中的 1 示意地位，同一个二进制数能够有多个雷同优先级的位，这就能够示意‘批’的概念，而且二进制不便计算。

这好较量车较量，在较量开始的时候会调配一个赛道，较量开始之后大家都会抢内圈的赛道（react 中就是抢优先级高的 Lane），较量的序幕，最初一名赛车如果落后了很多，它也会跑到内圈的赛道，最初达到目的地（对应 react 中就是饥饿问题，低优先级的工作如果被高优先级的工作始终打断，到了它的过期工夫，它也会变成高优先级）

Lane 的二进制位如下，1 的 bits 越多，优先级越低

//ReactFiberLane.js
export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;

export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;

export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000;

const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000;

export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000;

const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;

const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;

export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000;

export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;

const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;

export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000;

export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;

reconciler（render phase）

Reconciler 产生在 render 阶段，render 阶段会别离为节点执行 beginWork 和 completeWork（前面会讲），或者计算 state，比照节点的差别，为节点赋值相应的 effectFlags（对应 dom 节点的增删改）

协调器是在 render 阶段工作的，简略一句话概括就是 Reconciler 会创立或者更新 Fiber 节点。在 mount 的时候会依据 jsx 生成 Fiber 对象，在 update 的时候会依据最新的 state 造成的 jsx 对象和 current Fiber 树比照构建 workInProgress Fiber 树，这个比照的过程就是 diff 算法。

diff 算法产生在 render 阶段的 reconcileChildFibers 函数中，diff 算法分为单节点的 diff 和多节点的 diff（例如一个节点中蕴含多个子节点就属于多节点的 diff），单节点会依据节点的 key 和 type，props 等来判断节点是复用还是间接新创建节点，多节点 diff 会波及节点的增删和节点地位的变动，具体见第 9 章。

reconcile 时会在这些 Fiber 上打上 Flags 标签，在 commit 阶段把这些标签利用到实在 dom 上，这些标签代表节点的增删改，如

//ReactFiberFlags.js
export const Placement = /*             */ 0b0000000000010;
export const Update = /*                */ 0b0000000000100;
export const PlacementAndUpdate = /*    */ 0b0000000000110;
export const Deletion = /*              */ 0b0000000001000;

render 阶段遍历 Fiber 树相似 dfs 的过程，‘捕捉’阶段产生在 beginWork 函数中，该函数做的次要工作是创立 Fiber 节点，计算 state 和 diff 算法，‘冒泡’阶段产生在 completeWork 中，该函数次要是做一些收尾工作，例如解决节点的 props、和造成一条 effectList 的链表，该链表是被标记了更新的节点造成的链表

深度优先遍历过程如下，图中的数字是程序，return 指向父节点，第 9 章具体解说

function App() {
  return (
       <>
      <h1>
        <p>count</p> xiaochen
      </h1>
    </>
  )
}

看如下代码

function App() {const [count, setCount] = useState(0);
  return (
        <>
      <h1
        onClick={() => {setCount(() => count + 1);
        }}
      >
        <p title={count}>{count}</p> xiaochen
      </h1>
    </>
  )
}

如果 p 和 h1 节点更新了则 effectList 如下，从 rootFiber->h1->p,，顺便说下 fiberRoot 是整个我的项目的根节点，只存在一个，rootFiber 是利用的根节点，可能存在多个，例如多个 ReactDOM.render(<App />, document.getElementById("root")); 创立多个利用节点

renderer（commit phase）

Renderer 产生在 commit 阶段，commit 阶段遍历 effectList 执行对应的 dom 操作或局部生命周期。

Renderer 是在 commit 阶段工作的，commit 阶段会遍历 render 阶段造成的 effectList，并执行实在 dom 节点的操作和一些生命周期，不同平台对应的 Renderer 不同，例如浏览器对应的就是 react-dom。

commit 阶段产生在 commitRoot 函数中，该函数次要遍历 effectList，别离用三个函数来解决 effectList 上的节点，这三个函数是 commitBeforeMutationEffects、commitMutationEffects、commitLayoutEffects，他们次要做的事件如下，前面会具体解说，当初在大脑里有一个构造就行

concurrent

它是一类性能的合集（如 fiber、schduler、lane、suspense），其目标是为了进步利用的响应速度，使利用 cpu 密集型的更新不在那么卡顿，其外围是实现了一套异步可中断、带优先级的更新。

咱们晓得个别浏览器的 fps 是 60Hz，也就是每 16.6ms 会刷新一次，而 js 执行线程和 GUI 也就是浏览器的绘制是互斥的，因为 js 能够操作 dom，影响最初出现的后果，所以如果 js 执行的工夫过长，会导致浏览器没工夫绘制 dom，造成卡顿。react17 会在每一帧调配一个工夫（工夫片）给 js 执行，如果在这个工夫内 js 还没执行完，那就要暂停它的执行，等下一帧继续执行，把执行权交回给浏览器去绘制。

比照下开启和未开启 concurrent mode 的区别，开启之后，构建 Fiber 的工作的执行不会始终处于阻塞状态，而是分成了一个个的 task

未开启 concurrent

开启 concurrent

正文完
react.js
发表至： react.js
2021-06-02
 0
关于react.js:一道-React-面试题在浏览器组件和元素中都渲染了些什么
关于react.js:react-基础知识
关于react.js:react进阶用法完全指南
关于react.js:React10React-Context技术2