React でフックを実装するにはどうすればよいですか?ファイバーに依存する必要がありますか?

reactフックを実装するにはどうすればよいですか? React Hooks の実装は Fiber に依存する必要がありますか?次の記事では、さまざまなフレームワークでのフックの実装方法について説明します。

React のフックはファイバーの後に登場した機能であるため、多くの人がフックの実装にはファイバーに依存する必要があると誤解していますが、実際にはそうではありません。両者の間に必要な接続はありません。 [関連する推奨事項:Redis ビデオ チュートリアル]

現在、フックは React だけでなく、Preact、React ssr、Midway などのフレームワークにも実装されていますが、その実装は繊維に依存しない。

これらのさまざまなフレームワークのフックがどのように実装されているかを見てみましょう:

react フックの実装方法

react は、jsx インターフェイスを通じて説明されています。 、babel や tsc などのコンパイル ツールによってレンダリング関数にコンパイルされ、vdom を生成するために実行されます。

ここでのレンダリング関数は、React17 より前の React.createElement でした。 :

React 17 以降は jsx に変更されました:

この jsx ランタイムは自動的に導入されるため、インストールする必要はありません各コンポーネントは React インポートを保持する必要があります。

レンダー関数の実行により vdom が生成されます:

vdom の構造は次のとおりです:

React16 より前では、この vdom は再帰的にレンダリングされ、実際の dom を追加、削除、変更していました。

React16 でファイバー アーキテクチャが導入された後、追加の手順が追加されました。まず vdom をファイバーに変換し、次にファイバーをレンダリングします。

vdom をファイバーに変換するプロセスはリコンサイルと呼ばれ、実際の dom を追加、削除、または変更する最終プロセスはコミットと呼ばれます。

なぜこの変換を行う必要があるのでしょうか?

vdom は子ノード child への参照のみを持ち、親ノードparent や他の兄弟ノードへの参照を持たないため、結果として、すべての vdom ノードを一度に再帰的に dom にレンダリングする必要があります。中断します。

中断された場合はどうなりますか?親ノードと兄弟ノードは記録されないため、子ノードの処理のみを続行できますが、vdom の他の部分は処理できません。

これが、React がこの種のファイバー構造を導入した理由です。つまり、親ノードの戻り、子ノードの子、兄弟ノードの兄弟などの参照があり、これらの参照は中断される可能性があります。その後復元すると、未処理のアイテムがすべて見つかります。

ファイバー ノードの構造は次のとおりです。

このプロセスは中断することができ、当然、スケジュールすることもできます。これがスケジュール プロセスです。

したがって、ファイバー アーキテクチャは、スケジュール、リコンサイル (vdom をファイバーに変換)、およびコミット (dom に更新) の 3 つの段階に分かれています。

関数コンポーネントでフックを使用すると、ファイバー ノードに保存されている一部の値にアクセスできます。

たとえば、この関数コンポーネントでは 6 つのフックが使用されています:

この場合、対応するファイバー ノードには 6 つの要素の MemorydState リンク リストがあります:

次まで連結:

さまざまなフックが、memoryedState リンク リストのさまざまな要素の値にアクセスします。これは反応です。フックの原理。

このリンクされたリストには作成フェーズと更新フェーズがあるため、useXxx の最終実装は mountXxx と updateXxx に分割されていることがわかります。ここでのマウント フェーズは、フック ノードを作成し、それらをリンク リストに組み立てます。

#作成されたフック リンク リストは、ファイバー ノードの MemorydState 属性にリンクされます。

更新時には、ファイバー ノードからフック リストを自然に取り出すことができます。

このようにして、複数のレンダリングで useXxx の API をファイバー ノード で対応する MemorydState を見つけます。

これは React フックの原理で、ファイバー ノードにフックが格納されていることがわかります。

preact との違いは何ですか?

preact フックの実装方法

preact は、react コードと互換性のある、より軽量なフレームワークであり、クラス コンポーネントと関数コンポーネントに加え、フックなどの React 機能もサポートしています。 . .ただし、ファイバー アーキテクチャは実装されていません。

これは、最終的なパフォーマンスではなく、最終的なサイズ (わずか 3 kb) を主に考慮しているためです。

react がファイバー ノードにフック リストを保存することを学びました。preact にファイバー ノードがない場合、フック リストはどこに保存されるのでしょうか?

実際のところ、ファイバーはパフォーマンスを向上させるために vdom を変更しただけであり、vdom と本質的な違いはないと考えられがちですが、vdom にフックを保存するだけで十分でしょうか?

実際、preact はフック リストを vdom に配置します。

たとえば、この関数コンポーネントには 4 つのフックがあります:

その実装は、vdom 上の対応するフックにアクセスすることです:

react のようにフックをマウントと更新の 2 段階に分割するのではなく、それらをマージして処理します。

図に示すように、component.__hooks の配列にフックを格納し、添字を通じてアクセスします。

このコンポーネントは vdom の属性です:

つまり、フックの値は vnode._component._hooks の配列に格納されます。

フックの実装におけるreactとpreactの違いを比較してください:

• reactではフックリストはfiberNode.memorizedStateプロパティに保存されますが、preactではフックがリストは vnode._component._hooks 属性に保存されます

• react のフック リストは next で連結され、preact のフック リストは配列であり、サブスクリプトを介してアクセスされます

• react はフックのリンク リストの作成と更新を分離します。つまり、useXxx は mountXxx と updateXxx に分割されて実装され、preact はそれらをマージして

## を処理します。

#したがって、

フックの実装はファイバーに依存しません。コンポーネントに対応するフック データを保存する場所を見つけるだけです。レンダリング中に取得する必要があるだけです。どこにあるかは関係ありません。保管されています。

vdom と Fiber はコンポーネントのレンダリングに強く関連しているため、これらの構造に格納されます。

react ssr がフックを実装するのと同様に、それらはファイバーにも vdom にも存在しません:

react ssr はどのようにフックを実装しますか

実際には、react In csr に加えて、-dom パッケージは ssr:

csr の場合に反応 - dom のレンダリング メソッドを使用する:

ssr の場合に反応を使用する - dom/server の renderToString メソッドまたは renderToStream メソッド:

vdom からファイバーへの変換は ssr 中に行われると思いますか?

絶対に違います。ファイバーは、ブラウザーで実行するときのレンダリング パフォーマンスを向上させ、計算を中断可能にし、アイドル時に計算を実行するために導入された構造です。

サーバー側のレンダリングには当然ファイバーは必要ありません。

ファイバーが必要ない場合、フックリストはどこに保存されますか?ヴドム?

確かに vdom に配置できますが、そうではありません。

たとえば useRef フック:

firstWorkInProgressHook から始まり next と連結されたリンク リストです。

createHook を使用して firstWorkInProgressHook によって作成された最初のフック ノード:

は vdom 上位にマウントされていません。 ＃＃＃＃＃＃なぜ？

ssr は一度レンダリングするだけで済み、更新する必要がないため、vdom 上でハングアップする必要はありません。

各コンポーネントのフックの処理が完了するたびにフック リストをクリアするだけです:

#つまり、react ssr を実行すると、グローバル変数にフックが存在します。

react csr と ssr のフックの実装原則の違いを比較します。

• csr は vdom からファイバーを作成してレンダリングを中断可能にし、アイドル スケジューリングを通じてパフォーマンスを向上させます。 vdom は直接レンダリングされます

• フックは csr のファイバー ノードに保存され、ssr のグローバル変数に直接配置されます。オンでは、各コンポーネントは処理後にクリアされます。二度目には使用されないため、

#csr はフックの作成と更新を 2 つのフェーズ (マウントと更新) に分割しますが、ssr は 1 回だけ処理され、作成フェーズ

#フックの実装原理は実際には複雑ではありません。リンクされたリストを特定のコンテキストに保存し、フック API が対応するデータにアクセスすることです。リンク リストのさまざまな要素を使用して、それぞれのロジックを完成させます。このコンテキストは、vdom、ファイバー、またはグローバル変数にすることもできます。

しかし、フックのアイデアは依然として非常に人気があり、タオバオによって作成されたサーバーサイド フレームワーク途中でフックのアイデアが導入されました。フックの実装方法

midway は Node.js フレームワークです:

サーバー側フレームワークには当然、vdom や vdom などの構造はありません。ファイバーですが、フックの考え方はこれらに依存していません。フック API を実装するには、リンクされたリストを特定のコンテキストに配置するだけです。

midway は反応フックに似た API を実装しました:

フック リストがどこにあるかわかりませんフックの実装原理はすでにマスターしていますので、フック リストを保存するコンテキストがある限り、どこにでも保存できます。

概要

react フックは、react Fiber アーキテクチャの後に登場した機能です。多くの人は、フックは Fiber で実装する必要があると誤解しています。私たちは、react について見てきました。 preact、react ssr でのフックの実装、および途中でこれが当てはまらないことが判明しました:

react は vdom をファイバーに変換し、フック リストを Fiber.memorizedState 属性に保存し、それを連結しますnext## を介して

#preact はファイバーを実装しません。vnode._component._hooks 属性にフック リストを配置し、それを配列として実装します。サブスクリプトを介して

react ssr にアクセスする場合、ファイバーは実装されません必要ですが、フックが実装されていません。リンク リストは vdom にハングされますが、レンダリングする必要があるのは 1 回だけであり、グローバル変数はコンポーネントのレンダリング後にクリアできるため、グローバル変数に直接配置されます。

• midway は Node.js フレームワークであり、フックに似た API については詳しく説明していませんが、フック リストを保存するコンテキストがある限り、問題はありません。
#それでは、反応フックを実装するにはファイバーに依存する必要があるのでしょうか?
• 明らかにそうではありません。ファイバー、vdom、グローバル変数、または任意のコンテキストと組み合わせることができます。
• プログラミング関連の知識について詳しくは、
• プログラミング ビデオ
をご覧ください。 ！

以上がReact でフックを実装するにはどうすればよいですか?ファイバーに依存する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。