一、Mobx前端狀態(tài)管理框架 基礎(chǔ)概念？

1. 什么是Mobx

Mobx是一個(gè)簡(jiǎn)單、可擴(kuò)展的狀態(tài)管理庫

2. 什么是狀態(tài)管理？

狀態(tài)管理就是將分布在各個(gè)組件、各個(gè)模塊中的狀態(tài)的變化，按照一定的規(guī)則，進(jìn)行統(tǒng)一的管理。

3. 為什么需要狀態(tài)管理？

隨著組件數(shù)量的增加、系統(tǒng)的結(jié)構(gòu)越來越復(fù)雜。各大前端框架（React、Vue）提供的單向數(shù)據(jù)流的運(yùn)轉(zhuǎn)方式，已經(jīng)不能滿足復(fù)雜系統(tǒng)的需求。

。跨層次組件的數(shù)據(jù)共享
。兄弟組件的數(shù)據(jù)共享
。數(shù)據(jù)狀態(tài)的所有變化無法方便追溯

狀態(tài)管理的一般思想（Flux）

Flux的核心思想就是數(shù)據(jù)和邏輯永遠(yuǎn)單向流動(dòng)。

Flux中的數(shù)據(jù)單向和React中的單向數(shù)據(jù)流有所不同，React中的單向數(shù)據(jù)流是指的組件間通信的數(shù)據(jù)流向只能是從父組件->子組件的這樣一種形式。而Flux思想中的單向數(shù)據(jù)流，指的是在應(yīng)用程序中，數(shù)據(jù)變化的過程和方向是單向的。

不難發(fā)現(xiàn)，F(xiàn)lux其實(shí)是提供了一個(gè)數(shù)據(jù)中心化控制的方案。每個(gè)數(shù)據(jù)的變化都是在“動(dòng)作”中去觸發(fā)。Flux架構(gòu)的特點(diǎn)主要是組件內(nèi)部不包含狀態(tài)，所有狀態(tài)放到Store中統(tǒng)一管理，通過監(jiān)聽Action來具體執(zhí)行操作，這樣的好處在于：

。視圖組件不包含狀態(tài)，很純粹，只包含了渲染邏輯和觸發(fā) action 這兩個(gè)職責(zé)。
。通過Action即可方便追溯Store的所有變化
。由于是中心化的數(shù)據(jù)管理，也就不存在兄弟/跨層級(jí)組件數(shù)據(jù)共享問題
市面上也有很多基于Flux的實(shí)現(xiàn)，如Redux，Vuex等。

有哪些常見的實(shí)現(xiàn)？

Redux
Mobx
Vuex
Context (React Hook)

二、mobx的用法

1. 安裝 mobx

npm install mobx -S

2. 安裝 mobx 與 react 關(guān)聯(lián)工具

npm install mobx-react -S

3. 安裝兩個(gè)插件，以支持 ES6 的 mobx 語法

npm install @babel/plugin-proposal-decorators -D
npm install @babel/plugin-proposal-class-properties -D

4. 在 package.json 中配置上述兩個(gè)插件

"babel": [
  "plugins": [
	[
	  "@babel/plugin-proposal-decorators",
	  {
		"legacy": true
	  }
    ],
    [
	  "@babel/plugin-proposal-class-properties",
	  {
		"loose": true
	  }
    ]
  ]
]

5. ESLint 配置

"eslintConfig": {
  "parserOptions": {
	"ecmaFeatures": {
	  "legacyDecorators": true
	}
  }
}

6. 相關(guān)語法

。@observable：定義 state
。@computed：定義一個(gè)方法，當(dāng)依賴的 state 發(fā)生改變時(shí)，自動(dòng)重新計(jì)算，自動(dòng)地將最新的結(jié)果渲染至調(diào)用的地方
。@action：定義操作 state 的方法

7. 頁面結(jié)構(gòu)

封裝store下的index文件

homeStore.js封裝內(nèi)容：

home頁面封裝內(nèi)容

參考鏈接地址：
。https://blog.csdn.net/qq_44647809/article/details/123797408
。https://www.wddsss.com/main/displayArticle/350
。https://blog.csdn.net/weixin_43834567/article/details/118414211

到此這篇關(guān)于React中如何使用Mobx的文章就介紹到這了,更多相關(guān)React使用Mobx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論