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

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

推薦する

HTTP および HTTP コラボレーション Web サーバー アクセス フロー図

Web サーバーは、独立したドメイン名を持つ複数の Web サイトを構築できるほか、通信経路上のトラ...

ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...

CentOS7 上で KVM 仮想化プラットフォームを構築する (3 つの方法)

KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...

Linux のプロセスクラッシュの原因をコアダンプ技術を使用して追跡する簡単な分析

最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

Linuxコマンドとファイル検索の詳しい説明

1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...

MySQLを監視するためのbinlogログ解析ツールの詳しい説明:Canal

Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...

CentOS 7 で Python を 3.6.6 にアップグレードした後に発生する yum エラー問題の解決方法の概要

最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...