React_Flux入门实例

小咪咪 2022-07-12 04:56 184阅读 0赞

## Flux 架构入门实例 ##

过去一年中，前端技术大发展，最耀眼的明星就是React。本文参考的是阮大神的实例。加上自己的一些理解。React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。

Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上，使用 Flux 组织代码和安排内部逻辑，使得你的应用更易于开发和维护。

### 一、Flux 是什么？ ###

简单说，Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

![这里写图片描述][SouthEast]

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][http_127.0.0.1_8080] 。

你会看到一个按钮。这就是我们的Demo。  
![这里写图片描述][SouthEast 1]

### 三、基本概念 ###

讲解代码之前，你需要知道一些 Flux 的基本概念。  
首先，Flux将一个应用分成四个部分。

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

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

![这里写图片描述][SouthEast 2]

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

上面过程中，数据总是”单向流动”，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”模式的最大优点。  
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;
      },
    
      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 监听到这个事件，就可以查询新的状态，更新页面了。

## 八、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()实现事件接口。

[SouthEast]: /images/20220711/e8c1a97186a74055818f243130a5774e.png
[http_127.0.0.1_8080]: http://127.0.0.1:8080
[SouthEast 1]: /images/20220711/02aaaf10d88d44079caaa809c8831cd7.png
[SouthEast 2]: /images/20220711/b840386578564906bba063358ceb26a6.png