Mobx初体验

MobX是一个非常直观的状态管理库,相比于其他的状态管理库,比如Flux、Alt、Redux和Reflux等,它的使用非常简单,相信你会很快地爱上它。

react 关注的状态(state)到视图(view)的问题。而 mobx 关注的是状态仓库(store)到的状态(state)的问题。

环境配置

首先,让我们来新建一个ReactNative工程
react-native init ReactNativeMobX
接着,安装我们所需要的依赖库:mobxmobx-react
npm i mobx mobx-react --save
为了使用ES7的语法,我们还需要安装两个babel插件
npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev

现在你的工程目录下应该有.babelrc文件(如果没有可自行创建),修改文件的内容为:

{ 
 "presets": ["react-native"],  
 "plugins": ["transform-decorators-legacy"]
}

关于babel的更多知识可参考点我查看详细

至此,你的mobx环境就搭建好了,接下来让我们来编写相应的代码

代码编写

在程序的根目录下创建一个名app的文件夹,在app路径下创建一个名为mobx的文件夹,在mobx文件夹中创建一个名为listStore.js的文件:

import {observable} from 'mobx';

let index = 0;

class ObservableListStore {
    @observable list = [];

    addListItem = (item) => {
        this.list.push({
            name: item,
            items: [],
            index
        });
        index++;
    };

    removeListItem = (item) => {
        this.list = this.list.filter((e) => {
            return e.index !== item.index;
        });
    };

    addItem(item, name){
        this.list.forEach((e) => {
            if (e.index === item.index){
                e.items.push(name);
            }
        })
    };
}

const observableListStore = new ObservableListStore();
export default observableListStore;
  1. 导入了observable(被观察者)
  2. 创建了一个新的类,名为ObservableListStore
  3. 定义了一个list数组,但是这个数组有些特殊,它是被@observable修饰过的,用到了ES7的语法,表示该类的list属性可被观察者(observer)观察,也就是观察者模式。如果对@用法不熟悉,可参考点我查看详细
  4. 创建了list的三个操作方法
  5. 实例化了ObservableListStore类
  6. export实例化的对象

现在,我们创建了一个状态仓库(store),接下来我们来修改根目录下的index.android.js(index.ios.js)文件,让它应用我们之前创建的store,然后创建一个navigation

import React, { Component } from 'react';
import App from './app/App';
import ListStore from './app/mobx/listStore';

import {
  AppRegistry,
  Navigator
} from 'react-native';

export default class MobxDemo extends Component {
    renderScene = (route, navigator) => {
      return <route.component {...route.passProps} navigator={navigator} />;
    };

    configureScene = (route, routeStack) => {
      if (route.type === 'Modal'){
        return Navigator.SceneConfigs.FloatFromBottom;
      }
      return Navigator.SceneConfigs.PushFromRight;
    }

    render(){
      return (
          <Navigator
            configureScene={this.configureScene}
            renderScene={this.renderScene}
            initialRoute={{
              component: App,
              passProps: {
                store: ListStore
              }
            }}/>
      );
    }
}

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

我们做的很简单,创建一个navigator,并初始让其跳转至App组件(稍后介绍),并为其传入ListStore

现在,让我们来创建App组件。它将是一个非常大的组件,但是现在,我们仅仅是搭建一个基础的列表接口,以便让我们可以对列表的条目可以进行操作(增删等)。在这里,store作为App的一个props传入进来,我们就可以很方便地使用它:

import React, { Component } from 'react'
import { View, Text, TextInput, TouchableHighlight, StyleSheet } from 'react-native'
import {observer} from 'mobx-react/native'
import NewItem from './NewItem'

@observer
class TodoList extends Component {
    constructor () {
        super()
        this.state = {
            text: '',
            showInput: false
        }
    }
    toggleInput () {
        this.setState({ showInput: !this.state.showInput })
    }
    addListItem () {
        this.props.store.addListItem(this.state.text)
        this.setState({
            text: '',
            showInput: !this.state.showInput
        })
    }
    removeListItem (item) {
        this.props.store.removeListItem(item)
    }
    updateText (text) {
        this.setState({text})
    }
    addItemToList (item) {
        this.props.navigator.push({
            component: NewItem,
            type: 'Modal',
            passProps: {
                item,
                store: this.props.store
            }
        })
    }
    render() {
        const { showInput } = this.state
        const { list } = this.props.store
        return (
            <View style={{flex:1}}>
                <View style={styles.heading}>
                    <Text style={styles.headingText}>My List App</Text>
                </View>
                {!list.length ? <NoList /> : null}
                <View style={{flex:1}}>
                    {list.map((l, i) => {
                        return <View key={i} style={styles.itemContainer}>
                            <Text
                                style={styles.item}
                                onPress={this.addItemToList.bind(this, l)}>{l.name.toUpperCase()}</Text>
                            <Text
                                style={styles.deleteItem}
                                onPress={this.removeListItem.bind(this, l)}>Remove</Text>
                        </View>
                    })}
                </View>
                {!showInput &&  <TouchableHighlight
                    underlayColor='transparent'
                    onPress={
                  this.state.text === '' ? this.toggleInput.bind(this)
                  : this.addListItem.bind(this, this.state.text)
                 }
                    style={styles.button}
                >
                    <Text style={styles.buttonText}>
                        {this.state.text === '' && '+ New List'}
                        {this.state.text !== '' && '+ Add New List Item'}
                    </Text>
                </TouchableHighlight>}

                {showInput && <View style={{flexDirection: 'row'}}>
                    <TextInput
                        style={styles.input}
                        onChangeText={(text) => this.updateText(text)} />
                    <TouchableHighlight
                        style={styles.sureBtn}
                        onPress={
                  this.state.text === '' ? this.toggleInput.bind(this)
                  : this.addListItem.bind(this, this.state.text)
                } >
                        <Text>确定</Text>
                    </TouchableHighlight>
                </View>}
            </View>
        );
    }
}

const NoList = () => (
    <View style={styles.noList}>
        <Text style={styles.noListText}>No List, Add List To Get Started</Text>
    </View>
)

const styles = StyleSheet.create({
    itemContainer: {
        borderBottomWidth: 1,
        borderBottomColor: '#ededed',
        flexDirection: 'row',
        justifyContent:'space-between'
    },
    item: {
        color: '#156e9a',
        fontSize: 18,
        flex: 1,
        padding: 20
    },
    deleteItem: {
        padding: 20,
        color: 'rgba(240,1,7,1.0)',
        fontWeight: 'bold',
        marginTop: 3
    },
    button: {
        height: 70,
        justifyContent: 'center',
        alignItems: 'center',
        borderTopWidth: 1,
        borderTopColor: '#156e9a'
    },
    buttonText: {
        color: '#156e9a',
        fontWeight: 'bold'
    },
    heading: {
        height: 80,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#156e9a'
    },
    headingText: {
        color: '#156e9a',
        fontWeight: 'bold'
    },
    input: {
        flex:1,
        height: 70,
        backgroundColor: '#f2f2f2',
        padding: 20,
        color: '#156e9a'
    },
    noList: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    noListText: {
        fontSize: 22,
        color: '#156e9a'
    },
    sureBtn: {
        width: 70,
        height: 70,
        justifyContent: 'center',
        alignItems: 'center',
        borderTopWidth: 1,
        borderColor: '#ededed'
    },
})

export default TodoList
  1. 导入observer(观察者)
  2. 我们使用@observer修饰符来修饰TodoList类,它可以保证当其相关联的数据变化时,该组件会重新渲染
  3. 我们导入了一个新的组件NewItem(稍后介绍),当我们想为我们的list添加新的item时,它将会被调用
  4. 定义了三个功能函数addListItem、removeListItem、addItemToList

最后,让我们来创建最后一个组件NewItem

import React, { Component } from 'react'
import { View, Text, StyleSheet, TextInput, TouchableHighlight } from 'react-native'

class NewItem extends Component {
    constructor (props) {
        super(props)
        this.state = {
            newItem: ''
        }
    }
    addItem () {
        if (this.state.newItem === '') return
        this.props.store.addItem(this.props.item, this.state.newItem)
        this.setState({
            newItem: ''
        })
    }
    updateNewItem (text) {
        this.setState({
            newItem: text
        })
    }
    render () {
        const { item } = this.props
        return (
            <View style={{flex: 1}}>
                <View style={styles.heading}>
                    <Text style={styles.headingText}>{item.name}</Text>
                    <Text
                        onPress={this.props.navigator.pop}
                        style={styles.closeButton}>×</Text>
                </View>
                {!item.items.length && <NoItems />}
                {item.items.length ? <Items items={item.items} /> : <View />}
                <View style={{flexDirection: 'row'}}>
                    <TextInput
                        value={this.state.newItem}
                        onChangeText={(text) => this.updateNewItem(text)}
                        style={styles.input} />
                    <TouchableHighlight
                        onPress={this.addItem.bind(this)}
                        style={styles.button}>
                        <Text>Add</Text>
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
}

const NoItems = () => (
    <View style={styles.noItem}>
        <Text style={styles.noItemText}>No Items, Add Items To Get Started</Text>
    </View>
)
const Items = ({items}) => (
    <View style={{flex: 1, paddingTop: 10}}>
        {items.map((item, i) => {
            return <Text style={styles.item} key={i}>• {item}</Text>
        })
        }
    </View>
)

const styles = StyleSheet.create({
    heading: {
        height: 80,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#156e9a'
    },
    headingText: {
        color: '#156e9a',
        fontWeight: 'bold'
    },
    input: {
        height: 70,
        backgroundColor: '#ededed',
        padding: 20,
        flex: 1
    },
    button: {
        width: 70,
        height: 70,
        justifyContent: 'center',
        alignItems: 'center',
        borderTopWidth: 1,
        borderColor: '#ededed'
    },
    closeButton: {
        position: 'absolute',
        right: 17,
        top: 18,
        fontSize: 36
    },
    noItem: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    noItemText: {
        fontSize: 22,
        color: '#156e9a'
    },
    item: {
        color: '#156e9a',
        padding: 10,
        fontSize: 20,
        paddingLeft: 20
    }
})

export default NewItem

至此,mobx相关代码编写完毕,我们可以看到mobx以最直接的方式来管理我们的状态,即我们开始说的 mobx 关注的是状态仓库(store)到的状态(state)的问题。

推荐阅读更多精彩内容

  • 1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法而MobX提供了一种存...
    三月懒驴阅读 12,196评论 1 27
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,010评论 16 134
  • 我们相遇是在一个秋天。 那时,正是银杏叶黄,纷纷飘落的时候,我漫步在校园的银杏道边,思考着理科生脑袋中的x+y的问...
    你我world阅读 101评论 0 2
  • 早点睡,自我沉醉
    自乱阵脚阅读 74评论 0 0
  • 家里多了一位少年,是我将要读初二的表弟,一个能说会道,善于查找语言漏洞,能一语把你说无语的青春期小大人。 家里的几...
    96大阳阅读 111评论 0 3