ホームページ > 記事 > ウェブフロントエンド > 反応フラックスとは何ですか
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 を使用して、アクション自体のステータスをディスパッチャーに送信します
<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 のデメリット
したがって、職場でフラックスを使用することは推奨されなくなりました。代わりに、比較的完全なソリューションである Redux があります。
推奨される学習: 「
react ビデオ チュートリアル以上が反応フラックスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。