准备好了用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;
    


  • 详细点写写呗,字数补丁



  • 定义方法怎么没用ES6