同期のReactDOM.render、非同期のReactDOM.createRoot

Reactの3つの有効化モード
legacyモード:

ReactDOM.render(, rootNode);
//        React App     ，            

blockingモード:

ReactDOM.createBlockingRoot(rootNode).render();
//     

concurrentモード:

ReactDOM.createRoot(rootNode).render();
//     

なぜ3つのパターンがあるのか
この3つのモードでは、レンダリングが同期レンダリングリンクをトリガする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』は、文字が皆さんに役に立つことを願っています.