日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：codeMak1r.小新 ? 更新時間： 2022-11-02 編程語言

Mobx介紹

1.什么是Mobx

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

mobx與react的關系，相當于vuex與vue的關系。

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

2.Mobx有什么優勢

1.簡單

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

  1. 輕松實現最優渲染

    依賴自動追蹤，實現最小渲染優化。

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

架構自由

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

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

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

3.社區評價

配置開發環境

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

  • 一個create-react-app創建好的React項目環境
  • mobx框架本身
  • 一個用來鏈接mobx和React的中間件
# 創建項目
$ npm create-react-app react_mobx_app

# 安裝mobx
npm install mobx --save

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

# 官網推薦：mobx與react綁定庫
$ npm install mobx-react --save

瀏覽器支持

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

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

基礎使用

需求: 使用mobx實現一個計數器的案例

1. 初始化mobx

初始化步驟

  • 定義數據狀態（state）
  • 在構造器中實現數據響應式處理
  • 定義action函數
  • 實例化store并導出
// 編寫第一個mobx store小案例
import { makeAutoObservable } from 'mobx'

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

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

2. React使用store

實現步驟

  • 在組件中導入counterStore實例對象
  • 在組件中使用storeStore實例對象中的數據
  • 通過事件調用修改數據的方法修改store中的數據
  • 讓組件響應數據變化
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.通過點擊事件觸發action函數，修改count值 */}
      <button onClick={counterStore.addCount}>點我+1</button>
    </div>
  )
}
// 包裹組件讓視圖響應數據變化
export default observer(Count)

Mobx - computed

計算屬性（衍生狀態）

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

實現步驟

  • 聲明一個存在的數據
  • 通過get關鍵詞 定義計算屬性
  • 在 makeAutoObservable 方法中標記計算屬性

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

  • 修改聲明的數據，計算屬性的數據也會一起改變
  • Mobx提供的計算屬性與vue中的computed差別不大
// counterStore.js
import { makeAutoObservable, computed } from 'mobx'

class CounterStore {
  // 1.聲明一個list數組
  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>
  )
}
// 包裹組件讓視圖響應數據變化
export default observer(Count)

Mobx - 模塊化

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

實現步驟

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

代碼實現

項目結構

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

// 組合子模塊 封裝統一導出的供組件使用的方法
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機制，完成統一方法封裝

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

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

組件使用模塊中的數據

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>
  )
}
// 包裹組件讓視圖響應數據變化
export default observer(App)

Mobx - 總結

1.初始化Mobx的過程是怎樣的？

聲明數據 -> 響應式處理 -> 定義action函數 -> 實例化導出

2.Mobx如何配合react，需要依賴什么包？

mobx-react-lite作為連接包，導出observer方法，包裹組件

3.模塊化解決了什么問題？

維護性問題

4.如何實現Mobx的模塊化？

按照功能拆分store模塊，根模塊中組合子模塊，利用context機制依賴注入

原文鏈接：https://blog.csdn.net/Svik_zy/article/details/126323369

欄目分類
最近更新