react flux是什麼

react flux是react中的類似vuex的公共狀態管理方案，它是Facebook官方給出的應用架構，利用資料的單向流動的形式對公共狀態進行管理。

本文操作環境：Windows7系統、react17.0.1、Dell G3。

react flux是什麼？

React中的Flux

flux 是react 中的類似於vuex 的公共狀態管理方案，它是Facebook 官方給出的應用架構，利用資料的單向流動的形式對公共狀態進行管理。現已不建議使用。但為了能更好的理解 Redux 方案，還是有必要熟悉 flux 的工作流程滴~

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

flux的組成

• View：視圖層

• Action：視圖所發出的訊息

• Dispatcher：派發者，用來接收Action，執行回呼函數

• Store：資料層，存放狀態，一旦發生改動，

flux的工作流程

#flux 進行資料更新時，會經歷以下幾個步驟：

• 使用者與View 層交互，觸發Action

• #Action 使用dispatcher.dispatch 將Action自己的狀態傳送給dispatcher

#dispatcher 透過register註冊事件，再透過Action傳入的型別來觸發對應的Store 回呼進行更新

Store 裡進行對應的資料更新，並觸發View 層事件使試圖也同步更新

View層收到訊號進行更新

#用程式碼的形式詳細展開：

#使用者與View 層交互，觸發Action

元件中：

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

Action 使用dispatcher.dispatch 將Action自己的狀態傳送給dispatcher

元件中：

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

dispatcher 透過dispatcher.register 註冊事件，再透過Action傳入的型別來觸發對應的Store 回呼進行更新

Dispatcher建構函式所依賴的flux需要單獨下載：cnpm i flux -S

• dispatcher 檔案中：

  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;

  Store 裡進行對應的資料更新，並觸發View 層事件使試圖也同步更新
• 事件訂閱物件的封裝：Observer事件機制封裝
  store檔案中：

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;

• View層收到訊號進行更新
  在constructor 裡用$on 做事件訂閱，並定義一個做狀態更新的方法作為回呼：
• 元件中：

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

  至此，在第4步中觸發的方法在此執行，資料就得到了更新。一個完整的flux體系更新資料的流程就完成了。

  flux的缺點

  頻繁的引入store

  #####UI元件和容器元件的拆分過於複雜############無法管理多個store#############每個需更新視圖的元件都需要更新函數的綁定# ###########... ...######所以，現在在工作上已經不建議用flux了。取而代之的是一套相對更完善的解決方案：Redux。 ######推薦學習：《###react影片教學###》###

  以上是react flux是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！