フロントエンドフレームワーク管理

今回はフロントエンドフレームワーク管理についてお届けします。フロントエンドフレームワーク管理の注意点とは何ですか?実際の事例を見てみましょう。

現在最も人気のある 3 つのフロントエンド フレームワークは、Angular2+、Vue、および React です。それらはすべて、フロントエンド開発をより標準化するためにコンポーネント化とモジュール化のアイデアを使用しています。 しかし、欠点も明らかです。ドキュメントの不完全さ、事例の不足、学習コストの高さに加えて、コンポーネント間の状態管理も大きな問題です。コンポーネント化は良いことですが、コンポーネント間のデータの流れが適切に処理されないと、プロジェクトの混乱やメンテナンスの困難などの悪影響が生じます。

まず、状態管理が必要な理由について説明します:

たとえば、2 つのリストが同じデータ ソースを参照する場合、ユーザーが一方のリストを変更すると、もう一方のリストのデータもそれに応じて変更されます。 angular1 を使用する場合の解決策は非常に簡単で、$rootScope を使用するだけです。しかし、3 つの主要なフレームワークに関しては、$rootScope の概念がありません。データの同期更新を実現したい場合はどうすればよいでしょうか。

これは簡単だと言う人もいるかもしれません。ユーザーが最初のテーブルに変更を加えると、2 番目のテーブルにメッセージが送信され、対応するデータが変更されます。しかし、テーブルが 10 個または 20 個あった場合はどうなるでしょうか?逐一通知するつもりですか？他のコンポーネントもこのデータ ソースを使用する場合、それらのコンポーネントにも更新が通知されますか?

つまり、プロジェクトが単純な場合にはこの解決策は実現可能かもしれませんが、プロジェクトが複雑になると問題がすぐに明らかになります。今後のプロジェクトが覆らないようにするためにも、やはり最初から考えておく必要があります。

状態管理の概念は、複雑なデータ フローを処理することです。

3 つの主要なフレームワークは、次のように状態管理メソッドを実装します。

Vue: Vuex

React: Redux (dva.js)

Angular2+: Redux (ngrx)

3 つの主要なフレームワークは、異なる方法で状態管理を実装しますが、根底にある考え方は同じです。それについて大まかに話しましょう: ステータス管理を実現するために、

プロジェクトには、リデューサー、エフェクト、サービス、モデルなどのいくつかの新しいモジュールが

追加されました。 angular2+ の場合は、

アクションもあります。 まず、これらのモジュールの機能について説明します:

モデル: データ モデル。データ自体とデータを変更するメソッドを保存します。 angular2+ では、モデルはエンティティを保存します。バックエンドを勉強したことがある人にはよく知られているはずです。データに関する記述です。

reducers: 同期操作を担当します。例えば、要求されたフォームデータがデータモデルに格納され、ユーザーが特定のデータを追加/削除し、元のデータが変更されます。

サービス: データを要求するアクションのカプセル化。通常はデータを取得するメソッドが含まれます。 getList()、getUsers() など。

効果: 非同期操作を担当します。たとえば、ユーザーのリクエスト アクションを受信した後、サービスを呼び出してサーバーにデータをリクエストします。成功した場合は、リデューサーを呼び出してデータを保存します。失敗した場合は、別のアクションが実行されます。

Angular2+ は、さまざまなアクションをカプセル化したアクションのレイヤーも抽象化します。たとえば、データがロードされる、データが正常にロードされる、ユーザーがデータを削除するなどです。データタイプとペイロード (データの変更に使用されるデータ) が含まれます

対応する製品の検索などのユーザー操作で、ユーザーが確認ボタンを押すと、プロセス全体は次のように要約できます:

ユーザーは、命令 -> ディスパッチはリデューサーを呼び出してステータスを変更し、対応するコンポーネントはロード状態になります -> データを取得するためにサービスを呼び出します -> データが正常に取得され、リデューサーを呼び出してデータを保存し、ロードを終了します ->

ビューにレンダリングします。

データを更新するためにリデューサーが呼び出されるとき、モデルにバインドされているすべてのビューが同期的に更新され、各処理ロジックが非常に明確になります。プロジェクトは複雑になりますが、保守は間違いなくはるかに便利になります。

理解しにくい場合は、次の 2 つのケースから始めることができます:

vuex Counter + リスト表示: http://www.cnblogs.com/axel10/p/8536688.html

dva.js Counter +リスト表示：http://www.cnblogs.com/axel10/p/8503782.html

始めるのに最も適しているのは Vue、次に React (dva.js を使用)、そして最も難しいのは angular2+ です。 Angular2+ には Rxjs と TypeScript が関係しており、多くの知識ポイントがあります。難しいかどうかに関係なく、常に浅いところから深いところへ始めることを忘れずに、一歩で空に到達することを夢想しないでください。 angular1 にさえ慣れていない場合は、まず angular1 をよく使い、MVC の考え方をよく理解してから 3 つの主要なフレームワークに参加してください。そうしないと、2 倍の労力で半分の結果が得られ、多くの時間を無駄にする可能性があります。時間。

フロントエンド エンジニアとして、可能であれば、Java、C# などのバックエンド言語を学ぶことをお勧めします。これは、フロントエンド フレームワークを理解するのに非常に役立ちます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

React のクラス定義コンポーネントとは

Vue.js フォーム入力バインディング

以上がフロントエンドフレームワーク管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。