在項目中遇到了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
