React系列之 Flux架構模式

whjin 發(fā)布于2019-08-20 11:21 / 2025人閱讀

摘要：原文地址由于只涉及層的處理，所以構建大型應用應該搭配一個框架模式才能使后期維護成本相對較小正是官方給出的應用架構，他推崇一種單向的數(shù)據(jù)流動模式，看下圖感受下整個流程是用戶與層交互，觸發(fā)使用進行分發(fā)觸發(fā)回調進行更新更新觸發(fā)層事件層收到信號進

原文地址：https://gmiam.com/post/react-...

由于 React 只涉及 UI 層的處理，所以構建大型應用應該搭配一個框架模式才能使后期維護成本相對較小~

Flux 正是 FB 官方給出的應用架構，他推崇一種單向的數(shù)據(jù)流動模式，看下圖感受下

整個流程是

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

Action 使用 Dispatcher 進行分發(fā)

Dispatcher 觸發(fā) Store 回調進行更新

Store 更新觸發(fā) View 層事件

View層收到信號進行更新

相對傳統(tǒng) MV* 模式，F(xiàn)lux 一個最大的特色就是單向的數(shù)據(jù)流讓事情變的可預見，看下面大型應用圖感受下不同

MV*

Flux

其實概念說了一堆還是比較難理解，大家可以配合 flux-todomvc 官方示例來直觀感受理解下

app.js 渲染的是 TodoApp.react.js 這個組件，組件內部從 TodoStore 獲取數(shù)據(jù)傳遞給子組件，同時監(jiān)聽了 TodoStore 的數(shù)據(jù)變化，F(xiàn)B 管這種頂層 View 叫做 Controller-View

TodoApp.react.js

var TodoStore = require("../stores/TodoStore");

function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };
}

var TodoApp = React.createClass({

  getInitialState: function() {
   // 獲取初始數(shù)據(jù)
    return getTodoState();
  },

  componentDidMount: function() {
    // 監(jiān)聽數(shù)據(jù)變化
    TodoStore.addChangeListener(this._onChange);
  },

  render: function() {
    return (
      
        
        
        
      
    );
  },

  _onChange: function() {
    this.setState(getTodoState());
  }

});

TodoApp.react.js 又嵌套了幾個子組件，這里我們關注下 Header.react.js 這個子組件感受一下整個流程就好了

Header.react.js 的子組件 TodoTextInput.react.js 監(jiān)聽 dom 輸入框的各種事件，觸發(fā)父組件傳遞給他的 Action 方法

Header.react.js

var TodoTextInput = require("./TodoTextInput.react");

var Header = React.createClass({
  render: function() {
    return (
      
        todos
        
      
    );
  },
  _onSave: function(text) {
    if (text.trim()){
      TodoActions.create(text);
    }
  }

});

TodoTextInput.react.js

var TodoTextInput = React.createClass({

  getInitialState: function() {
    return {
      value: this.props.value || ""
    };
  },

  render: function() /*object*/ {
    return (
      
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({
      value: ""
    });
  },

  _onChange: function(/*object*/ event) {
    this.setState({
      value: event.target.value
    });
  },

  _onKeyDown: function(event) {
    if (event.keyCode === ENTER_KEY_CODE) {
      this._save();
    }
  }

});

Action 執(zhí)行 Dispatcher 進行行為分發(fā)，這里的 Dispatcher 是 FB 實現(xiàn)的一個事情分發(fā)系統(tǒng)

TodoActions.js

var TodoActions = {
  create: function(text) {
    AppDispatcher.dispatch({
      actionType: TodoConstants.TODO_CREATE,
      text: text
    });
  },
  ...
}

Dispatcher 的分發(fā)會觸發(fā) Store 中注冊的回調，執(zhí)行對應的行為更新數(shù)據(jù)，同時觸發(fā) Store Change 事件，那么 TodoApp.react.js 中監(jiān)聽的 Store Change 事件就會觸發(fā)，重新設置組件的 state 數(shù)據(jù)，致使 View 重新 render

TodoStore.js

AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== "") {
        create(text);
        TodoStore.emitChange();
      }
      break;
    default:
      // no op
  }
});

這樣就形成了 Flux 架構的單向閉環(huán)更新流，但是寫起來還是有些繁瑣和復雜性，下一節(jié)我們來看更簡潔和優(yōu)雅的方式 Redux ~

云服務器 GPU云服務器架構之坑系列 flux架構系列之系列之二

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80524.html

React學習之認識Flux架構模式

摘要：是用戶建立客戶端應用的前端架構，它通過利用一個單向的數(shù)據(jù)流補充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結構和數(shù)據(jù)流一個單向數(shù)據(jù)流是模式的核心。 Flux是Facebook用戶建立客戶端Web應用的前端架構，它通過利用一個單向的數(shù)據(jù)流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。 ...

EasonTyler 2019-08-23 18:37 評論0 收藏0
react之redux狀態(tài)管理

摘要：傳統(tǒng)框架的缺陷傳統(tǒng)框架的缺陷模型視圖控制器的縮寫即視圖用戶看到并與之交互的界面。即模型是管理數(shù)據(jù)很多業(yè)務邏輯都在模型中完成。在的三個部件中，模型擁有最多的處理任務。所有的狀態(tài)，保存在一個對象里面唯一數(shù)據(jù)源。1、傳統(tǒng)MVC框架的缺陷模型(model)－視圖(view)－控制器(controller)的縮寫 V即View視圖：用戶看到并與之交互的界面。 M即Model模型是管理數(shù)...

J4ck_Chan 2021-11-19 11:29 評論0 收藏0
我的Android重構之旅：架構篇

摘要：是的架構的實現(xiàn)。是在年提出的一種前端架構，主要用來處理復雜的邏輯的一致性問題當時是為了解決頁面的消息通知問題。去年10月底來到了新公司，剛開始接手 Android 項目時，發(fā)現(xiàn)該項目真的是一團遭，項目開發(fā)上沒有任何架構可言，開發(fā)人員連簡單的 MVC、MVP 都不了解，Activity 及其臃腫，業(yè)務邊界也不明確，因此我決定重新分析一下當前主流的幾種開發(fā)架構，選出適合當前項目的架構形式...

mylxsw 2019-06-24 18:03 評論0 收藏0
Web和Android中的Reactive

摘要：中的常見寫法先看下這段代碼。聲明式編程，就是告訴機器你想要的是什么，讓機器想出如何去做。最獨特的特性之一，是其非侵入性的響應式系統(tǒng)。的縮寫將遍歷此對象所有的屬性。這一過程被稱為依賴收集。組件的顯示，數(shù)據(jù)的體現(xiàn)大部分都是由承載，傳遞。目錄緣起 Android開發(fā)中的常見寫法 JQuery中的常見寫法命令式編程聲明式編程 React中的常見寫法 Vue的常見寫法你肯定熟悉響應...

liangzai_cool 2019-08-26 10:27 評論0 收藏0