理解Flux架构

本文摘自《Flux架构入门教程》和《谈一谈我对 React Flux 架构的理解》。也有自己的观点和总结。转载请注明出处。

 

一、Flux架构描述

　　1. Flux是什么

　　Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快速的上手Flux。

　　简单说，Flux 是一种架构思想，专门解决软件的结构问题。

　　2. 基本概念

　　dispatcher

　　事件调度中心，flux模型的中心枢纽，管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时，通过已注册的回调函数，将Action提供的数据负载发送给应用中的所有Store。应用层级单例！！

　　store

　　负责封装应用的业务逻辑跟数据的交互。

• Store中包含应用所有的数据

• Store是应用中唯一的数据发生变更的地方

• Store中没有赋值接口---所有数据变更都是由dispatcher发送到store，新的数据随着Store触发的change事件传回view。Store对外只暴露getter，不允许提供setter！！禁止在任何地方直接操作Store。

　　view

• controller-view 可以理解成MVC模型中的controller，它一般由应用的顶层容器充当，负责从store中获取数据并将数据传递到子组件中。简单的应用一般只有一个controller-view，复杂应用中也可以有多个。controller-view是应用中唯一可以操作state的地方(setState())

• view(UI组件) ui-component 职责单一只允许调用action触发事件，数据从由上层容器通过属性传递过来。

　　其他

　　action creators 作为dispatcher的辅助函数，通常可以认为是Flux中的第四部分。ActionCreators是相对独立的，它作为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。

 

　　简单讲，Flux将一个应用分成四个部分。

• View： 视图层
• Action（动作）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

 

　　

 

　　Flux 的最大特点，就是数据的"单向流动"。

1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面

 

二、通过代码去理解Flux 

　　1. 安装demo　　

　　为了便于讲解，我写了一个Demo（摘自阮一峰）。请先安装一下。

$ git clone https://github.com/ruanyf/extremely-simple-flux-demo.git $ cd extremely-simple-flux-demo && npm install $ npm start 

　　然后，访问 http://127.0.0.1:8080 

　　

　　2. index.jsx

　　请打开 Demo 的index.jsx ，你会看到只加载了一个组件。

// index.jsx
var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = require('./components/MyButtonController'); ReactDOM.render( <MyButtonController/>, document.querySelector('#example') ); 

　　上面代码中，你可能注意到了，组件的名字不是 MyButton，而是 MyButtonController。这是为什么？

　　这里，我采用的是 React 的 controller view 模式。"controller view"组件只用来保存状态，然后将其转发给子组件。

 

　　3. MyButtonController.jsx

// 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.

 

　　4. MyButton.jsx

// 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。

 

　　5. ButtonActions.js

　　每个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。

 

　　6. AppDispatcher.js

　　Dispatcher 的作用是将 Action 派发到 Store。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。注意，Dispatcher 只能有一个，而且是全局的。

　　Facebook官方的Dispatcher输出一个类，你要写一个AppDispatcher.js，生成 Dispatcher 实例。

// dispatcher/AppDispatcher.js

var Dispatcher = require('flux').Dispatcher;

var AppDispatcher = new Dispatcher();
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 } }) 

　　AppDispatcher.register()方法用来登记各种Action的回调函数。

　　上面代码中，Dispatcher收到ADD_NEW_ITEM动作，就会执行回调函数，对ListStore进行操作。记住，Dispatcher 只用来派发 Action，不应该有其他逻辑。

 

　　7. ListStore.js

　　Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。在我们的 Demo 中，有一个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 监听到这个事件，就可以查询新的状态，更新页面了。

 

　　8. 修改MyButtonController.jsx

　　现在，我们再回过头来修改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 更新组件状态，从而触发重新渲染。

 

三、这些代码是如何工作的

　　我对这个Demo的结构及流程画了张图：

　　

 

　　官方讲解流程：

 

　　

 

转载于:https://www.cnblogs.com/lishuxue/p/6125136.html