腳本之家服務器常用軟件

快捷導航

React+Mobx基本使用、模塊化操作

更新時間：2022年09月07日 17:03:33 作者：codeMak1r.小新

React 和 MobX 是一對強力組合，React 通過提供機制把應用狀態(tài)轉(zhuǎn)換為可渲染組件樹并對其進行渲染，而MobX提供機制來存儲和更新應用狀態(tài)供 React 使用，這篇文章主要介紹了React+Mobx基本使用、模塊化,需要的朋友可以參考下

Mobx介紹

1.什么是Mobx

一個可以和React良好配合的集中狀態(tài)管理工具，和Redux解決的問題相似，都可以獨立組件進行集中狀態(tài)管理

mobx與react的關(guān)系，相當于vuex與vue的關(guān)系。

同類工具還有：redux、dva、recoil

2.Mobx有什么優(yōu)勢

1.簡單

編寫無模板的極簡代碼精準描述你的意圖 (原生js)

輕松實現(xiàn)最優(yōu)渲染
依賴自動追蹤，實現(xiàn)最小渲染優(yōu)化。

其實在原生的react上，react的性能并不是強項（vue的渲染速度確實折服了一票粉絲），但是mobx可以幫助react實現(xiàn)依賴的自動追蹤，實現(xiàn)優(yōu)化react組件的性能。

架構(gòu)自由

可移植, 可測試無特殊心智負擔

React 和 MobX 是一對強力組合。React 通過提供機制把應用狀態(tài)轉(zhuǎn)換為可渲染組件樹并對其進行渲染。而MobX提供機制來存儲和更新應用狀態(tài)供 React 使用。

對于應用開發(fā)中的常見問題，React 和 MobX 都提供了最優(yōu)和獨特的解決方案。React 提供了優(yōu)化UI渲染的機制，這種機制就是通過使用虛擬DOM來減少昂貴的DOM變化的數(shù)量。MobX 提供了優(yōu)化應用狀態(tài)與 React 組件同步的機制，這種機制就是使用響應式虛擬依賴狀態(tài)圖表，它只有在真正需要的時候才更新并且永遠保持是最新的。

3.社區(qū)評價

配置開發(fā)環(huán)境

Mobx是一個獨立的響應式的庫，可以獨立于任何UI框架存在，但是通常大家習慣把它和React進行綁定使用，用Mobx來做響應式數(shù)據(jù)建模，React作為UI視圖框架渲染內(nèi)容，我們環(huán)境的配置需要三個部分

一個create-react-app創(chuàng)建好的React項目環(huán)境
mobx框架本身
一個用來鏈接mobx和React的中間件

# 創(chuàng)建項目
$ npm create-react-app react_mobx_app

# 安裝mobx
npm install mobx --save

# 中間件工具 mobx-react-lite
$ npm install mobx-react-lite

# 官網(wǎng)推薦：mobx與react綁定庫
$ npm install mobx-react --save

瀏覽器支持

MobX >=5 版本運行在任何支持 ES6 proxy 的瀏覽器。如果運行在像 IE11、Node.js 6 以下版本或依靠與較舊的 JavaScripCore 的安卓端的 React Native。
MobX 4 可以運行在任何支持 ES5 的瀏覽器上，而且也將進行持續(xù)地維護。MobX 4 和 5 的 API 是相同的，并且語義上也能達到相同的效果，只是 MobX 4 存在一些局限性。

小貼士: MobX 5 包的主入口點附帶 ES5 代碼，以便向后兼容所有構(gòu)建工具。但因為 MobX 5 只能運行在現(xiàn)代瀏覽器上，所以可以考慮使用速度最快、體積最小的 ES6 構(gòu)建: lib/mobx.es6.js 。例如，通過設置 webpack 的別名: resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

基礎(chǔ)使用

需求: 使用mobx實現(xiàn)一個計數(shù)器的案例

1. 初始化mobx

初始化步驟

定義數(shù)據(jù)狀態(tài)（state）
在構(gòu)造器中實現(xiàn)數(shù)據(jù)響應式處理
定義action函數(shù)
實例化store并導出

// 編寫第一個mobx store小案例
import { makeAutoObservable } from 'mobx'

class CounterStore {
  // 1.定義數(shù)據(jù)
  count = 0
  constructor() {
    // 2.把數(shù)據(jù)弄成響應式
    makeAutoObservable(this)
  }
  // 3.定義action函數(shù)，用來修改數(shù)據(jù)
  addCount = () => {
    this.count++;
  }
}

// 4.實例化導出給react使用
const counterStore = new CounterStore()
export { counterStore }

2. React使用store

實現(xiàn)步驟

在組件中導入counterStore實例對象
在組件中使用storeStore實例對象中的數(shù)據(jù)
通過事件調(diào)用修改數(shù)據(jù)的方法修改store中的數(shù)據(jù)
讓組件響應數(shù)據(jù)變化

import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 1.把store中的count渲染出來 */}
      <button>{counterStore.count}</button>
      <br /><hr />
      {/* 2.通過點擊事件觸發(fā)action函數(shù)，修改count值 */}
      <button onClick={counterStore.addCount}>點我+1</button>
    </div>
  )
}
// 包裹組件讓視圖響應數(shù)據(jù)變化
export default observer(Count)

Mobx - computed

計算屬性（衍生狀態(tài)）

概念: 有一些狀態(tài)根據(jù)現(xiàn)有的狀態(tài)計算（衍生）得到，我們把這種狀態(tài)叫做計算屬性, 看下面的例子

實現(xiàn)步驟

聲明一個存在的數(shù)據(jù)
通過get關(guān)鍵詞定義計算屬性
在 makeAutoObservable 方法中標記計算屬性

不標記不影響計算屬性的使用，這里的標記只是為了讓代碼更直觀，程序員一看到這行代碼就知道filterList是通過計算屬性得來的。

修改聲明的數(shù)據(jù)，計算屬性的數(shù)據(jù)也會一起改變
Mobx提供的計算屬性與vue中的computed差別不大

// counterStore.js
import { makeAutoObservable, computed } from 'mobx'

class CounterStore {
  // 1.聲明一個list數(shù)組
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this, {
      // 3.標記計算屬性
      // 不標記不影響計算屬性的使用，這里的標記只是為了讓代碼更直觀，程序員一看到這行代碼就知道filterList是通過計算屬性得來的
      filterList: computed
    })
  }
  // 2.定義計算屬性
  get filterList() {
    return this.list.filter(item => item > 2)
  }
  changeList = () => {
    this.list.push(7, 8, 9)
  }
}

const counterStore = new CounterStore()
export { counterStore }

// Count.jsx
import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 使用計算屬性 */}
      {counterStore.filterList.join('-')}
      <button onClick={counterStore.changeList}>修改List</button>
    </div>
  )
}
// 包裹組件讓視圖響應數(shù)據(jù)變化
export default observer(Count)

Mobx - 模塊化

場景: 一個項目有很多的業(yè)務模塊，我們不能把所有的代碼都寫到一起，這樣不好維護，為了提供可維護性，需要引入模塊化機制

實現(xiàn)步驟

拆分模塊js文件，每個模塊中定義自己獨立的state/actions
在store/index.js中導入拆分之后的模塊，進行模塊組合
利用React的useContext的機制導出統(tǒng)一的useStore方法，給業(yè)務組件使用

代碼實現(xiàn)

項目結(jié)構(gòu)

src
├─App.jsx
├─index.js
├─store
|   ├─count.Store.js
|   ├─index.js
|   └list.Store.js
├─components
|     ├─Count.jsx
|     └List.jsx

/src/store/count.Store.js

import { makeAutoObservable } from 'mobx'
class CountStore {
  count = 0
  constructor() {
    makeAutoObservable(this)
  }
  addCount = () => {
    this.count++
  }
}
export { CountStore }

/src/store/list.Store.js

import { makeAutoObservable } from "mobx";
class ListStore {
  constructor() {
    makeAutoObservable(this)
  }
  list = ['react', 'vue']
  changeList = () => {
    this.list.push('angular')
  }
}
export { ListStore }

/src/store/index.js

// 組合子模塊 封裝統(tǒng)一導出的供組件使用的方法
import React, { useContext } from "react";
import { CountStore } from "./count.Store";
import { ListStore } from "./list.Store";
class RootStore {
  constructor() {
    // 對子模塊進行實例化操作
    // 將來實例化rootstore的時候，rootstore實例上有兩個屬性，分別存放了子模塊的兩個實例。
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 使用react context機制，完成統(tǒng)一方法封裝

// 1.實例化rootStore注入context
const rootStore = new RootStore()
const context = React.createContext(rootStore)

// 2.導出useStore方法，供組件通過調(diào)用該方法使用根實例
// 作用：通過useContext拿到rootStore實例對象，然后返回
// 只要在業(yè)務組件中 調(diào)用useStore() 就可以拿到 rootStore實例對象
const useStore = () => useContext(context)
export { useStore }

組件使用模塊中的數(shù)據(jù)

import { observer } from 'mobx-react-lite'
import { useStore } from './store'
function App() {
  const { countStore } = useStore()
  return (
    <div className="App">
      <button onClick={() => countStore.addCount()}>
        {countStore.count}
      </button>
    </div>
  )
}
// 包裹組件讓視圖響應數(shù)據(jù)變化
export default observer(App)