リアクトファイバーの作成現在の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 でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法
>>: データベースマルチテーブル接続クエリの実装方法の詳細説明
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...
最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...
目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...
目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...
序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...
目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...
目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...
目次1. MySQL アーキテクチャ2. ネットワーク接続層3. データベースサービス層4. 接続プ...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...
ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...
webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...
序文:日々の勉強や仕事の中で、データをエクスポートする必要に迫られることがよくあります。たとえば、デ...
データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...