React Fiber構造の作成手順

React Fiber構造の作成手順

リアクトファイバーの作成

現在のReactのバージョンはV17.0.2がベースになっています。この記事では主にファイバー構造の作成について紹介します。

1. 始める前に

これは私の個人的な理解です。間違っている点があれば指摘してください。

まず、Reactデバッガー開発環境を設定する必要があります。エントリはこちらです: github

npm run i を実行して依存関係をインストールし、npm start を実行して環境を実行します。

2. React.renderから始める

プロジェクト エントリで React.render を呼び出して、デバッグをオンにし、React 呼び出しスタックを表示します。

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

React は render を呼び出した後、基本構成を渡してから legacyRenderSubtreeIntoContainer を呼び出します。

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

React は render を呼び出した後、基本構成を渡してから legacyRenderSubtreeIntoContainer を呼び出します。

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

legacyRenderSubtreeIntoContainer は合計 2 つの処理を実行します。1 つは fiberRoot を生成すること、もう 1 つは updateContainer を呼び出すことです。

fiberRoot を生成する方法を確認するには、legacyCreateRootFromDOMContainer 関数を入力します。 関数内では、createLegacyRoot が呼び出され、ここで次のように hydrate を使用するかどうかを区別します。

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

createLegacyRoot の場合、ReactDOMLegacyRoot 関数をインスタンス化するために使用されます。後続の呼び出しを通じて、最終的にルートの生成に入り、createRootImpl 関数を呼び出してルートをインスタンス化します。

createFiberRoot 関数を入力し、FiberRootNode を初期化します。

関数 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;

上記の構造は fiberRootNode ノードです。

rootTag が 0 の場合はレガシー レンダリング モードを表し、1 の場合は並列モード レンダリングを表します。つまり、従来はレンダリングに React.render を使用していましたが、React.createRoot が呼び出されると、並列モード レンダリング モード、つまり並列レンダリングに入ります。

それでは、繊維の構造を見てみましょう。

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

uninitializedFiber は、作成された FiberNode のインスタンスです。

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

基本的な作成を通じて、FiberNode構造は次のように生成されます。

関数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を指す
}

FiberNode の基本的な表示は上記の通りです。elementType と type の基本的な型は function と class です。

fiberRootNode 構造を次のコードと比較することで、最終的な FiberNode 構造が生成されます。

与える() {
    const { 名前、カウント } = this.state;
    戻る (
      <div className="アプリ">
          <ボタン名={名前} />
        {
          カウント
        }
      </div>
    );
  }
ReactDOM.render() は、
  <React.StrictMode>
    <アプリ />
  </React.StrictMode>,
  根
);

最終実行により、fiberRoot リンク リスト構造が生成されます。

最後に、レンダリングのために unbatchedUpdates が呼び出されます。

updateContainer 関数を入力します。

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

3. 終了

上記はReact Fiber構造を作成する手順の詳細です。React Fiber構造の作成の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React Fiberの仕組みの詳細な説明

<<:  Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

>>:  データベースマルチテーブル接続クエリの実装方法の詳細説明

推薦する

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

HTML シンプルショッピング数量アプレット

この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...

CSS トップに戻る コード例

最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...

Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

JavaScript における型の必須および暗黙的な変換の詳細な説明

目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...

MySQL binlog を使用して誤って削除されたデータベースを復元する方法

目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...

MySQL データベース アーキテクチャの詳細

目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。

webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...

MySQLにデータを素早くインポートする方法

序文:日々の勉強や仕事の中で、データをエクスポートする必要に迫られることがよくあります。たとえば、デ...

SQL 結合クエリの内部結合、外部結合、クロス結合の違いの詳細な説明

データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...