在项目中遇到了Mobx这个框架，看了几天博客终于理解了一点，因此特写下这篇简单理解Mobx的文章，并不会涉及Mobx比较全面的知识点，只希望也能为后来学习Mobx的人提供一些理解的基础，方便之后的学习。
感谢其他作者写的博客
Mobx使用详解
mobx——rudex的简单替代品
本篇文章将从以下几点来讲解Mobx
- 使用目的
- 使用方法
使用目的
先抛结论：使用Mobx的目的是更轻松的管理State对象
使用一个框架，最重要的是要时刻牢记使用该框架的目的，只要保持清晰的目标，学习框架就不会思维混乱。
从介绍文字来看，Mobx是一个状态管理工具，这样的说明太笼统了。可以这样简单的介绍：Mobx是一个帮助你更方便的控制State的工具，这样或许好理解一些。
首先我们都知道，在React Native中，State对象是用于控制控件的状态，而且最重要的一点是，当通过setState方法对State对象进行修改时，那使用了该State对象的控件就会重新触发render方法，从而实现刷新的效果。
而问题就在于，直接使用，有时候显得比较麻烦和繁琐，下面举个简单的直接使用State的例子，在该例子中，通过点击按键Button来改变Text的内容。实现很简单，主要分为3个步骤：
- 在constructor中设置好State对象
- 在Text中使用this.state
- 在Button的点击事件中使用this.setState
export default class Test extends Component {
constructor(props) {
super(props)
this.state = {
data: []
}
}
render() {
return (
<View>
<Text>{this.state.data}</Text>
<Button title="Add" onPress={() => {
this.state.data.push('+')
this.setState(() => {
return {
data: this.state.data,
}
})
}}/>
</View>
)
}
}
而使用了Mobx的情况是什么样的呢，其中实现的步骤大致分为4个步骤：
- 在一个类如Store中设置了一个会改变的变量，如上面Text的内容data，并加上@observable注解
- 在Store当中设置一个改变data的方法，并加上@action注解
- 在继承于Component的类上加上@observer注解
- 在Component的render()中Text直接使用Store中的observable变量，Button的点击事件中直接使用Store中的action方法
import {observable, action} from 'mobx'
export default class TestStore {
@observable
data = []
@action
addData(x) {
this.data.push(x)
}
}
//---分割线---
import {observer} from 'mobx-react'
const testStore = new TestStore()
@observer
export default class TestScreen extends Component {
render() {
// 获取Store中的变量
const data = testStore.data
return (
<View>
<Text>{data}</Text>
<Button title="ADD" onPress={
() => {
//调用Store中的方法来改变
testStore.addData('+')
}
}\>
</View>
)
}
}
从上面的例子中，可以看出使用Mobx的优点：
- 逻辑更清晰
一个控件使用了observable变量A，在其他的方法中通过调用action方法改变A就能够实现刷新的效果 - 不同界面控制同一状态
使用Mobx可以轻松实现在多个界面中控制同一个状态的效果，再也不用考虑State应该怎么传递才能够实时更新，耦合度更低
因此这就是使用Mobx的目的：更好的 管理State来实现控件的刷新效果
下一节我们来看看如何上手使用Mobx
