React Fiber構造の作成手順

定数ルート = document.getElementById('root');
ReactDOM.render() は、
  <React.StrictMode>
    <アプリ />
  </React.StrictMode>,
  根
);

エクスポート関数レンダリング(
  要素: React$Element<any>,
  コンテナ: コンテナ、
  コールバック: ?関数、
）{
  // いくつかの環境コードを削除します // ...
  legacyRenderSubtreeIntoContainer() を返す
    ヌル、
    要素、
    容器、
    間違い、
    折り返し電話、
  );
}

エクスポート関数レンダリング(
  要素: React$Element<any>,
  コンテナ: コンテナ、
  コールバック: ?関数、
）{
  // いくつかの環境コードを削除します // ...
  legacyRenderSubtreeIntoContainer() を返す
    ヌル、
    要素、
    容器、
    間違い、
    折り返し電話、
  );
}

  戻り値: createLegacyRoot()
    容器、
    水分補給すべき
      ? {
        水和物: 真、
      }
      ： 未定義、
  );

関数 FiberRootNode(コンテナ情報、タグ、水和物) {
  this.tag = タグ; // タイプ this.containerInfo = containerInfo; // コンテナ
  this.pendingChildren = null; 
  this.current = null;
  this.pingCache = null;
  this.finishedWork = null;
  this.timeoutHandle = タイムアウトなし;
  this.context = null;
  this.pendingContext は null です。
  this.hydrate = 水和物;
  this.callbackNode = null;
  this.callbackPriority = NoLanePriority;
  this.eventTimes = createLaneMap(NoLanes);
  this.expirationTimes = createLaneMap(NoTimestamp);

  this.pendingLanes = NoLanes;
  this.suspendedLanes = NoLanes;
  this.pingedLanes = NoLanes;
  this.mutableReadLanes = NoLanes;
  this.finishedLanes = NoLanes;

  this.entangledLanes = NoLanes;
  this.entanglements = createLaneMap(NoLanes);

  // ....


}

エクスポートタイプ RootTag = 0 | 1;

  const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
  root.current = 初期化されていないFiber;
  初期化されていないFiber.stateNode = ルート;

const createFiber = 関数(
  タグ: ワークタグ、
  保留中のProps: 混合、
  キー: null | 文字列、
  モード: TypeOfMode、
): ファイバー {
  // $FlowFixMe: 形状は正確ですが、Flow はコンストラクタを好みません
  新しい FiberNode(タグ、pendingProps、キー、モード) を返します。
};

関数FiberNode(
  タグ: ワークタグ、
  保留中のProps: 混合、
  キー: null | 文字列、
  モード: TypeOfMode、
）{
  // 実例
  this.tag = tag; //コンポーネント タイプ this.key = key; //キー属性 this.elementType = null; //要素タイプ、クラス関数、表示クラス、div 表示 div
  this.type = null; //関数またはクラス
  this.stateNode = null; //domノード //ファイバー
  this.return = null; //親ノードを指します this.child = null; //子ノードを指します this.sibling = null; //兄弟ノード this.index = 0; //

  this.ref = null;

  this.pendingProps = pendingProps; // プロパティ pendingProps を待機中
  this.memoizedProps = null; //メモリプロパティ、通常はpropsを保存します
  this.updateQueue = null; // キューを更新 this.memoizedState = null; // 通常は状態を保存
  this.dependencies = null;

  モードを次のように指定します。

  // 効果関連 this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = レーンなし;
  this.childLanes = NoLanes;

  this.alternate = null; //workInProgressを指す
}

与える（） {
    const { 名前、カウント } = this.state;
    戻る （
      <div className="アプリ">
          <ボタン名={名前} />
        {
          カウント
        }
      </div>
    );
  }

ReactDOM.render() は、
  <React.StrictMode>
    <アプリ />
  </React.StrictMode>,
  根
);

バッチ処理されていない更新(() => {
  // コンテナを更新
  updateContainer(子、fiberRoot、親コンポーネント、コールバック);
});