关于前端:React源码Part7ReactDomrender背后做了什么

概述

• 本文次要介绍 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 指针替换，页面更新实现