上一節(jié)我們已經(jīng)了解了為什么要使用Mobx，簡(jiǎn)單理解Mobx(一)：使用目的

這節(jié)我們來(lái)看看如何引入并使用Mobx

引入

1. 引入Mobx
   執(zhí)行
   npm install mob --save
   以及
   npm install mobx-react --save

2. 支持@裝飾器
   我們看到之前的例子中使用到了@裝飾器，工程中默認(rèn)并沒(méi)有支持@裝飾器，因此我們還需要安裝插件:
   執(zhí)行
   npm i babel-plugin-trans form-decorators-legacy --save-dev
   以及，在.babelrc文件中添加plugins屬性：
   {
   "presets": ["react-native"],
   "plugins": ["transform-decorators-legacy"]
   }

3. 執(zhí)行npm install

使用

先附上Mobx的文檔

Mobx中包含了幾個(gè)重要的屬性和字段，分別有：

1. observable
2. action
3. compute
4. observer
5. autorun

雖然有5個(gè)屬性，但總體來(lái)講主要分為3類(lèi)：

1. 被觀察者：observable
2. 觀察者：observer，autorun
3. 修改被觀察者的方法：action，compute

只要程序中包含了這3類(lèi)，Mobx就能發(fā)揮作用了，現(xiàn)在就來(lái)講解一下每個(gè)屬性的作用：

observable

一般observable用于修飾變量，這些變量通常用于展示會(huì)變化的數(shù)據(jù)
如：
@observable data = 0
@observable arr = []
@observable map = new Map()

observer和autorun

observer和autorun本質(zhì)上都是autorun，只不過(guò)observer一般用于修飾Component，這個(gè)修飾的作用其實(shí)就是相當(dāng)于用autorun將Component的render()包裝起來(lái)

那這個(gè)autorun的作用是什么呢？

答案就是觀察observable變量，只要觀察的observable變量變了，被autorun包裝的函數(shù)就會(huì)自動(dòng)執(zhí)行

當(dāng)autorun包裝的是Component的render()方法，也就是用@observer裝飾Component時(shí)，只要在render中使用了observable變量，那么當(dāng)變量改變時(shí)，render就會(huì)重新觸發(fā)，這不就是“刷新”效果嗎？

使用方法如下：
只要其中的observableData變化了，那么render()就會(huì)重新觸發(fā)，從而刷新界面，實(shí)時(shí)顯示observableData的值

@observer
export default class MyComponent extends Component {
    render() {
        return (
            <Text>{observableData}</Text>
        )
    }
}

action和computed

這兩個(gè)修飾符都是用于修飾方法的，本質(zhì)上差不多，computed其實(shí)也可以用action實(shí)現(xiàn)，因此這里只介紹action

實(shí)際上，Mobx的作用，通過(guò)observable和observer就已經(jīng)可以實(shí)現(xiàn)完整的功能（只要observable的變量變化，那observer就會(huì)相應(yīng)刷新）了，那為什么還要加上action這個(gè)東西呢？

答：事實(shí)上也確實(shí)是這樣，不用action也能實(shí)現(xiàn)完整的功能，但是Mobx在嚴(yán)格模式下，修改observable變量的方法必須加上action裝飾器，不然會(huì)報(bào)錯(cuò)，一方面也是為了保證我們寫(xiě)的代碼的質(zhì)量吧，下面我們來(lái)說(shuō)說(shuō)action修飾的方法是做什么的

首先來(lái)看看什么時(shí)候需要用到action修飾

答案就是需要修改observable變量的方法。Mobx建議，我們不要在外部沒(méi)有action的方法中修改observable變量，如observableData = 'new Value'，就算只有一行賦值語(yǔ)句，也應(yīng)該封裝進(jìn)方法中，并加上action裝飾器，如下所示

@action
updateData(newValue) {
    this.observableData = newValue
}

這樣能夠保持我們的代碼結(jié)構(gòu)清晰。所以說(shuō)action也就這個(gè)作用了。

完整的使用示例

最后利用observable、action和observer來(lái)完整展示一下Mobx的使用方法，希望能夠幫助到剛開(kāi)始接觸Mobx而導(dǎo)致不懂怎么使用的同學(xué)。

這里的效果就是，點(diǎn)擊Button時(shí)，Text顯示的內(nèi)容會(huì)變化

一般某些被觀察者變量在多個(gè)界面被調(diào)用，因此我們通常將observable和action方法裝在一個(gè)類(lèi)當(dāng)中，這里就放在TestStore當(dāng)中吧：

TestStore.js

import {
    action,
    observable
} from 'mobx'

export default class TestStore {
    @observable name

    @action
    updateName(newName) {
        this.name = newName
    }
}

然后就是展示界面TestScreen.js

import React, {Component, PureComponent} from 'react'
import {Button, Text, View,} from 'react-native'
import {observer,} from 'mobx-react'
import {testStore} from "../store/index";

@observer
export default class TestScreen extends Component {
    
    i = 0
    render() {

        return (
            <View style={{flex: 1, justifyContent: 'space-between'}}>
                <Text style={{fontSize: 20,}}>{testStore.name}</Text>
                <Button title="Mobx" onPress={() => {
                    testStore.updateName('Mobx -----> ' + this.i++)
                }}/>
            </View>
        )
    }
}

實(shí)現(xiàn)效果

Mobx實(shí)現(xiàn)效果