リアクトファイバーの作成現在の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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法
>>: データベースマルチテーブル接続クエリの実装方法の詳細説明
Web サーバーは、独立したドメイン名を持つ複数の Web サイトを構築できるほか、通信経路上のトラ...
この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...
KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...
目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...
最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...
#include <asm/io.h> #define ioremap(cookie,...
ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...
一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...
1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...
Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...
最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...
1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...