React系列之 Flux架构模式

whjin 发布于2019-08-20 11:21 / 1917人阅读

摘要：原文地址由于只涉及层的处理，所以构建大型应用应该搭配一个框架模式才能使后期维护成本相对较小正是官方给出的应用架构，他推崇一种单向的数据流动模式，看下图感受下整个流程是用户与层交互，触发使用进行分发触发回调进行更新更新触发层事件层收到信号进

原文地址：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架构系列之系列之二

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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