Vue3 の Hook 機能について簡単に説明します (概要の共有)

この記事では、Hook を使用する理由と、Vue 3 の Hook と React の違いについて説明します。次に、この記事を通して共有します。皆さんのお役に立てれば幸いです。

#Hook の概念

Hook の概念は React で提案されました。まず、React で Hook がどのようにして生まれたのかを簡単に紹介します。

有名な Vue 2 コード構造を参照すると、次のことがわかります。React はクラス全体を使用してコンポーネントをカプセル化します。状態は、変数を管理するために Vue 2 のデータと同等に設計されており、ライフサイクルとカスタム メソッドも備えており、テンプレート部分は JSX の助けを借りてレンダリング関数に書き込まれます。ビューを更新する必要がある場合は、setState メソッドを使用して状態内の変数を更新する必要があり、それに応じてビュー上のデータが更新されます。ビューを更新してデータを直接更新することはできません。

Vue とは異なり、一方向のデータ フローであることがわかります。 Vueの読み方は「ビュー」、「ステート」は状態を意味します。 Vue がビュー指向である場合、React は状態指向です。

React はクラスを使用してコンポーネントを実装するため、問題が発生します: クラス内での this のポインティングの問題に注意を払う必要があり、コンポーネントが再利用されネストされている場合、コンポーネントの各層の props はすべての操作でなければなりません。が実行され、ロジックが複雑になります。

そこで、React の状態分離を実現する関数コンポーネントが誕生しました。

ここでは、変数宣言、コンポーネント メソッド、レンダリング関数がすべて 1 つの関数にカプセル化されており、ライフ サイクルを実装して状態の変化を監視するための新しい useEffect が追加されています。データ。このコンポーネントが宣言、更新、または破棄されようとすると、それを定義する関数が呼び出され、新しいビューが出力されます。

Vue 3 でコンポーネントを定義する方法を見てみましょう:

上記の記述方法と似ていますか?ただし、記述方法は似ていますが、実装は大きく異なります。前に述べたように、React は状態指向であるのに対し、Vue はビュー指向です。 React 関数コンポーネントは関数を再呼び出しすることによってビューを更新し、ライフ サイクルをコンポーネント宣言に統合します。Vue の setup メソッドは beforeCreate と created を置き換えるだけですが、他のライフ サイクルは引き続きコンポーネント内で定義され、各インスタンスはセットアップを 1 回だけ実行します。ビューとデータの変更の監視をサポートします。

よく「Vue は React の別の実装だ」と言われることがありますが、両者は全く異なる概念であり、実際には、Vue は React の特徴を残したまま、React の設計手法を採用していると理解できます。

それでは、フックとは何ですか? Reactにおける定義は、コンポーネント全体をフック関数として使用し、ライフサイクル機能を統合しながら、関数コンポーネント内に状態データを保持することです。

カスタムフック

コンポーネントが複雑な場合、複数のコンポーネント内の一部の反復ロジックを抽象化できます。 Hook が誕生する前は、React と Vue の両方に高次コンポーネントの設計パターンがあり、React では HOC が、Vue 2 では mixin が使用されていました。なぜフックを放棄してフックを使用する必要があるのでしょうか? カスタム フックを使用する利点は何ですか? まず HOC と mixin について簡単に見てみましょう。その後、それらを比較した後にわかります。

#HOC の原理は、デコレータ モードを使用して、コンポーネントをパラメータとして関数に渡し、再利用部分を追加し、新しいコンポーネントを戻り値として使用することです。 。ミックスインは、再利用されたパーツを小さなパーツに分解し、特定のコンポーネントが必要なときにそれらをつなぎ合わせるようなものです。

実際には、ミックスインには次のような欠点があります。

• 暗黙的な依存関係が導入されます。

#異なるミックスイン間でシーケンスやコードの競合カバレッジの問題が発生する可能性があります
ミックスインのコードは雪だるま式に複雑になります
複数のミックスインにより、マージされたアイテムのソースが不明になります
これらの問題を回避するために、React は HOC を使用しますが、まだ欠陥があります:

1 つのコンポーネントの状態は、多くのコンポーネントの props に影響します
地獄のネストを引き起こす
しかし、新しいフックを使用してください。コンポーネント構造は、コンポーネントの再利用部分のフラットな呼び出しを実現し、未知のソースのミックスインと HOC の地獄のネスティングの問題を解決します。

Vue 3 の Hook 実装#前述したように、React は Class コンポーネントを Function コンポーネントに変換し、Hook を実装します。 Vue 3 では、フックは Vue 3 の新機能の最も重要な部分である複合 API を通じて実装されます。

組み合わせた API を使ってコンポーネントを作成する 簡単に言うと、データ型ごとに分割したデータ、メソッド、ライフサイクルなどをセットアップ関数に配置し、コンポーネントは初期化時に一度セットアップ関数を使用します。特定の API についてはここでは詳しく紹介しません。公式ドキュメントを確認してください。 (antfu が結合 API について説明しています)

結合 API を使用すると、React の書き方を真似て Hook を実装できます。たとえば、これはファイル システム管理の例です。

このコードが Vue 2 で実装された場合を想像してみてください。フォルダーを作成するという行為は、宣言した変数やメソッド、監視データなどを様々な部分に分解する必要があるのはもちろん、削除や編集、コピー＆ペーストなどの機能も実装する必要があります。よく考えてみると、コードは非常に巨大です。

しかし、このフック形式で記述すると、同じ機能を実装するコードを組み合わせることができ、コードが非常に簡潔で明確であるだけでなく、再利用されたコンポーネントのソースもよくわかります。

React の Hook と比較して、Vue 3 では最下位レベルでの最適化も行われ、react 関数コンポーネントの制限が解除され、パフォーマンスが向上しました。

概要

この記事の一般的な内容は次のとおりです。

思考

# なぜ元の HOC やミックスインの代わりにフックなどの概念があるのでしょうか? プログラム開発の進歩の一般的な方向性は次のとおりであることがわかります。 C のようなプロセス指向プログラミング言語から Java のようなオブジェクト指向プログラミング言語への開発、およびネイティブ フロントエンド三銃士の開発からコンポーネント開発のフレームワークの使用に至るまで、ますます抽象化されています。 , フックも同じことをします。関連するロジックを一緒にカプセル化し、無関係なロジックを分離し、結合を減らし、再利用されたロジックをインターフェイスの形式で他のコンポーネントに公開し、基礎となる実装を保護します。

この方法では、同じ関数がより簡潔に記述されます。単一関数の変更には隠れた依存関係が含まれないため、メンテナンスの複雑さが軽減されます。規定の使用命名により、コードが読みやすく拡張しやすくなり、また、複数の人に有益な協力。

状態は React において非常に重要な概念です。状態管理に使用される Redux は実際には React の状態を管理しやすくするために使用されますが、Vue は同様の Vuex を実装していますが、状態のメカニズムはありません。同様に、どちらのフックもエフェクトを使用します。React では状態問題を解決するためにもエフェクトが使用されますが、Vue ではまったく異なるメカニズムでエフェクトが使用されます。

React はステート マシンを中心としたシステムを実装しているようで、各部分間のロジックは厳密です。Vue は独自のメソッドを使用して React の一部のメソッドを再実装し、それらを完全に分離しています。必要なものを選んで組み立てるだけです。全く異なるコンセプトを採用しているため、どちらが優れているとは言えませんが、あるフレームワークを学ぶ際に、別のフレームワークの設計思想を参照することで理解が深まると思います。

少し前に、You Yuxi も Zhihu の質問に答え、AngularJS、React、Vue は実際には概念的な進歩であると述べました。新しいフレームワークを作成するためにこれらのアイデアを真似するだけなら、それは単なる再発明にすぎません画期的な進歩を遂げたいのであれば、コンセプトを改善することが私たちがすべきことです。

[関連する推奨事項:「

vue.js チュートリアル 」]

以上がVue3 の Hook 機能について簡単に説明します (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。