React Native中Mobx的使用

ReactNative MobX · 發表 2018-12-04 08:03:00

摘要：從今天開始我們來搞搞狀態管理可否，這幾天沒怎麼寫部落格，因為被病魔戰勝了，tmd，突然的降溫讓我不知所措，大家最近注意安全，畢竟年底了，查的嚴，呸，大家注意保暖特別宣告：寫該文只是寫一下用MobX的思路，有很多地方我會直接放官網連結，因為官網已經寫的夠詳細了首先來個比較簡單的，Mo...

從今天開始我們來搞搞狀態管理可否，這幾天沒怎麼寫部落格，因為被病魔戰勝了，tmd，突然的降溫讓我不知所措，大家最近注意安全，畢竟年底了，查的嚴，呸，大家注意保暖

特別宣告：寫該文只是寫一下用MobX的思路，有很多地方我會直接放官網連結，因為官網已經寫的夠詳細了

首先來個比較簡單的，MobX。

引用官網上的一句話：

MobX 是一個經過戰火洗禮的庫，它通過透明的函式響應式程式設計 (transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴充套件。MobX背後的哲學很簡單:

任何源自應用狀態的東西都應該自動地獲得。 其中包括UI、資料序列化、伺服器通訊，等等。

上官網的圖

環境我就不配了，官網給了詳細的教程，我的環境是RN+TS，這裡需要特別注意一下，由於Mobx要用的裝飾器，如果單純的用create-react-app安裝好環境後，一定要特別特別注意：

此時使用 @observable 是不行的，因為不支援裝飾器語法，

此問題有兩種解決方案： 1.在當前環境中設定支援裝飾器，

下面是官網的詳細配置連結，https://cn.mobx.js.org/best/decorators.html

2.使用MobX的內建的 decorate 工具在不支援裝飾器語法的情況加使用

接下來下面給你吃，不是，下面我用一個小例子來演示一下，Go，Go，Go( 注意，我這裡面預設裝飾器是可用的，因為我環境配好了已經 )

1. yarn add mobx

2.首先我們狀態管理肯定會有一個倉庫吧，那我們來建一個倉庫，（注意：我建立了兩個小的分支，因為狀態管理總不可能懟到一個檔案裡面吧）

首先上一手倉庫的結構

home.tsx的程式碼

注意： 1. 從mobx中引入observable,action

2.用裝飾器修飾倉庫的資料

3.匯出時需要new一下

import { observable, action } from 'mobx'


class List {
@observable isShowMap: boolean = false

@action
switchTab (info: boolean) {
this.isShowMap = info
}
}

export default new List()

list.tsx的程式碼

注意： 1.此處多加入了runInAction，不加此屬性當然也可以，但是就不會記錄時間旅行了

import { observable, action, runInAction } from 'mobx'

class List {
@observable listData: Array<any> = []

@action
getListData () {
fetch('https://ik9hkddr.qcloud.la/mock/cookbook-list.json')
.then(reponse => reponse.json())
.then(result => {
runInAction(() => {
this.listData = result.data
})
})
}
}

export default new List()

index.js的程式碼

注意：在此處將兩個樹枝裡面的資料都引入，合併到一起

import list from './list'
import home from './home'
const store = { list, home }
export default store

3.將倉庫繫結到根元件上

注意：在此引入Provider將倉庫和根元件繫結


  import React from 'react'
  import { Provider } from 'mobx-react'
  import Home from './pages/home/Home'
  import HotList from './pages/hotlist/HotList'
  import store from './store' 

export default class componentName extends React.Component {
render() {
return (
<Provider store={store}>
<RootStack></RootStack>
</Provider>
)
}
}}

4.最後一步，在元件中引用倉庫裡的資料，並可以修改倉庫裡的資料

注意：1.引入observer和inject，將元件和倉庫連線起來，類似於在React中使用react-redux中的connnect方法

import React from 'react'
import { observer, inject } from 'mobx-react'
import {
View,
Text,
} from 'react-native'

interface Props {
}
interface State {
}
//此處時引用最重要的步驟用inject和observer
@inject('store')
@observer
export default class Home extends React.Component<Props, State> {
render () {
return (
<View>
{/* 引用store裡面儲存的值 */}
<Text>{this.props.store.home.isShowMap}</Text>
</View>
)
}
componentDidMount () {
//呼叫函式修改store裡面的值
this.props.store.home.switchTab(value)
}
}

到這裡，今天的隨筆已經結束了，可能寫的不是那木有條理，若有錯誤還往各位同學指出，我嗓子已經說不出話來了，所以在這提醒各位同學

學技術的同時一定要記得鍛鍊身體，我的天，少吃飯多吃藥，多打程式碼多保健，活著最重要！

告辭告辭

React Native中Mobx的使用

您可能也會喜歡…