反応フラックスとは何ですか

react flux は、react の vuex に似たパブリック状態管理ソリューションで、Facebook によって公式に提供されたアプリケーション アーキテクチャであり、一方向のデータ フローを使用してパブリック状態を管理します。

この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。

反応フラックスとは何ですか?

Flux in React

flux は、react の vuex に似たパブリック状態管理ソリューションです。Facebook によって公式に提供されたアプリケーション アーキテクチャです。パブリックを使用します。ステータスは一方向のデータの流れの形で管理されます。現在は非推奨となっています。ただし、Redux ソリューションをより深く理解するには、flux のワークフローに慣れる必要があります~

cnpm i flux -S を使用してインストールします。

フラックスの構成

• ビュー: ビュー レイヤー

• アクション: ビューによって送信されたメッセージ

• Dispatcher: アクションを受信して​​コールバック関数を実行するために使用されるディスパッチャー

• Store: データ層、ストレージ状態、変更が発生した場合

flux ワークフロー

flux はデータを更新するときに次の手順を実行します:

• ユーザーはビュー レイヤーと対話し、アクションをトリガーします。

• アクションは、dispatcher.dispatch を使用して、アクション自体のステータスをディスパッチャーに送信します

• #dispatcher は register を通じてイベントを登録し、対応する Store コールバックをトリガーして、Action によって渡された型を通じて更新します

• 対応するデータが Store 内で更新され、View をトリガーしますレイヤー イベントにより、ビューが同期的に更新されます。

• ビュー レイヤーは信号を受信し、それを更新します。

次の形式で詳細に展開します。コード:

ユーザーはビュー レイヤーと対話し、アクション

コンポーネントをトリガーします。

<button onClick = {this.handler.bind(this)}>更新数据</button>

アクションは、dispatcher.dispatch を使用してアクション自身のステータスをディスパッチャーに送信します

コンポーネント:

// 步骤1 事件的回调函数
handler(){
    // action是一个描述，定义一个独特的常量，用来描述你的数据更改的方式。
    let action = {
        type:"NUM_ADD"
    };
    dispatcher.dispatch(action)
}

dispatcher は、dispatcher.register を通じてイベントを登録し、Action で渡された型を使用して、更新用の対応する Store コールバックをトリガーします。

Dispatcher コンストラクターが依存するフラックスを個別にダウンロードする必要があります: cnpm i flux -S

ディスパッチャー ファイル:

import {Dispatcher} from 'flux'
import store from './index'
const dispatcher = new Dispatcher();
// register方法注册事件，通过action传入的类型来触发对应的 Store 回调进行更新
dispatcher.register((action)=>{
    switch(action.type){
        case "NUM_ADD": 
            /* 调用相应的store里定义好的方法 */
            store.handleAdd();
            break;
        case "Num_REDUCE":
            store.handleReduce()
            break;
    }
})
export default dispatcher;

対応するデータがストア内で更新され、ビュー レイヤー イベントがトリガーされるため、試行も行われます。同期更新

#イベント サブスクリプション オブジェクトのカプセル化: オブザーバー イベント メカニズムのカプセル化

ストア ファイル内:

import observer from '../observer'
let store = Object.assign(observer,{
    state:{
        n:10
    },
    getState(){
        return this.state;
    },
    // store 中的action对应的处理方法，更新store的数据，并触发更新视图的方法
    handleAdd(){
        this.state.n ++;
        this.$emit("update")
    },
})
export default store;

ビュー レイヤーは信号を受信し、更新します

イベント サブスクリプションのコンストラクターで $on を使用し、ステータス更新のメソッドをコールバックとして定義します。

コンポーネント内:

// ...
// 在这里进行事件订阅，以让视图得到更新
constructor(){
    super();
    this.state = store.getState();
    store.$on("update",this.handleUpdate.bind(this))
}
// ...
// 事件订阅的回调，更新视图方法
handleUpdate(){
    this.setState(store.getState());
}

この時点で、手順 4 でトリガーされるメソッドは次のとおりです。ここで実行され、データが更新されます。フラックス システム内のデータを更新する完全なプロセスが完了しました。

flux のデメリット

ストアの頻繁な導入
UI コンポーネントとコンテナ コンポーネントの分解複雑すぎます
複数のストアを管理できません
ビューを更新する必要があるすべてのコンポーネントを更新関数にバインドする必要があります
... ...

したがって、職場でフラックスを使用することは推奨されなくなりました。代わりに、比較的完全なソリューションである Redux があります。

推奨される学習: 「

react ビデオ チュートリアル

」

以上が反応フラックスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。