ReactNative之Flux框架的使用-白红宇

ReactNative之Flux框架的使用

阅读量：6988 次

发布时间：2019-06-27

本文共 3841 字，大约阅读时间需要 12 分钟。

概述

React Native 能够说非常火，非常多bat的项目都在使用。不用发版就能够解决一些问题，给程序猿带来了非常多福利。

研究了一下午，把Flux框架在Android中给执行了起来。分享给大家……

关于Flux框架，官方地址是，有兴趣的能够參考。

官方给出的关于Flux的解释例如以下：

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

翻译内容：

Flux是 Facebook 用于构建Web客户端应用程序的应用程序架构。它使用单向数据流来补充React的组合视图组件。与其说它是一个框架。不如说它是一种模式。你能够開始使用该框架，不用写一些新的代码。

流程图

Flux的流程图例如以下所看到的：

项目结构

開始搭建项目，项目的文件夹结构例如以下所看到的

项目文件夹结构图

View

export default class O2OActDetail extends Component {
      // 构造函数    constructor(props) {        super(props);    }    render() {        return (
      );    }}

Components

MyButtonController

export default class MyButtonController extends Component {
          constructor(props) {        super(props);        this._onChange = this._onChange.bind(this);        this.state = {            items: ListStore.getAll()        }    }    componentDidMount() {        ListStore.addChangeListener(this._onChange);    }    componentWillUnmount() {        ListStore.removeChangeListener(this._onChange);    }    _onChange() {        var items = ListStore.getAll();        Util.log("MyButton=====>_onChange-->" + items.length)        this.setState({            items: ListStore.getAll()        });    }    render() {        return (
      );    }}

MyButton 显示的View

export default class MyButton extends Component {// 构造函数    constructor(props) {        super(props);        this.createNewItem = this.createNewItem.bind(this);        var items = props.items;        Util.log("MyButton=====>items-->" + items.length)    }    createNewItem() {        ButtonActions.addNewItem('data');    }    render() {        var itemHtml = this.props.items.map(function (listItem, i) {            return listItem + i;        });        return (            
                      
       
         {                    this.createNewItem()                }} activeOpacity={1.0}>                    
                                
         
          測试button
                             
                        
                       
                           
        
         {itemHtml}
                        
                   
      );    }}

actions

ButtonActions 事件操作

var ButtonActions = {    addNewItem (text) {        Util.log("MyButton=====>ButtonActions-->" + text)        AppDispatcher.dispatch({            actionType: 'ADD_NEW_ITEM',            text: text        });    },};module.exports = ButtonActions;

Dispatcher

AppDispatcher负责分发事件

/** * Created by shenyiya on 2017/2/14. */var ListStore = require('../../o2o/stores/ListStore');var Dispatcher = require('flux').Dispatcher;var AppDispatcher = new Dispatcher();AppDispatcher.register((action) => {    switch (action.actionType) {        case 'ADD_NEW_ITEM':            ListStore.addNewItemHandler(action.text);            ListStore.emitChange();            break;        default:        // no op    }});module.exports = AppDispatcher;

Stores

ListStore负责处理数据

/** * Created by shenyiya on 2017/2/14. */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);    }});module.exports = ListStore;

到这里位置。该项目的全部结构搭建完毕。