React源码Part7——ReactDom.render背后做了什么？

概述

• 本文主要介绍React在不同环境模式下，更新fiber的流程和区别

• React有3种工作模式

  1. legacy模式： React17及以下暂时都默认使用该模式，其特点是更新队列中的任务都是同步执行
  2. blocking模式：该模式是concurrent模式的过度版本，发放部分concurrent功能
  3. concurrent模式：该模式React18中会提供开放选择，其特点是实现fiber的异步更新，会根据fiber根节点的优先级调度执行更新队列中的任务，实现异步更新

legacy模式下，React做了什么

1. 会创建整个应用的根节点——fibreRootNode，调用React.render()传入的节点，也就是整个应用的入口，创建当前rootFibre。
2. 创建fibre更新队列updateQueue。
3. 创建update对象，在初次挂载时，update对象就是React.render()提供的模板入口。每次DOM发生更新时fiber节点都会重新创建，包含优先级和更新内容。根据页面结构生成的uopdate对象会形成一个环状链表，这个环状链表是Fibre节点生成的依赖。
4. 当最后一个update对象创建完成后，会递归到根节点，将update对象添加到更新队列updateQueue中，根节点此时也会记录当前的更新任务的优先级（legacy模式用不到）

5. 进入perfromSyncWorkReact，进入render阶段。

   • 根节点递归向下执行，执行更新队列中任务，执行每个update对象。
   • 进入beginWork函数后会生成对应的Fibre对象，再进入complete函数生成虚拟DOM。然后执行下一个Update任务。
   • 当整个UpdateQueue队列执行完后，也就是complete执行完成后。得到了根据页面结构生成的虚拟DOM树。然后进入commit阶段
6. render阶段结束后，进入commit阶段
7. commit阶段结束后，进入layout阶段
8. 修改current指针，更新完成

### concurrent模式下，与legacy模式的区别

• 前面5步都与legacy模式相同，区别在于执行更新队列updateQueue时，并不是同步执行，而是根据优先级不同，移步执行

• 当发生更新的fibre将update对象递归到根节点后，根节点会记录优先级，比如是2。

  1. 在向下递归更新过程中会将优先级是2的任务先执行。
  2. 若此时有新的更新触发，且优先级更高，比如1. 根节点记录的优先级会被修改，且打断当前正在执行的更新任务，转而执行优先级为1的任务

• 直到更新队列中的任务全部执行完，进入perfromConcurrentWorkReact,进入render阶段
• 后续的流程与legacy模式相同，直到current指针替换，页面更新完成

流程图示