在項目中遇到了Mobx這個框架，看了幾天博客終于理解了一點鸣皂，因此特寫下這篇簡單理解Mobx的文章抓谴，并不會涉及Mobx比較全面的知識點，只希望也能為后來學習Mobx的人提供一些理解的基礎寞缝，方便之后的學習癌压。
感謝其他作者寫的博客
Mobx使用詳解
mobx——rudex的簡單替代品
本篇文章將從以下幾點來講解Mobx
- 使用目的
- 使用方法
使用目的
先拋結論：使用Mobx的目的是更輕松的管理State對象
使用一個框架，最重要的是要時刻牢記使用該框架的目的荆陆，只要保持清晰的目標滩届，學習框架就不會思維混亂。
從介紹文字來看被啼，Mobx是一個狀態(tài)管理工具帜消，這樣的說明太籠統(tǒng)了∨ㄌ澹可以這樣簡單的介紹：Mobx是一個幫助你更方便的控制State的工具泡挺，這樣或許好理解一些。
首先我們都知道命浴，在React Native中娄猫，State對象是用于控制控件的狀態(tài)，而且最重要的一點是生闲，當通過setState方法對State對象進行修改時媳溺，那使用了該State對象的控件就會重新觸發(fā)render方法，從而實現(xiàn)刷新的效果跪腹。
而問題就在于褂删，直接使用，有時候顯得比較麻煩和繁瑣冲茸，下面舉個簡單的直接使用State的例子屯阀，在該例子中缅帘，通過點擊按鍵Button來改變Text的內容。實現(xiàn)很簡單难衰，主要分為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的情況是什么樣的呢钦无，其中實現(xiàn)的步驟大致分為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的優(yōu)點：
- 邏輯更清晰
一個控件使用了observable變量A弟塞，在其他的方法中通過調用action方法改變A就能夠實現(xiàn)刷新的效果 - 不同界面控制同一狀態(tài)
使用Mobx可以輕松實現(xiàn)在多個界面中控制同一個狀態(tài)的效果，再也不用考慮State應該怎么傳遞才能夠實時更新拙已，耦合度更低
因此這就是使用Mobx的目的：更好的 管理State來實現(xiàn)控件的刷新效果
下一節(jié)我們來看看如何上手使用Mobx
