同步的 ReactDOM.render，异步的 ReactDOM.createRoot

Posted 2021-10-05 stonehehehehehe

React三种启用模式

---

legacy 模式：

ReactDOM.render(<App />, rootNode);
// 这个模式是当前React App使用的模式，但是可能不支持某些新特性

blocking 模式：

ReactDOM.createBlockingRoot(rootNode).render(<App />);
// 过渡模式

concurrent 模式：

ReactDOM.createRoot(rootNode).render(<App />);
// 终极模式

为什么有三种模式

---

这三种模式中，我们经常使用的是legacy模式，这种模式在渲染是触发的是同步的渲染链路。blocking模式是legacy模式到concurrent模式的一个过渡，之所以会有这个模式是因为，React团队希望提供渐进的迁移模式，而不是断崖式的切换模式。concurrent模式是React的终极模式，也是React团队使用Fiber架构重写核心算法的动机。

按照官方的说法，“长远来看，模式的数量会收敛，不用考虑不同的模式，但就目前而言，模式是一项重要的迁移策略，让每个人都能决定自己什么时候迁移，并按照自己的速度进行迁移”。

legacy模式和concurrent模式的不同

---

React 将会通过修改 mode 属性为不同的值，来标识当前处于哪个渲染模式；在执行过程中，也是通过判断这个属性，来区分不同的渲染模式。在源码中，我们可以看到会经常fiber.mode这个值，他就是用来标记当前处于哪个模式下的。举个例子：

function requestUpdateLane(fiber) {
  // 获取 mode 属性
  var mode = fiber.mode;
  // 结合 mode 属性判断当前的
  if ((mode & BlockingMode) === NoMode) {
    return SyncLane;
  } else if ((mode & ConcurrentMode) === NoMode) {
    return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane;
  }
  ......
  return lane;
}

因此不同的渲染模式在挂载阶段的差异，本质上来说并不是工作流的差异（其工作流涉及 初始化 → render → commit 这 3 个步骤），而是 mode 属性的差异。mode 属性决定着这个工作流是一气呵成（同步）的，还是分片执行（异步）的。

也就是换句话说，legacy模式和concurrent模式的不同就是同步异步的不同。

思考一个问题，异步渲染一定是Fiber吗？

---

前面有提到，concurrenet模式是React团队使用Fiber重写核心算法的动机，但是重源码的角度来看，不管是不是concurrent模式，Fiber架构已经深入到源码了。也就是说在legacy模式下也是存在Fiber，所以Fiber架构师不完全和异步渲染===的，可以说他同时兼容了同步渲染和异步渲染。

---

借鉴：修言大神的《深入浅出搞定 React》，希望文字对大家有帮助。