likes
comments
collection
share

梳理React架构: render阶段

作者站长头像
站长
· 阅读数 56

最近看了很多有关react底层原理的文章。梳理一下。如有问题,多谢指出。参考文章:卡颂:React技术揭秘全栈潇晨:react源码解析8.render阶段

JSX

首先从jsx说起,jsx经babel编译为React.createElement,在该函数中处理config中的参数,将参数挂到props上。对于children,把第二个参数之后的参数取出来,然后判断长度是否大于一。大于一的话就代表有多个 children,这时候 props.children 会是一个数组,否则的话只是一个对象。对于传入的defaultProps,如果此键存在于defaultProps且props上该键没有值,就对props里的该键赋值。返回ReactElement函数,最终返回虚拟DOM。

虚拟DOM

虚拟DOM是描述节点信息的一个对象,但是不包含优先级、state、以及commit时用到的更新标记等。这些信息都储存在fiber上。

从虚拟DOM到Fiber

得到的虚拟DOM作为参数传入到ReactDOM.render()中。render中调用返回legacyRenderSubtreeIntoContainer执行方法。该方法中主要做了:生成root(FiberRootNode),生成fiberNode(就是RootFiber吧)(mount),处理事件监听, 调用updateContainer方法(update)。并将root.current指向RootFiber,RootFiber.stateNode=root。梳理React架构: render阶段fiberRoot是react应用的根,使用current来指向当前页面上的fiber树。rootFiber是挂载的真实DOM的fiber(document.getElementById('root'))。同时,在createFiberRoot中还会初始化updateQueue。 传入fiber,初始化一个queue,挂到fiber.updateQueue上,最后返回root。梳理React架构: render阶段

Fiber架构

mount时,通过深度优先遍历虚拟DOM树构建链表结构的fiber树。通过child, return,sibling属性连接链表。此时的fiber树成为workInProgress Fiber树。构建时,会尝试复用current树中已有的fiber节点的属性。但是mount的时候只存在rootFiber 的current fiber。梳理React架构: render阶段构建完成后将current指向构建好的workInprogress fiber,此时变成current树。update时,就是以current fiber树为基础,构建workInprogress fiber,再改变指向。这种内存中构建并直接替换的技术就是双缓存,实现DOM对象的快速更新。

render阶段

负责构建fiber和生成effectList。由react的入口模式来决定是否调用shouldYield。

// performSyncWorkOnRoot会调用该方法
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

// performConcurrentWorkOnRoot会调用该方法  异步更新
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

performUnitOfWork中workInProgress fiber和会和已经创建的Fiber连接起来形成Fiber树。这个过程类似深度优先遍历(可中断),包含递和归两个部分。伪代码:

function performUnitOfWork(fiber) {
  if (fiber.child) {
    performUnitOfWork(fiber.child);//beginWork
  }
  
  if (fiber.sibling) {
    performUnitOfWork(fiber.sibling);//completeWork
  }
}

递阶段

从rootFiber开始,每个被遍历到的节点调用beginWork方法,该方法根据传入的fiber节点创建子fiber节点,并将这两个节点连接。当遍历到叶子节点时进入归阶段。

beginWork

创建或复用子fiber节点。使用current === null 来判断mount还是update:

  • mount: 根据fiber.tag构建不同的子fiber节点(reconcileChildren);
  • update:满足条件时,可以复用current fiber: oldProps === newProps && workInProgress.type === current.type 属性和fiber的type不变 !includesSomeLane(renderLanes, updateLanes) 更新的优先级是否足够reconcileChildren是协调阶段的核心部分,mount时创建新的子fiber节点;update时,进行diff比较,为生成的fiber节点带上effecTag属性,打标记。effectTag使用二进制表示,方便使用位操作为effectTag赋值多个effect。
// DOM需要插入到页面中
export const Placement = /*                */ 0b00000000000010;
// DOM需要更新
export const Update = /*                   */ 0b00000000000100;
// DOM需要插入到页面中并更新
export const PlacementAndUpdate = /*       */ 0b00000000000110;
// DOM需要删除
export const Deletion = /*                 */ 0b00000000001000;

注意: DOM插入满足的条件:

  1. fiber.stateNode!==null 即fiber存在真实dom,真实dom保存在stateNode上
  2. (fiber.effectTag & Placement) !== 0 fiber存在Placement的effectTag

归阶段

completeWork

主要是处理fiber的props,创建dom,创建effectList。mount时,主要包含三个:

  1. 为fiber节点生成对应的DOM节点
  2. 将子孙DOM节点插入刚生成的DOM节点中
  3. 处理propsupdate时,包含以下:
  4. 处理props(包括onClick、style、children ...)
  5. 将处理好的props赋值给updatePayload
  6. 被处理完的props会被赋值给workInProgress.updateQueue其中updatePayload为数组形式,他的偶数索引的值为变化的prop key,奇数索引的值为变化的prop value。

effectList

至此render阶段的绝大部分工作就完成了。还有一个问题:作为DOM操作的依据,commit阶段需要找到所有有effectTag的Fiber节点并依次执行effectTag对应操作。难道需要在commit阶段再遍历一次Fiber树寻找effectTag !== null的Fiber节点么?为了解决这个问题,在completeWork的上层函数completeUnitOfWork中,每个执行完completeWork且存在effectTag的Fiber节点会被保存在一条被称为effectList的单向链表中。effectList中第一个Fiber节点保存在fiber.firstEffect,最后一个元素保存在fiber.lastEffect。类似appendAllChildren,在“归”阶段,所有有effectTag的Fiber节点都会被追加在effectList中,最终形成一条以rootFiber.firstEffect为起点的单向链表。这样,在commit阶段只需要遍历effectList就能执行所有effect了。

render阶段全部工作完成。在performSyncWorkOnRoot函数中fiberRootNode被传递给commitRoot方法,开启commit阶段工作流程。

思考:

  1. mount时,fiber.stateNode === null,且不会为fiber节点赋值effectTag,那么首屏渲染是如何完成的?fiber.stateNode会在completeWork中创建。如果在mount时赋值effectTag,则可知整颗fiber树所有节点都会有Placement effectTag,则commit阶段执行DOM时每个节点都要进行一次插入,大量的DOM操作极其低效。所以,react在mount时,只有rootFiber会赋值Placement effectTag,在commit阶段只会执行一次插入操作。
  2. mount时只会在rootFiber存在Placement effectTag。那么commit阶段是如何通过一次插入DOM操作(对应一个Placement effectTag)将整棵DOM树插入页面的呢?原因就在于completeWork中的appendAllChildren方法。由于completeWork属于“归”阶段调用的函数,每次调用appendAllChildren时都会将已生成的子孙DOM节点插入当前生成的DOM节点下。那么当“归”到rootFiber时,我们已经有一个构建好的离屏DOM树。
转载自:https://segmentfault.com/a/1190000042265936
评论
请登录