成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React系列之 Flux架構(gòu)模式

whjin / 2026人閱讀

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

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

由于 React 只涉及 UI 層的處理，所以構(gòu)建大型應(yīng)用應(yīng)該搭配一個(gè)框架模式才能使后期維護(hù)成本相對較小~

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

整個(gè)流程是

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

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

Dispatcher 觸發(fā) Store 回調(diào)進(jìn)行更新

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

View層 收到信號(hào)進(jìn)行更新

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

MV*

Flux

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

app.js 渲染的是 TodoApp.react.js 這個(gè)組件，組件內(nèi)部從 TodoStore 獲取數(shù)據(jù)傳遞給子組件，同時(shí)監(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 又嵌套了幾個(gè)子組件，這里我們關(guān)注下 Header.react.js 這個(gè)子組件感受一下整個(gè)流程就好了

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 (
      
    );
  },
  _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 進(jìn)行行為分發(fā)，這里的 Dispatcher 是 FB 實(shí)現(xiàn)的一個(gè)事情分發(fā)系統(tǒng)

TodoActions.js

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

Dispatcher 的分發(fā)會(huì)觸發(fā) Store 中注冊的回調(diào)，執(zhí)行對應(yīng)的行為更新數(shù)據(jù)，同時(shí)觸發(fā) Store Change 事件，那么 TodoApp.react.js 中監(jiān)聽的 Store Change 事件就會(huì)觸發(fā)，重新設(shè)置組件的 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 架構(gòu)的單向閉環(huán)更新流，但是寫起來還是有些繁瑣和復(fù)雜性，下一節(jié)我們來看更簡潔和優(yōu)雅的方式 Redux ~

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80524.html

相關(guān)文章

  • React學(xué)習(xí)之認(rèn)識(shí)Flux架構(gòu)模式

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

    EasonTyler 評論0 收藏0

  • react之redux狀態(tài)管理

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

    J4ck_Chan 評論0 收藏0

  • 我的Android重構(gòu)之旅：架構(gòu)篇

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

    mylxsw 評論0 收藏0

  • Web和Android中的Reactive

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

    liangzai_cool 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<