在項目中遇到了Mobx這個框架，看了幾天博客終于理解了一點，因此特寫下這篇簡單理解Mobx的文章，并不會涉及Mobx比較全面的知識點，只希望也能為后來學(xué)習(xí)Mobx的人提供一些理解的基礎(chǔ)，方便之后的學(xué)習(xí)。

感謝其他作者寫的博客
Mobx使用詳解
mobx——rudex的簡單替代品

本篇文章將從以下幾點來講解Mobx

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

使用目的

先拋結(jié)論：使用Mobx的目的是更輕松的管理State對象

使用一個框架，最重要的是要時刻牢記使用該框架的目的，只要保持清晰的目標(biāo)，學(xué)習(xí)框架就不會思維混亂。

從介紹文字來看，Mobx是一個狀態(tài)管理工具，這樣的說明太籠統(tǒng)了。可以這樣簡單的介紹：Mobx是一個幫助你更方便的控制State的工具，這樣或許好理解一些。

首先我們都知道，在React Native中，State對象是用于控制控件的狀態(tài)，而且最重要的一點是，當(dāng)通過setState方法對State對象進行修改時，那使用了該State對象的控件就會重新觸發(fā)render方法，從而實現(xiàn)刷新的效果。

而問題就在于，直接使用，有時候顯得比較麻煩和繁瑣，下面舉個簡單的直接使用State的例子，在該例子中，通過點擊按鍵Button來改變Text的內(nèi)容。實現(xiàn)很簡單，主要分為3個步驟：

1. 在constructor中設(shè)置好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的情況是什么樣的呢，其中實現(xiàn)的步驟大致分為4個步驟：

1. 在一個類如Store中設(shè)置了一個會改變的變量，如上面Text的內(nèi)容data，并加上@observable注解
2. 在Store當(dāng)中設(shè)置一個改變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={
                    () => {
                        //調(diào)用Store中的方法來改變
                        testStore.addData('+')
                    }
                    }\>
            </View>
            )
    }
}

從上面的例子中，可以看出使用Mobx的優(yōu)點：

1. 邏輯更清晰
   一個控件使用了observable變量A，在其他的方法中通過調(diào)用action方法改變A就能夠?qū)崿F(xiàn)刷新的效果
2. 不同界面控制同一狀態(tài)
   使用Mobx可以輕松實現(xiàn)在多個界面中控制同一個狀態(tài)的效果，再也不用考慮State應(yīng)該怎么傳遞才能夠?qū)崟r更新，耦合度更低

因此這就是使用Mobx的目的：更好的 管理State來實現(xiàn)控件的刷新效果

下一節(jié)我們來看看如何上手使用Mobx

簡單理解Mobx(二):使用方法