前言

從今天開(kāi)始我們來(lái)搞搞狀態(tài)管理可否，這幾天沒(méi)怎么寫(xiě)博客，因?yàn)楸徊∧?zhàn)勝了，tmd，突然的降溫讓我不知所措，大家最近注意安全，畢竟年底了，查的嚴(yán)，呸，大家注意保暖

特別聲明：寫(xiě)該文只是寫(xiě)一下用MobX的思路，有很多地方我會(huì)直接放官網(wǎng)鏈接，因?yàn)楣倬W(wǎng)已經(jīng)寫(xiě)的夠詳細(xì)了

首先來(lái)個(gè)比較簡(jiǎn)單的，MobX。

引用官網(wǎng)上的一句話：

MobX 是一個(gè)經(jīng)過(guò)戰(zhàn)火洗禮的庫(kù)，它通過(guò)透明的函數(shù)響應(yīng)式編程(transparently applying functional reactive programming - TFRP)使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展。MobX背后的哲學(xué)很簡(jiǎn)單:

MobX 是一款精準(zhǔn)的狀態(tài)管理工具庫(kù)，對(duì)我來(lái)說(shuō)非常容易學(xué)習(xí)和接受。我在 React 和 React Native 應(yīng)用中使用過(guò) Flux、Alt、Redux 和 Reflux，但我會(huì)毫不猶豫地說(shuō)，MobX 的簡(jiǎn)單性立即成為了我最喜歡的狀態(tài)管理工具。我期望能將它運(yùn)用在未來(lái)的項(xiàng)目中，并且對(duì) MobX 的發(fā)展拭目以待。

任何源自應(yīng)用狀態(tài)的東西都應(yīng)該自動(dòng)地獲得。其中包括UI、數(shù)據(jù)序列化、服務(wù)器通訊，等等。

上官網(wǎng)的圖

環(huán)境我就不配了，官網(wǎng)給了詳細(xì)的教程，我的環(huán)境是RN+TS，這里需要特別注意一下，由于Mobx要用的裝飾器，如果單純的用create-react-app安裝好環(huán)境后，一定要特別特別注意：

此時(shí)使用@observable是不行的，因?yàn)椴恢С盅b飾器語(yǔ)法，

此問(wèn)題有兩種解決方案：1.在當(dāng)前環(huán)境中設(shè)置支持裝飾器，

　　　　　　　　　　　下面是官網(wǎng)的詳細(xì)配置鏈接，https://cn.mobx.js.org/best/decorators.html

　　　　　　　　　　　 2.使用MobX的內(nèi)置的 decorate  工具在不支持裝飾器語(yǔ)法的情況加使用

接下來(lái)下面給你吃，不是，下面我用一個(gè)小例子來(lái)演示一下，Go，Go，Go(注意，我這里面默認(rèn)裝飾器是可用的，因?yàn)槲噎h(huán)境配好了已經(jīng))

1.yarn add mobx 

2.首先我們狀態(tài)管理肯定會(huì)有一個(gè)倉(cāng)庫(kù)吧，那我們來(lái)建一個(gè)倉(cāng)庫(kù)，（注意：我創(chuàng)建了兩個(gè)小的分支，因?yàn)闋顟B(tài)管理總不可能懟到一個(gè)文件里面吧）

首先上一手倉(cāng)庫(kù)的結(jié)構(gòu)

home.tsx的代碼　　

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

　　　2.用裝飾器修飾倉(cāng)庫(kù)的數(shù)據(jù)　　

　　　3.導(dǎo)出時(shí)需要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，不加此屬性當(dāng)然也可以，但是就不會(huì)記錄時(shí)間旅行了

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的代碼

　　注意：在此處將兩個(gè)樹(shù)枝里面的數(shù)據(jù)都引入，合并到一起

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

3.將倉(cāng)庫(kù)綁定到根組件上

　    注意：在此引入Provider將倉(cāng)庫(kù)和根組件綁定

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.最后一步，在組件中引用倉(cāng)庫(kù)里的數(shù)據(jù)，并可以修改倉(cāng)庫(kù)里的數(shù)據(jù)

　 注意：1.引入observer和inject，將組件和倉(cāng)庫(kù)連接起來(lái)，類似于在React中使用react-redux中的connnect方法

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

interface Props {
}
interface State {
}
//此處時(shí)引用最重要的步驟用inject和observer
@inject('store')
@observer
export default class Home extends React.Component<Props, State> {
 render () {
 return (
  <View>
  {/* 引用store里面儲(chǔ)存的值 */}
  <Text>{this.props.store.home.isShowMap}</Text>
  </View>
 )
 }
 componentDidMount () {
 //調(diào)用函數(shù)修改store里面的值
 this.props.store.home.switchTab(value)
 }
}

到這里，今天的隨筆已經(jīng)結(jié)束了，可能寫(xiě)的不是那木有條理，若有錯(cuò)誤還往各位同學(xué)指出，我嗓子已經(jīng)說(shuō)不出話來(lái)了，所以在這提醒各位同學(xué)

 學(xué)技術(shù)的同時(shí)一定要記得鍛煉身體，我的天，少吃飯多吃藥，多打代碼多保健，活著最重要！

 總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論