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

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》，但願文字對你們有幫助。