react中flux是什麼意思

在react中，flux是一個公共狀態管理方案，是用來建構客戶端Web應用的應用架構，利用資料的單向流的形式來管理公共狀態。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

什麼是flux

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

它更像一個模式而不是一個正式的框架，開發者不需要太多的新程式碼就可以快速的上手Flux。

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

flux的組成

• #View：視圖圖層

• ##Action ：視圖發出的訊息

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

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

flux的工作流程

Flux 的最大特點，就是資料的"單向流動"。

• 使用者造訪View

• View 發出使用者的Action

• Dispatcher 收到Action，要求Store 進行對應的更新

• Store 更新後，發出一個"change"事件

• View 收到"change"事件後，更新頁面

上面過程中，資料總是"單向流動"，任何相鄰的部分都不會發生資料的"雙向流動"。這保證了流程的清晰。

讀到這裡，你可能感到一頭霧水，OK，這是正常的。接下來，我會詳細講解每一步。

View（第一部分）

請開啟 Demo 的首頁

index.jsx ，你會看到只載入了一個元件。

// index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var MyButtonController = require('./components/MyButtonController');

ReactDOM.render(
  <MyButtonController/>,
  document.querySelector(&#39;#example&#39;)
);

上面程式碼中，你可能注意到了，元件的名字不是

MyButton，而是 MyButtonController。這是為什麼？

這裡，我採用的是 React 的 controller view 模式。 "controller view"組件只用來保存狀態，然後將其轉發給子組件。

MyButtonController的原始碼很簡單。

// components/MyButtonController.jsx
var React = require('react');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      onClick={this.createNewItem}
    />;
  }
});

module.exports = MyButtonController;

在上面程式碼中，

MyButtonController將參數傳給子元件MyButton。後者的原始碼甚至更簡單。

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  return <div>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

上面程式碼中，你可以看到

MyButton是一個純元件（即不含任何狀態），從而方便了測試和重複使用。這就是"controll view"模式的最大優點。

MyButton只有一個邏輯，就是一旦使用者點擊，就呼叫this.createNewItem 方法，向Dispatcher發出一個Action。

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  }

上面程式碼中，呼叫

createNewItem方法，會觸發名為addNewItem的Action。

Action

每個Action都是一個對象，包含一個

actionType屬性（說明動作的類型）和一些其他屬性（用來傳遞資料）。

在這個Demo裡面，

ButtonActions 物件用來存放所有的Action。

// actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');

var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },
};

上面程式碼中，

ButtonActions.addNewItem方法使用AppDispatcher，把動作ADD_NEW_ITEM派發到Store。

Dispatcher

Dispatcher 的角色是將 Action 派發到 Store、。你可以把它看成一個路由器，負責在 View 和 Store 之間，建立 Action 的正確傳遞路線。注意，Dispatcher 只能有一個，而且是全域的。

Facebook官方的 Dispatcher 實作輸出一個類，你要寫一個

AppDispatcher.js，產生 Dispatcher 實例。

// dispatcher/AppDispatcher.js
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

AppDispatcher.register()方法用來登記各種Action的回呼函數。

// dispatcher/AppDispatcher.js
var ListStore = require('../stores/ListStore');

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

上面程式碼中，Dispatcher收到

ADD_NEW_ITEM動作，就會執行回呼函數，並對ListStore進行操作。

記住，Dispatcher 只用來派發 Action，不應該有其他邏輯。

Store

Store 儲存整個應用程式的狀態。它的角色有點像是 MVC 架構中的Model 。

在我們的 Demo 中，有一個

ListStore，所有資料都存放在那裡。

// stores/ListStore.js
var ListStore = {
  items: [],

  getAll: function() {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  }
};

module.exports = ListStore;

上面程式碼中，

ListStore.items用來儲存條目，ListStore.getAll()用來讀取所有條目，ListStore.emitChange( )用來發出一個"change"事件。

由於 Store 需要在變動後向 View 發送"change"事件，因此它必須實作事件介面。

// stores/ListStore.js
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var ListStore = assign({}, EventEmitter.prototype, {
  items: [],

  getAll: function () {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  },

  addChangeListener: function(callback) {
    this.on('change', callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener('change', callback);
  }
});

上面代码中，ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。

Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。

View （第二部分）

现在，我们再回过头来修改 View ，让它监听 Store 的 change 事件。

// components/MyButtonController.jsx
var React = require('react');
var ListStore = require('../stores/ListStore');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  getInitialState: function () {
    return {
      items: ListStore.getAll()
    };
  },

  componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    ListStore.removeChangeListener(this._onChange);
  },

  _onChange: function () {
    this.setState({
      items: ListStore.getAll()
    });
  },

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }
});

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this._onChange 更新组件状态，从而触发重新渲染。

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  var items = props.items;
  var itemHtml = items.map(function (listItem, i) {
    return <li key={i}>{listItem}</li>;
  });

  return <div>
    <ul>{itemHtml}</ul>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

推荐学习：《react视频教程》

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