react中的flux是什么

本篇內(nèi)容主要講解“react中的flux是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react中的flux是什么”吧!

react flux是react中的類似于vuex的公共狀態(tài)管理方案，它是Facebook官方給出的應用架構，利用數(shù)據(jù)的單向流動的形式對公共狀態(tài)進行管理。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

react flux是什么？

React中的Flux

flux 是 react 中的類似于 vuex 的公共狀態(tài)管理方案，它是 Facebook 官方給出的應用架構，利用數(shù)據(jù)的單向流動的形式對公共狀態(tài)進行管理?，F(xiàn)已不推薦使用。但是為了能更好的理解 Redux 方案，還是有必要熟悉 flux 的工作流程滴~

使用 cnpm i flux -S 的方式進行安裝。

flux的組成

• View：視圖層

• Action：視圖發(fā)出的消息

• Dispatcher：派發(fā)者，用來接收Action，執(zhí)行回調函數(shù)

• Store：數(shù)據(jù)層，存放狀態(tài)，一旦發(fā)生改動，

flux的工作流程

flux 在進行數(shù)據(jù)更新時，會經(jīng)歷以下幾步：

• 用戶與 View 層交互，觸發(fā) Action

• Action 使用 dispatcher.dispatch 將Action自己的狀態(tài)發(fā)送給dispatcher

• dispatcher 通過register注冊事件，再通過Action傳入的類型來觸發(fā)對應的 Store 回調進行更新

• Store 里進行相應的數(shù)據(jù)更新，并觸發(fā) View 層事件使試圖也同步更新

• View層 收到信號進行更新

用代碼的形式詳細展開：

用戶與 View 層交互，觸發(fā) Action

組件中：

<button onClick = {this.handler.bind(this)}>更新數(shù)據(jù)</button>

Action 使用 dispatcher.dispatch 將Action自己的狀態(tài)發(fā)送給dispatcher

組件中：

// 步驟1 事件的回調函數(shù)
handler(){
    // action是一個描述，定義一個獨特的常量，用來描述你的數(shù)據(jù)更改的方式。
    let action = {
        type:"NUM_ADD"
    };
    dispatcher.dispatch(action)
}

dispatcher 通過 dispatcher.register 注冊事件，再通過Action傳入的類型來觸發(fā)對應的 Store 回調進行更新

Dispatcher構造函數(shù)依賴的flux需要單獨下載：cnpm i flux -S

dispatcher 文件中：

import {Dispatcher} from 'flux'
import store from './index'
const dispatcher = new Dispatcher();
// register方法注冊事件，通過action傳入的類型來觸發(fā)對應的 Store 回調進行更新
dispatcher.register((action)=>{
    switch(action.type){
        case "NUM_ADD": 
            /* 調用相應的store里定義好的方法 */
            store.handleAdd();
            break;
        case "Num_REDUCE":
            store.handleReduce()
            break;
    }
})
export default dispatcher;

Store 里進行相應的數(shù)據(jù)更新，并觸發(fā) View 層事件使試圖也同步更新

事件訂閱對象的封裝：Observer事件機制封裝

store文件中：

import observer from '../observer'
let store = Object.assign(observer,{
    state:{
        n:10
    },
    getState(){
        return this.state;
    },
    // store 中的action對應的處理方法，更新store的數(shù)據(jù)，并觸發(fā)更新視圖的方法
    handleAdd(){
        this.state.n ++;
        this.$emit("update")
    },
})
export default store;

View層 收到信號進行更新

在 constructor 里用 $on 做事件訂閱，并定義一個做狀態(tài)更新的方法作為回調：

組件中：

// ...
// 在這里進行事件訂閱，以讓視圖得到更新
constructor(){
    super();
    this.state = store.getState();
    store.$on("update",this.handleUpdate.bind(this))
}
// ...
// 事件訂閱的回調，更新視圖方法
handleUpdate(){
    this.setState(store.getState());
}

至此，在第4步中觸發(fā)的方法在此執(zhí)行，數(shù)據(jù)就得到了更新。一個完整的flux體系更新數(shù)據(jù)的流程就完成了。

flux的缺點

• 頻繁的引入 store

• UI組件和容器組件的拆分過于復雜

• 無法對多個store進行管理

• 每個需更新視圖的組件都需要進行更新函數(shù)的綁定

... ...

所以，現(xiàn)在在工作中已經(jīng)不推薦用flux了。取而代之的是一套相對更完善的解決方案：Redux。

到此，相信大家對“react中的flux是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！