React系列之 Flux架構模式

whjin 發布于2019-08-20 11:21 / 2023人閱讀

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

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

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

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

整個流程是

用戶與 View 層交互，觸發 Action

Action 使用 Dispatcher 進行分發

Dispatcher 觸發 Store 回調進行更新

Store 更新觸發 View 層事件

View層收到信號進行更新

相對傳統 MV* 模式，Flux 一個最大的特色就是單向的數據流讓事情變的可預見，看下面大型應用圖感受下不同

MV*

Flux

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

app.js 渲染的是 TodoApp.react.js 這個組件，組件內部從 TodoStore 獲取數據傳遞給子組件，同時監聽了 TodoStore 的數據變化，FB 管這種頂層 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() {
   // 獲取初始數據
    return getTodoState();
  },

  componentDidMount: function() {
    // 監聽數據變化
    TodoStore.addChangeListener(this._onChange);
  },

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

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

});

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

Header.react.js 的子組件 TodoTextInput.react.js 監聽 dom 輸入框的各種事件，觸發父組件傳遞給他的 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 執行 Dispatcher 進行行為分發，這里的 Dispatcher 是 FB 實現的一個事情分發系統

TodoActions.js

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

Dispatcher 的分發會觸發 Store 中注冊的回調，執行對應的行為更新數據，同時觸發 Store Change 事件，那么 TodoApp.react.js 中監聽的 Store Change 事件就會觸發，重新設置組件的 state 數據，致使 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 架構的單向閉環更新流，但是寫起來還是有些繁瑣和復雜性，下一節我們來看更簡潔和優雅的方式 Redux ~

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

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

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

React學習之認識Flux架構模式

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

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

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

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

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

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

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

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