React_Flux入门实例
Flux 架构入门实例过去一年中,前端技术大发展,最耀眼的明星就是React。本文参考的是阮大神的实例。加上自己的一些理解。React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。 Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上,使用 Flux 组织代码和安排内部逻辑,使得你的应用更易于开发和维护。 一、Flux 是什么?简单说,Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC 架构是同一类东西,但是更加简单和清晰。 Flux存在多种实现(至少15种),本文采用的是Facebook官方实现。 二、安装 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 。 你会看到一个按钮。这就是我们的Demo。 三、基本概念讲解代码之前,你需要知道一些 Flux 的基本概念。
Flux 的最大特点,就是数据的”单向流动“。
上面过程中,数据总是”单向流动”,Action >Dispatcher > Store,任何相邻的部分都不会发生数据的”双向流动”。这保证了流程的清晰。 读到这里,你可能感到一头雾水,OK,这是正常的。接下来,我会详细讲解每一步。 四、View(第一部分)请打开 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”组件只用来保存状态,然后将其转发给子组件。也就是说在MyButtonController中处理其生命周期相关的状态,然后将相关的状态数据传递给MyButton组件。MyButtonController的源码很简单。 // 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。后者的源码甚至更简单。 // 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”模式的最大优点。 // components/MyButtonController.jsx
// ...
createNewItem: function (event) {
ButtonActions.addNewItem('new item');
}
上面代码中,调用 五、Action每个Action都是一个对象,包含一个actionType属性(说明动作的类型)和一些其他属性(用来传递数据)。 // actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var ButtonActions = {
addNewItem: function (text) {
AppDispatcher.dispatch({
actionType: 'ADD_NEW_ITEM',text: text
});
},};
上面代码中,ButtonActions.addNewItem方法使用AppDispatcher,把动作 六、DispatcherDispatcher 的作用是将 Action 派发到 Store。你可以把它看作一个路由器,负责在 View 和 Store 之间,建立 Action 的正确传递路线。注意,Dispatcher 只能有一个,而且是全局的。
var Dispatcher = require('flux').Dispatcher;
var AppDispatcher = new Dispatcher();
var ListStore = require('../stores/ListStore');
function _handleActions(action){
switch(action.actionType) {
case 'ADD_NEW_ITEM': //对应的action操作Store中对应的数据
ListStore.addNewItemHandler(action.text);
ListStore.emitChange();
break;
default:
// no op
}
}
//登记各种Action的回调函数,Dispatcher 只用来派发 Action,不应该有其他逻辑。
ListStore.dispatchToken = AppDispatcher.register(_handleActions);
module.exports = AppDispatcher;
上面代码中,Dispatcher收到 七、StoreStore 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。 // stores/ListStore.js
var ListStore = {
items: [],getAll: function() {
return this.items;
},addNewItemHandler: function (text) {
this.items.push(text);
},emitChange: function () {
this.emit('change');
}
};
module.exports = ListStore;
上面代码中, // stores/ListStore.js
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var ListStore = assign({},EventEmitter.prototype,{
items: [],getAll: function () {
return this.items;
},emitChange: function () {
this.emit('change');
},addChangeListener: function(callback) {
this.on('change',callback);
},removeChangeListener: function(callback) {
this.removeListener('change',callback);
}
});
上面代码中,ListStore继承了 八、View (第二部分)现在,我们再回过头来修改 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 更新组件状态,从而触发重新渲染。 // components/MyButton.jsx
var React = require('react');
var MyButton = function(props) {
var items = props.items;
var itemHtml = items.map(function (listItem,i) {
return <li key={i}>{listItem}</li>;
});
return <div>
<ul>{itemHtml}</ul>
<button onClick={props.onClick}>New Item</button>
</div>;
};
module.exports = MyButton;
九. 总结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |