Reflux 简单使用

最新推荐文章于 2020-12-04 14:59:01 发布

Ansel_m

最新推荐文章于 2020-12-04 14:59:01 发布

阅读量986

点赞数

分类专栏： RN

本文链接：https://blog.youkuaiyun.com/majiakun1/article/details/52808852

版权

RN 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用Reflux库来创建一个简单的计数器应用。通过npm安装Reflux后，文中提供了相应的代码示例，展示了在JavaScript中设置和更新计数器状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Reflux来做计数器首先需要在项目的目录下执行 npm install -save reflux

代码如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import Reflux from  "reflux";

var Actions = Reflux.createActions(["increment"]);

var CounterStore = Reflux.createStore({
    listenables: Actions,

    init: function () {
        this.state = {count: 0};
    },

    onIncrement: function (txt) {
        this.state.count++;
        this.trigger(this.state);
    }
});

export default class TestReflux extends Component {

    constructor(props) {
        super(props);

        this.state = {
            count : 0,
        };

        this._change = this._change.bind(this);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.counter}>
                    {this.state.count}
                </Text>
            </View>
        );
    }

    componentDidMount() {
        this.unsubscribe = CounterStore.listen(this._change)
        setInterval(Actions.increment, 1000);
    }

    componentDidUnMount() {
        this.unsubscribe();
    }

    _change(data) {
        this.setState({
           count: data.count,
        });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    counter: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

AppRegistry.registerComponent('TestReflux', () => TestReflux);

效果如下：