MobX是一个非常直观的状态管理库，相比于其他的状态管理库，比如Flux、Alt、Redux和Reflux等，它的使用非常简单，相信你会很快地爱上它。
react 关注的状态(state)到视图(view)的问题。而 mobx 关注的是状态仓库（store）到的状态(state)的问题。
环境配置
首先，让我们来新建一个ReactNative工程
react-native init ReactNativeMobX
接着，安装我们所需要的依赖库：mobx 和 mobx-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;
- 导入了observable（被观察者）
- 创建了一个新的类，名为ObservableListStore
- 定义了一个list数组，但是这个数组有些特殊，它是被@observable修饰过的，用到了ES7的语法，表示该类的list属性可被观察者（observer）观察，也就是观察者模式。如果对@用法不熟悉，可参考点我查看详细
- 创建了list的三个操作方法
- 实例化了ObservableListStore类
- 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
- 导入observer（观察者）
- 我们使用@observer修饰符来修饰TodoList类，它可以保证当其相关联的数据变化时，该组件会重新渲染
- 我们导入了一个新的组件NewItem（稍后介绍），当我们想为我们的list添加新的item时，它将会被调用
- 定义了三个功能函数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)的问题。
