简单理解Mobx(一)：使用目的

在项目中遇到了Mobx这个框架，看了几天博客终于理解了一点，因此特写下这篇简单理解Mobx的文章，并不会涉及Mobx比较全面的知识点，只希望也能为后来学习Mobx的人提供一些理解的基础，方便之后的学习。

感谢其他作者写的博客
Mobx使用详解
mobx——rudex的简单替代品

本篇文章将从以下几点来讲解Mobx

1. 使用目的
2. 使用方法

使用目的

先抛结论：使用Mobx的目的是更轻松的管理State对象

使用一个框架，最重要的是要时刻牢记使用该框架的目的，只要保持清晰的目标，学习框架就不会思维混乱。

从介绍文字来看，Mobx是一个状态管理工具，这样的说明太笼统了。可以这样简单的介绍：Mobx是一个帮助你更方便的控制State的工具，这样或许好理解一些。

首先我们都知道，在React Native中，State对象是用于控制控件的状态，而且最重要的一点是，当通过setState方法对State对象进行修改时，那使用了该State对象的控件就会重新触发render方法，从而实现刷新的效果。

而问题就在于，直接使用，有时候显得比较麻烦和繁琐，下面举个简单的直接使用State的例子，在该例子中，通过点击按键Button来改变Text的内容。实现很简单，主要分为3个步骤：

1. 在constructor中设置好State对象
2. 在Text中使用this.state
3. 在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个步骤：

1. 在一个类如Store中设置了一个会改变的变量，如上面Text的内容data，并加上@observable注解
2. 在Store当中设置一个改变data的方法，并加上@action注解
3. 在继承于Component的类上加上@observer注解
4. 在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的优点：

1. 逻辑更清晰
   一个控件使用了observable变量A，在其他的方法中通过调用action方法改变A就能够实现刷新的效果
2. 不同界面控制同一状态
   使用Mobx可以轻松实现在多个界面中控制同一个状态的效果，再也不用考虑State应该怎么传递才能够实时更新，耦合度更低

因此这就是使用Mobx的目的：更好的 管理State来实现控件的刷新效果

下一节我们来看看如何上手使用Mobx

简单理解Mobx(二):使用方法