ホームページ  >  記事  >  ウェブフロントエンド  >  反応フラックスとは何ですか

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

藏色散人
藏色散人オリジナル
2021-11-24 14:39:512310ブラウズ

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 &#39;flux&#39;
import store from &#39;./index&#39;
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 &#39;../observer&#39;
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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。