React_Flux入门实例

前端之家收集整理的这篇文章主要介绍了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将一个应用分成四个部分。

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

Flux 的最大特点,就是数据的”单向流动“。

  • 用户访问 View
  • View 发出用户的 Action
  • Dispatcher 收到 Action,要求 Store 进行相应的更新
  • Store 更新后,发出一个”change”事件
  • View 收到”change”事件后,更新页面

上面过程中,数据总是”单向流动”,Action >Dispatcher > Store,任何相邻的部分都不会发生数据的”双向流动”。这保证了流程的清晰。

读到这里,你可能感到一头雾水,OK,这是正常的。接下来,我会详细讲解每一步。

@H_403_77@四、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”模式的最大优点。
MyButton只有一个逻辑,就是一旦用户点击,就调用this.createNewItem 方法,向Dispatcher发出一个Action。

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  }

上面代码中,调用createNewItem方法,会触发名为addNewItem的Action。

五、Action

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

六、Dispatcher

Dispatcher 的作用是将 Action 派发到 Store。你可以把它看作一个路由器,负责在 View 和 Store 之间,建立 Action 的正确传递路线。注意,Dispatcher 只能有一个,而且是全局的。
Facebook官方的 Dispatcher 实现输出一个类,你要写一个AppDispatcher.js生成 Dispatcher 实例。

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

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收到ADD_NEW_ITEM动作,就会执行回调函数,对ListStore进行操作。
记住,Dispatcher 只用来派发 Action,不应该有其他逻辑。

七、Store

Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。
在我们的 Demo 中,有一个ListStore,所有数据都存放在那里。

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

上面代码中,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;
  },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 监听到这个事件,就可以查询新的状态,更新页面了。

八、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;

九. 总结

  • 数据流是单向流动的。Store中给定初始数据,提供数据的getter()方法
  • View上有交互,有数据更新就向Dispatcher发出一个Action。Action 中指定actionType和更新的数据。并通过AppDispatcher.dispatch(action)分发出去。并在组件渲染完成后监听Store中数据的变化addChangeListener(),在组件销毁时移除监听的事件removeChangeListener().
  • Dispatcher登记各种Action的回调函数,根据不同的actionType,调用ListStore的方法对数据进行更新,并触发emitChange事件。
  • Store中自定义事件:addChangeListener(),removeChangeListener(),emitChange()实现事件接口。

猜你在找的React相关文章