ReactNative之Flux框架的使用

• • 概述
  • 流程图
  • 项目结构
    • View
    • Components
    • actions
    • Dispatcher
    • Stores
  • 感谢

概述

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

研究了一下午，把Flux框架在Android中给执行了起来。分享给你们……
关于Flux框架，官方地址是 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 (<MyButtonController />);
    }

}

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
            items={this.state.items}
        />);
    }
}

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 ( <View> <TouchableOpacity onPress={() => { this.createNewItem() }} activeOpacity={1.0}> <View style={{ width: 100, height: 40, borderWidth: 1, borderRadius: 4, borderColor: "#f35353", margin: 50, alignItems: "center" }}> <Text style={{alignItems: "center"}}>測试button</Text> </View> </TouchableOpacity> <View style={{flexDirection: "row"}}> <Text style={{fontSize: 34, marginLeft: 100}}>{itemHtml}</Text> </View> </View>); } }

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;

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

---

感谢

感谢 阮一峰 做者的博客《Flux 架构新手教程》指导 Flux 架构新手教程 假设你们有问题可以加入个人微信 shenyiya 一块儿讨论。