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

概述

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

• React有3种工作模式

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

legacy模式下，React做了什么

1. 会创建整个应用的根节点、当前fiebr结构
2. 创建fibre更新队列，updateQueue
3. 创建update对象，每个发生更新的fiber节点都会创建，包含更新的优先级和更新内容
4. update对象创建完成后，会递归到根节点，将update对象添加到更新队列updateQueue中，根节点此时也会记录当前的更新任务的优先级（legacy模式用不到）
5. 根节点递归向下执行，执行更新队列中任务，更新对应的fiber节点
6. fibre更新完成后，进入perfromSyncWorkReact，进入render阶段
7. render阶段结束后，进入commit阶段
8. commit阶段结束后，进入layout阶段
9. 修改current指针，更新完成

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

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

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

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

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

流程图示