React渲染机制超详细讲解

目录
  • 准备工作
  • render阶段
    • workloopSync
    • beginWork
    • completeWork
    • commit阶段
    • commitWork
    • mutation之前
    • mutation
    • fiber树切换
    • layout
    • layout之后
  • 总结

准备工作

为了方便讲解,假设我们有下面这样一段代码:

function App(){
  const [count, setCount] = useState(0)
  useEffect(() => {
    setCount(1)
  }, [])
  const handleClick = () => setCount(count => count++)
  return (
    <div>
        勇敢牛牛,        <span>不怕困难</span>
        <span onClick={handleClick}>{count}</span>
    </div>
  )
}
ReactDom.render(<App />, document.querySelector('#root'))

在React项目中,这种jsx语法首先会被编译成:

React.createElement("App", null)
or
jsx("App", null)

这里不详说编译方法,感兴趣的可以参考:

babel在线编译

新的jsx转换

jsx语法转换后,会通过creatElementjsx的api转换为React element作为ReactDom.render()的第一个参数进行渲染。

在上一篇文章Fiber中,我们提到过一个React项目会有一个fiberRoot和一个或多个rootFiberfiberRoot是一个项目的根节点。我们在开始真正的渲染前会先基于rootDOM创建fiberRoot,且fiberRoot.current = rootFiber,这里的rootFiber就是currentfiber树的根节点。

if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    fiberRoot = root._internalRoot;
}

在创建好fiberRootrootFiber后,我们还不知道接下来要做什么,因为它们和我们的<App />函数组件没有一点关联。这时React开始创建update,并将ReactDom.render()的第一个参数,也就是基于<App />创建的React element赋给update

var update = {
    eventTime: eventTime,
    lane: lane,
    tag: UpdateState,
    payload: null,
    callback: element,
    next: null
  };

有了这个update,还需要将它加入到更新队列中,等待后续进行更新。在这里有必要讲下这个队列的创建流程,这个创建操作在React有多次应用。

var sharedQueue = updateQueue.shared;
  var pending = sharedQueue.pending;
  if (pending === null) {
  // mount时只有一个update,直接闭环
    update.next = update;
  } else {
  // update时,将最新的update的next指向上一次的update, 上一次的update的next又指向最新的update形成闭环
    update.next = pending.next;
    pending.next = update;
  }
  // pending指向最新的update, 这样我们遍历update链表时, pending.next会指向第一个插入的update。
  sharedQueue.pending = update;   

我将上面的代码进行了一下抽象,更新队列是一个环形链表结构,每次向链表结尾添加一个update时,指针都会指向这个update,并且这个update.next会指向第一个更新:

上一篇文章也讲过,React最多会同时拥有两个fiber树,一个是currentfiber树,另一个是workInProgressfiber树。currentfiber树的根节点在上面已经创建,下面会通过拷贝fiberRoot.current的形式创建workInProgressfiber树的根节点。

到这里,前面的准备工作就做完了, 接下来进入正菜,开始进行循环遍历,生成fiber树和dom树,并最终渲染到页面中。相关参考视频讲解:进入学习

render阶段

这个阶段并不是指把代码渲染到页面上,而是基于我们的代码画出对应的fiber树和dom树。

workloopSync

function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

在这个循环里,会不断根据workInProgress找到对应的child作为下次循环的workInProgress,直到遍历到叶子节点,即深度优先遍历。在performUnitOfWork会执行下面的beginWork

beginWork

简单描述下beginWork的工作,就是生成fiber树。

基于workInProgress的根节点生成<App />fiber节点并将这个节点作为根节点的child,然后基于<App />fiber节点生成<div />fiber节点并作为<App />fiber节点的child,如此循环直到最下面的牛牛文本。

注意, 在上面流程图中,updateFunctionComponent会执行一个renderWithHooks函数,这个函数里面会执行App()这个函数组件,在这里会初始化函数组件里所有的hooks,也就是上面实例代码的useState()

当遍历到牛牛文本时,它的下面已经没有了child,这时beginWork的工作就暂时告一段落,为什么说是暂时,是因为在completeWork时,如果遍历的fiber节点有sibling会再次走到beginWork

completeWork

当遍历到牛牛文本后,会进入这个completeWork

在这里,我们再简单描述下completeWork的工作, 就是生成dom树。

基于fiber节点生成对应的dom节点,并且将这个dom节点作为父节点,将之前生成的dom节点插入到当前创建的dom节点。并会基于在beginWork生成的不完全的workInProgressfiber树向上查找,直到fiberRoot。在这个向上的过程中,会去判断是否有sibling,如果有会再次走beginWork,没有就继续向上。这样到了根节点,一个完整的dom树就生成了。

额外提一下,在completeWork中有这样一段代码

if (flags > PerformedWork) {
  if (returnFiber.lastEffect !== null) {
    returnFiber.lastEffect.nextEffect = completedWork;
  } else {
    returnFiber.firstEffect = completedWork;
  }
  returnFiber.lastEffect = completedWork;
}

解释一下, flags > PerformedWork代表当前这个fiber节点是有副作用的,需要将这个fiber节点加入到父级fibereffectList链表中。

commit阶段

这个阶段的主要工作是处理副作用。所谓副作用就是不确定操作,比如:插入,替换,删除DOM,还有useEffect()hook的回调函数都会被作为副作用。

commitWork

准备工作

commitWork前,会将在workloopSync中生成的workInProgressfiber树赋值给fiberRootfinishedWork属性。

var finishedWork = root.current.alternate;  // workInProgress fiber树
root.finishedWork = finishedWork;  // 这里的root是fiberRoot
root.finishedLanes = lanes;
commitRoot(root);

在上面我们提到,如果一个fiber节点有副作用会被记录到父级fiberlastEffectnextEffect

在下面代码中,如果fiber树有副作用,会将rootFiber.firstEffect节点作为第一个副作用firstEffect,并且将effectList形成闭环。

var firstEffect;
// 判断当前rootFiber树是否有副作用
if (finishedWork.flags > PerformedWork) {
    // 下面代码的目的还是为了将这个effectList链表形成闭环
    if (finishedWork.lastEffect !== null) {
      finishedWork.lastEffect.nextEffect = finishedWork;
      firstEffect = finishedWork.firstEffect;
    } else {
      firstEffect = finishedWork;
    }
} else {
// 这个rootFiber树没有副作用
firstEffect = finishedWork.firstEffect;
}

mutation之前

简单描述mutation之前阶段的工作:

处理DOM节点渲染/删除后的 autoFocus、blur 逻辑;

调用getSnapshotBeforeUpdate,fiberRoot和ClassComponent会走这里;

调度useEffect(异步);

在mutation之前的阶段,遍历effectList链表,执行commitBeforeMutationEffects方法。

do {  // mutation之前
  invokeGuardedCallback(null, commitBeforeMutationEffects, null);
} while (nextEffect !== null);

我们进到commitBeforeMutationEffects方法,我将代码简化一下:

function commitBeforeMutationEffects() {
  while (nextEffect !== null) {
    var current = nextEffect.alternate;
    // 处理DOM节点渲染/删除后的 autoFocus、blur 逻辑;
    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null){...}
    var flags = nextEffect.flags;
    // 调用getSnapshotBeforeUpdate,fiberRoot和ClassComponent会走这里
    if ((flags & Snapshot) !== NoFlags) {...}
    // 调度useEffect(异步)
    if ((flags & Passive) !== NoFlags) {
      // rootDoesHavePassiveEffects变量表示当前是否有副作用
      if (!rootDoesHavePassiveEffects) {
        rootDoesHavePassiveEffects = true;
        // 创建任务并加入任务队列,会在layout阶段之后触发
        scheduleCallback(NormalPriority$1, function () {
          flushPassiveEffects();
          return null;
        });
      }
    }
    // 继续遍历下一个effect
    nextEffect = nextEffect.nextEffect;
    }
}

按照我们示例代码,我们重点关注第三件事,调度useEffect(注意,这里是调度,并不会马上执行)。

scheduleCallback主要工作是创建一个task

var newTask = {
    id: taskIdCounter++,
    callback: callback,  //上面代码传入的回调函数
    priorityLevel: priorityLevel,
    startTime: startTime,
    expirationTime: expirationTime,
    sortIndex: -1
};

它里面有个逻辑会判断startTimecurrentTime, 如果startTime > currentTime,会把这个任务加入到定时任务队列timerQueue,反之会加入任务队列taskQueue,并task.sortIndex = expirationTime

mutation

简单描述mutation阶段的工作就是负责dom渲染。

区分fiber.flags,进行不同的操作,比如:重置文本,重置ref,插入,替换,删除dom节点。

和mutation之前阶段一样,也是遍历effectList链表,执行commitMutationEffects方法。

do {    // mutation  dom渲染
  invokeGuardedCallback(null, commitMutationEffects, null, root, renderPriorityLevel);
} while (nextEffect !== null);

看下commitMutationEffects的主要工作:

function commitMutationEffects(root, renderPriorityLevel) {
  // TODO: Should probably move the bulk of this function to commitWork.
  while (nextEffect !== null) {     // 遍历EffectList
    setCurrentFiber(nextEffect);
    // 根据flags分别处理
    var flags = nextEffect.flags;
    // 根据 ContentReset flags重置文字节点
    if (flags & ContentReset) {...}
    // 更新ref
    if (flags & Ref) {...}
    var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
    switch (primaryFlags) {
      case Placement:   // 插入dom
        {...}
      case PlacementAndUpdate:    //插入dom并更新dom
        {
          // Placement
          commitPlacement(nextEffect);
          nextEffect.flags &= ~Placement; // Update
          var _current = nextEffect.alternate;
          commitWork(_current, nextEffect);
          break;
        }
      case Hydrating:     //SSR
        {...}
      case HydratingAndUpdate:      // SSR
        {...}
      case Update:      // 更新dom
        {...}
      case Deletion:    // 删除dom
        {...}
    }
    resetCurrentFiber();
    nextEffect = nextEffect.nextEffect;
  }
}

按照我们的示例代码,这里会走PlacementAndUpdate,首先是commitPlacement(nextEffect)方法,在一串判断后,最后会把我们生成的dom树插入到rootDOM节点中。

function appendChildToContainer(container, child) {
  var parentNode;
  if (container.nodeType === COMMENT_NODE) {
    parentNode = container.parentNode;
    parentNode.insertBefore(child, container);
  } else {
    parentNode = container;
    parentNode.appendChild(child);    // 直接将整个dom作为子节点插入到root中
  }
}

到这里,代码终于真正的渲染到了页面上。下面的commitWork方法是执行和useLayoutEffect()有关的东西,这里不做重点,后面文章安排,我们只要知道这里是执行上一次更新的effect unmount

fiber树切换

在讲layout阶段之前,先来看下这行代码

root.current = finishedWork  // 将`workInProgress`fiber树变成`current`树

这行代码在mutation和layout阶段之间。在mutation阶段, 此时的currentfiber树还是指向更新前的fiber树, 这样在生命周期钩子内获取的DOM就是更新前的, 类似于componentDidMountcompentDidUpdate的钩子是在layout阶段执行的,这样就能获取到更新后的DOM进行操作。

layout

简单描述layout阶段的工作:

  • 调用生命周期或hooks相关操作
  • 赋值ref

和mutation之前阶段一样,也是遍历effectList链表,执行commitLayoutEffects方法。

do {   // 调用生命周期和hook相关操作, 赋值ref
   invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
} while (nextEffect !== null);

来看下commitLayoutEffects方法:

function commitLayoutEffects(root, committedLanes) {
  while (nextEffect !== null) {
    setCurrentFiber(nextEffect);
    var flags = nextEffect.flags;
    // 调用生命周期或钩子函数
    if (flags & (Update | Callback)) {
      var current = nextEffect.alternate;
      commitLifeCycles(root, current, nextEffect);
    }
    {
      // 获取dom实例,更新ref
      if (flags & Ref) {
        commitAttachRef(nextEffect);
      }
    }
    resetCurrentFiber();
    nextEffect = nextEffect.nextEffect;
  }
}

提一下,useLayoutEffect()的回调会在commitLifeCycles方法中执行,而useEffect()的回调会在commitLifeCycles中的schedulePassiveEffects方法进行调度。从这里就可以看出useLayoutEffect()useEffect()的区别:

  • useLayoutEffect的上次更新销毁函数在mutation阶段销毁,本次更新回调函数是在dom渲染后的layout阶段同步执行;
  • useEffectmutation之前阶段会创建调度任务,在layout阶段会将销毁函数和回调函数加入到pendingPassiveHookEffectsUnmountpendingPassiveHookEffectsMount队列中,最终它的上次更新销毁函数和本次更新回调函数都是在layout阶段后异步执行; 可以明确一点,他们的更新都不会阻塞dom渲染。

layout之后

还记得在mutation之前阶段的这几行代码吗?

// 创建任务并加入任务队列,会在layout阶段之后触发
scheduleCallback(NormalPriority$1, function () {
  flushPassiveEffects();
  return null;
});

这里就是在调度useEffect(),在layout阶段之后会执行这个回调函数,此时会处理useEffect的上次更新销毁函数和本次更新回调函数。

总结

看完这篇文章, 我们可以弄明白下面这几个问题:

  1. React的渲染流程是怎样的?
  2. React的beginWork都做了什么?
  3. React的completeWork都做了什么?
  4. React的commitWork都做了什么?
  5. useEffect和useLayoutEffect的区别是什么?
  6. useEffect和useLayoutEffect的销毁函数和更新回调的调用时机?

到此这篇关于React渲染机制超详细讲解的文章就介绍到这了,更多相关React渲染机制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React事件处理的机制及原理

    React中的事件处理 在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式.例如onclick要写成onClick,onchange要写成onChange等. (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式.例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在R

  • React全局状态管理的三种底层机制探究

    目录 前言 props context state 总结 前言 现代前端框架都是基于组件的方式来开发页面.按照逻辑关系把页面划分为不同的组件,分别开发不同的组件,然后把它们一层层组装起来,把根组件传入 ReactDOM.render 或者 vue 的 $mount 方法中,就会遍历整个组件树渲染成对应的 dom. 组件都支持传递一些参数来定制,也可以在内部保存一些交互状态,并且会在参数和状态变化以后自动的重新渲染对应部分的 dom. 虽然从逻辑上划分成了不同的组件,但它们都是同一个应用的不同部分

  • React运行机制超详细讲解

    目录 适合人群 写源码之前的必备知识点 JSX 虚拟Dom 原理简介 手写react过程 基本架子的搭建 React的源码 ReactDom.render ReactDom.Component 简单源码 适合人群 本文适合0.5~3年的react开发人员的进阶. 讲讲废话: react的源码,的确是比vue的难度要深一些,本文也是针对初中级,本意了解整个react的执行过程. 写源码之前的必备知识点 JSX 首先我们需要了解什么是JSX. 网络大神的解释:React 使用 JSX 来替代常规的

  • React事件机制源码解析

    React v17里事件机制有了比较大的改动,想来和v16差别还是比较大的. 本文浅析的React版本为17.0.1,使用ReactDOM.render创建应用,不含优先级相关. 原理简述 React中事件分为委托事件(DelegatedEvent)和不需要委托事件(NonDelegatedEvent),委托事件在fiberRoot创建的时候,就会在root节点的DOM元素上绑定几乎所有事件的处理函数,而不需要委托事件只会将处理函数绑定在DOM元素本身. 同时,React将事件分为3种类型--d

  • React渲染机制超详细讲解

    目录 准备工作 render阶段 workloopSync beginWork completeWork commit阶段 commitWork mutation之前 mutation fiber树切换 layout layout之后 总结 准备工作 为了方便讲解,假设我们有下面这样一段代码: function App(){ const [count, setCount] = useState(0) useEffect(() => { setCount(1) }, []) const handl

  • React RenderProps模式超详细讲解

    目录 正文 使用Render Props来完成关注点分离 render prop的prop名不一定叫render 注意点 render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的值为一个返回React element的函数,并且在组件内部的渲染逻辑是通过调用这个函数来完成的.那么,我们就说这个组件使用了render props技术. <DataProvi

  • MyBatis插件机制超详细讲解

    目录 MyBatis的插件机制 InterceptorChain MyBatis中的Plugin MyBatis插件开发 总结 MyBatis的插件机制 MyBatis 允许在已映射语句执行过程中的某一点进行拦截调用.默认情况下,MyBatis 允许使用插件来拦截的方法调用包括: Executor(update, query, flushStatements, commit, rollback, getTransaction, close, isClosed) ParameterHandler(

  • Python多进程并发与同步机制超详细讲解

    目录 多进程 僵尸进程 Process类 函数方式 继承方式 同步机制 状态管理Managers 在<多线程与同步>中介绍了多线程及存在的问题,而通过使用多进程而非线程可有效地绕过全局解释器锁. 因此,通过multiprocessing模块可充分地利用多核CPU的资源. 多进程 多进程是通过multiprocessing包来实现的,multiprocessing.Process对象(和多线程的threading.Thread类似)用来创建一个进程对象: 在类UNIX平台上,需要对每个Proce

  • JavaGUI事件监听机制超详细讲解

    1.一个事件模型中有上对象:事件源,事件以及监听程序 2.事件监听机制: 事件源        事件发生的地方 事件            要发生的事情 事件处理     针对发生的事情做出的处理方案 事件监听     把事件源和事件关联起来 使用步骤: 新建一个组件(如 JButton) 将该组件添加到相应的面板(如 JFrame) 注册监听器以监听事件源产生的事件(如通过ActionListener来响应用户点击按钮) 定义处理事件的方法(如在ActionListener中的actionPe

  • Spring Boot超详细讲解请求处理流程机制

    目录 1. 背景 2. Spring Boot 的请求处理流程设计 3. Servlet服务模式请求流程分析 3.1 ServletWebServerApplicationContext分析 3.2 Servlet服务模式之请求流程具体分析 4. Reactive服务模式请求流程分析 4.1 ReactiveWebServerApplicationContext分析 4.2 webflux服务模式之请求流程具体分析 5. 总结 1. 背景 之前我们对Spring Boot做了研究讲解,我们知道怎

  • React useState超详细讲解用法

    目录 前言 基本用法 initData为非函数的情况 initData为函数的情况 state变化监听 过时状态问题 更新引用数据类型 useState 实现原理 前言 React-hooks 正式发布以后, useState 可以使函数组件像类组件一样拥有 state,也就说明函数组件可以通过 useState 改变 UI 视图.那么 useState 到底应该如何使用,底层又是怎么运作的呢,首先一起看一下 useState . 基本用法 [ state , dispatch ] = useS

  • Java 超详细讲解Spring MVC异常处理机制

    目录 异常处理机制流程图 异常处理的两种方式 简单异常处理器SimpleMappingExceptionResolver 自定义异常处理步骤 本章小结 异常处理机制流程图 系统中异常包括两类: 预期异常 通过捕获异常从而获取异常信息. 运行时异常RuntimeException 主要通过规范代码开发.测试等手段减少运行时异常的发生. 系统的Dao.Service.Controller出现都通过throws Exception向上抛出,最后SpringMVC前端控制器交由异常处理器进行异常处理,如

  • Python超详细讲解内存管理机制

    目录 什么是内存管理机制 一.引用计数机制 二.数据池和缓存 什么是内存管理机制 python中创建的对象的时候,首先会去申请内存地址,然后对对象进行初始化,所有对象都会维护在一 个叫做refchain的双向循环链表中,每个数据都保存如下信息: 1. 链表中数据前后数据的指针 2. 数据的类型 3. 数据值 4. 数据的引用计数 5. 数据的长度(list,dict..) 一.引用计数机制 引用计数增加: 1.1 对象被创建 1.2 对象被别的变量引用(另外起了个名字) 1.3 对象被作为元素,

随机推荐