关于react.js:面试官说说react的渲染过程

面试官:说说react的渲染过程

hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相干的问题呢，比方面试官让你说说react渲染的过程，这到题目比拟凋谢，也比拟考验大家对react渲染原理以及源码的整体架构的了解。

1. 整体流程：

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

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

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

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

   那这些模块是怎么配合工作的呢：

   • 首先jsx通过babel的ast词法解析之后编程React.createElement，React.createElement函数执行之后就是jsx对象，也被称为virtual-dom。
   • 不论是在首次渲染还是更新状态的时候，这些渲染的工作都会通过Scheduler的调度，Scheduler会依据工作的优先级来决定将哪些工作优先进入render阶段，比方用户触发的更新优先级十分高，如果以后正在进行一个比拟耗时的工作，则这个工作就会被用户触发的更新打断，在Scheduler中初始化工作的时候会计算一个过期工夫，不同类型的工作过期工夫不同，优先级越高的工作，过期工夫越短，优先级越低的工作，过期工夫越长。在最新的Lane模型中，则能够更加细粒度的依据二进制1的地位，来决定工作的优先级，通过二进制的交融和相交，判断工作的优先级是否足够在此次render的渲染。Scheduler会调配一个工夫片给须要渲染的工作，如果是一个十分耗时的工作，如果在一个工夫片之内没有执行实现，则会从以后渲染到的Fiber节点暂停计算，让出执行权给浏览器，在之后浏览器闲暇的时候从之前暂停的那个Fiber节点持续前面的计算，这个计算的过程就是计算Fiber的差别，并标记副作用。具体可浏览往期课件和视频解说，往期文章在底部。
   • 在render阶段：render阶段的配角是Reconciler，在mount阶段和update阶段，它会比拟jsx和以后Fiber节点的差别（diff算法指的就是这个比拟的过程），将带有副作用的Fiber节点标记进去，这些副作用有Placement（插入）、Update（更新）、Deletetion（删除）等，而这些带有副作用Fiber节点会退出一条EffectList中，在commit阶段就会遍历这条EffectList，解决相应的副作用，并且利用到实在节点上。而Scheduler和Reconciler都是在内存中工作的，所以他们不影响最初的出现。
   • 在commit阶段：会遍历EffectList，解决相应的生命周期，将这些副作用利用到实在节点，这个过程会对应不同的渲染器，在浏览器的环境中就是react-dom，在canvas或者svg中就是reac-art等。

   另外咱们也能够从首次渲染和更新的时候看在render和commit这两个子阶段是如果工作的：

   • mount时：

     1. 在render阶段会依据jsx对象构建新的workInProgressFiber树，不太理解Fiber双缓存的能够查看往期文章 Fiber架构，而后将相应的fiber节点标记为Placement，示意这个fiber节点须要被插入到dom树中，而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。
     2. 在commit阶段会遍历render阶段造成的Effect List，执行链表上相应fiber节点的副作用，比方Placement插入，或者执行Passive（useEffect的副作用）。将这些副作用利用到实在节点上

   • update时：

     1. 在render阶段会依据最新状态的jsx对象比照current Fiber，再构建新的workInProgressFiber树，这个比照的过程就是diff算法，diff算法又分成单节点的比照和多节点的比照，不太分明的同学参见之前的文章 diff算法 ，比照的过程中同样会经验收集副作用的过程，也就是将比照进去的差别标记进去，退出Effect List中，这些比照进去的副作用例如：Placement（插入）、Update(更新)、Deletion（删除）等。
     2. 在commit阶段同样会遍历Effect List，将这些fiber节点上的副作用利用到实在节点上

视频解说（高效学习）:点击学习

往期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.总结&第一章的面试题解答