ReactNative之Flux框架的使用

概述

React Native 可以說很是火,很是多bat的項目都在使用。不用發版就可以解決一些問題,給程序猿帶來了很是多福利。javascript


研究了一下午,把Flux框架在Android中給執行了起來。分享給你們……
關於Flux框架,官方地址是 Flux,有興趣的可以參考。
官方給出的關於Flux的解釋例如如下:css

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.html

翻譯內容:java

Flux是 Facebook 用於構建Web客戶端應用程序的應用程序架構。它使用單向數據流來補充React的組合視圖組件。與其說它是一個框架。不如說它是一種模式。你可以開始使用該框架,不用寫一些新的代碼。git

流程圖

Flux的流程圖例如如下所看到的:github

這裏寫圖片描寫敘述

項目結構

開始搭建項目,項目的文件夾結構例如如下所看到的web

項目文件夾結構圖

View

export default class O2OActDetail extends Component {
// 構造函數
    constructor(props) {
        super(props);
    }
    render() {
        return (<MyButtonController />);
    }

}

Components

MyButtonController express

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 事件操做markdown

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 一塊兒討論。

相關文章
相關標籤/搜索