技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1、MVC

は、UI とデータの関連付けの複雑さを軽減するためのソリューションです。

フロントエンドとバックエンドが分離されていなかった初期の頃、サーバーはページに必要なすべてのデータを含む完全な HTML で応答していました。ブラウザはページをレンダリングする役割のみを果たし、プロセス全体は次のようになります。サーバーサイドレンダリング。

サーバー側の処理フロー: リクエストを処理し、必要なデータを HTML に埋め込んで、ブラウザーに返します。

このプロセスの複雑さを軽減するには、次のようにします。 MVCC の モデル。

• サーバーはさまざまなリクエストを受信し、それらをさまざまなリクエストに分散します。 Ｃコントローラー (コントローラー) は、このリクエストに必要なデータを処理および組み立てます。
• まodel レイヤーは、データを UI レンダリング用のデータ モデルに組み立てます。
• 五iew レイヤーはデータ モデルを HTML に組み立ててブラウザに返します。

フロントエンドとバックエンドの分離の理由の一部，

MVC パターンでは、データ モデルがビュー層に組み込まれて最終的な HTML が生成されますが、HTML はますます複雑になっています。
したがって、データを直接フロントエンドに返し、表示用のデータを組み立てるロジックはフロントエンドに任せたいと考えています。

2. フロントエンド MVC の問題点

フロントエンドフレームワーク ビュー、反応する 解決しましたデータ --> 表示問題はありますが、コントローラーはサーバーよりもはるかに複雑です。

1. 実際にユーザーの操作を処理するのはフロントエンドのControllerであり、操作シナリオが複雑でデータが変更される場面が多すぎる。

1. コンポーネントが異なれば操作や応答も異なり、各イベント ハンドラーは異なる動作を行います。
2. たとえば、サーバーは特定のインターフェイスが呼び出されているかどうかのみを知る必要があり、コントローラーがロジックを処理します。
フロントエンドが呼び出し側インターフェイスをトリガーするシナリオは複数ある場合があります。ボタンのクリックによるトリガー、タイマーによるトリガー、または他のロジックの実行後のトリガーなどです。

2. フロントエンド フレームワークは一方向のデータ フローを使用します。データを共有する場合、データは最上位コンポーネントにプロモートされ、レイヤーごとに渡されるだけですが、これは比較的面倒です。

したがって、コンテキスト (React.createContext / prvide/inject ) 共有データを提供します。しかし、特に中規模および大規模なアプリケーションでは、まだいくつかの欠点があります。

• コンテキストは、ローカルで深い階層関係を持つコンポーネント間の通信でより一般的に使用されます。データ転送、渡されたデータを変更することはほとんどありません。
• Vuex と Redux は、より完全な機能を提供するように設計されています。ステータス管理ソリューションには、タイムトラベル (デバッグ、状態回帰)、モジュール化なども含まれます。

3、フラックス

FaceBook が提案するデータ ソリューションの歴史的最大の意義は、 action コンセプト。

• action何を行うかを記述するために使用されるオブジェクトです。データ変更をトリガーする唯一の理由です。
• store 共有データを保存するデータ ウェアハウス (グローバル シングルトン モード) を表します。異なるものに依存しますaction ウェアハウス内のデータを変更します。

// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4、リダックス

存在する フレックス に基づいて紹介されましたreducerに従って使用されます action データを処理するために、処理されたデータはウェアハウスによって再保存されます。

サーバー側のMVCプロセスを比較すると、action リクエストをトリガーするのと同等、reducer コントローラーに相当します。

vuexとの比較:

使い方は簡単:

import { createStore } from "redux";

function reducer(state, action) {
    console.log(action.payload);
    if (action.type === "add") {
        return state + 1;
    } else if (action.type === "minus") {
        return state - 1;
    }
    return state;
}

const store = createStore(reducer, 10);

// 分发 action
store.dispatch({ type: "add", payload: "附加的数据" });
// 获取最新的 store
console.log(store.getState());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

比較した ヴュークス：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state, { amount }) {
       state.count += amount
    }
  },
  actions: {
    increment ({ commit }, payload) {
      // 触发 mutation
      commit('increment', payload)
    }
  }
})

// 分发 action
store.dispatch('increment', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

その上。