Mobx初体验

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;

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 ;};configureScene = (route, routeStack) => {if (route.type === 'Modal'){return Navigator.SceneConfigs.FloatFromBottom;}return Navigator.SceneConfigs.PushFromRight;}render(){return ({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.stateconst { list } = this.props.storereturn ({flex:1}}>My List App{!list.length ?  : null}{flex:1}}>{list.map((l, i) => {return {l.name.toUpperCase()}Remove})}{!showInput &&  {this.state.text === '' && '+ New List'}{this.state.text !== '' && '+ Add New List Item'}}{showInput && {flexDirection: 'row'}}> this.updateText(text)} />确定});}
}const NoList = () => (No List, Add List To Get Started
)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 === '') returnthis.props.store.addItem(this.props.item, this.state.newItem)this.setState({newItem: ''})}updateNewItem (text) {this.setState({newItem: text})}render () {const { item } = this.propsreturn ({flex: 1}}>{item.name}×{!item.items.length && }{item.items.length ?  : }{flexDirection: 'row'}}> this.updateNewItem(text)}style={styles.input} />Add)}
}const NoItems = () => (No Items, Add Items To Get Started
)
const Items = ({items}) => ({flex: 1, paddingTop: 10}}>{items.map((item, i) => {return • {item}})}
)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)的问题。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！