准备好了用mobx来换掉flux/redux么。。。



  • 出一个mobx快速了解的小例子,很好看懂

    import React, {Component} from 'react';
    import {
        View,
        Text,
        TouchableHighlight,
    } from 'react-native';
    import {observer} from 'mobx-react/native';
    import {observable} from 'mobx';
    const countStore = observable({
      counter: 0
    });
    countStore.increment = function () {
        this.counter++;
    };
    countStore.decrement = function() {
        this.counter--;
    };
    countStore.incrementAsync = function() {
      setTimeout(() => {
        this.counter++;
        }, 1500);
    };
    class Counter extends Component {
        
        render () {
            return (
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'space-around',
                    paddingVertical: 20,
                }}>
                    <TouchableHighlight onPress={ () => this.props.store.increment() }>
                        <Text>+</Text>
                    </TouchableHighlight>
    
                    <Text> { this.props.store.counter } </Text>
    
                    <TouchableHighlight onPress={ () => this.props.store.decrement() }>
                        <Text>-</Text>
                    </TouchableHighlight>
    
                    <TouchableHighlight onPress={ () => this.props.store.incrementAsync() }>
                        <Text>异步</Text>
                    </TouchableHighlight>
                </View>
            );
        }
    }
    ObservableCounter = observer(Counter);
    class Devs extends Component {
        render () {
            return (
                <View style={{ flex: 1 }}>
                    <Text>Devs Page:</Text>
    
                    <ObservableCounter store={countStore} />
                </View>
            );
        }
    }
    export default Devs;
    

  • administrators

    详细点写写呗,字数补丁



  • 定义方法怎么没用ES6


登录后回复