reactフックを実装するにはどうすればよいですか? React Hooks の実装は Fiber に依存する必要がありますか?次の記事では、さまざまなフレームワークでのフックの実装方法について説明します。
React のフックはファイバーの後に登場した機能であるため、多くの人がフックの実装にはファイバーに依存する必要があると誤解していますが、実際にはそうではありません。両者の間に必要な接続はありません。 [関連する推奨事項:Redis ビデオ チュートリアル]
現在、フックは React だけでなく、Preact、React ssr、Midway などのフレームワークにも実装されていますが、その実装は繊維に依存しない。
これらのさまざまなフレームワークのフックがどのように実装されているかを見てみましょう:
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 は、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 にも存在しません:しかし、フックのアイデアは依然として非常に人気があり、タオバオによって作成されたサーバーサイド フレームワーク途中でフックのアイデアが導入されました。フックの実装方法
midway は Node.js フレームワークです:サーバー側フレームワークには当然、vdom や vdom などの構造はありません。ファイバーですが、フックの考え方はこれらに依存していません。フック API を実装するには、リンクされたリストを特定のコンテキストに配置するだけです。
midway は反応フックに似た API を実装しました:
フック リストがどこにあるかわかりませんフックの実装原理はすでにマスターしていますので、フック リストを保存するコンテキストがある限り、どこにでも保存できます。
概要
以上がReact でフックを実装するにはどうすればよいですか?ファイバーに依存する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。