react mobx 基本用法

一. 安裝mobx

• yarn add mobx
• yarn add mobx-react-lite

二. 創(chuàng)建一個(gè)mobx文件夾統(tǒng)一管理項(xiàng)目所有的數(shù)據(jù)

三. 在mobx文件夾里創(chuàng)建一個(gè)index.js 統(tǒng)一管理

import React, { useContext } from "react";
import DemoStore from "./DemoStore";
class RootStore {
  constructor() {
    this.demoStore = DemoStore;
    //如果還有其他文件，依照上面引入即可
  }
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useMobStore = () => useContext(context)
export {useMobStore};

四. 創(chuàng)建DemoStore.js 文件

import { makeAutoObservable, toJS } from 'mobx';
class DemoStoreData{
	number: 1; // 數(shù)據(jù)
	constructor() {
	   makeAutoObservable(this)
	}
	// 更新數(shù)據(jù)(此方法可以是異步的，可以在里面調(diào)完接口在更新數(shù)據(jù))
	updateNumber = (data) =>{
		this.number = data;
	}
}
const DemoStore = new DemoStoreData()
export default DemoStore;

五. 使用

// 導(dǎo)入的是 三 步驟 創(chuàng)建的index.js 文件
import { useMobStore } from "./mobx/index.js"; 
import { observer } from "mobx-react-lite";
const PageList = () => {
	// 解構(gòu)的是 三 步驟里的 demoStore 
	const { demoStore } = useMobStore();
	return (
		<div>
			{demoStore.number}
		</div>
	)
}
export default observer(PageList);

六. 注意

如果組件想使用React.memo() 進(jìn)行性能優(yōu)化
在優(yōu)化的那個(gè)組件不要有任何mobx相關(guān)的數(shù)據(jù)和方法
因?yàn)閙emo函數(shù)里的舊值和新值，只能監(jiān)聽(tīng)到通過(guò)redux 或者 組件傳遞的值，mobx傳遞的值無(wú)法進(jìn)行監(jiān)聽(tīng)。
目前我采用的方法是 最后一層優(yōu)化的組件 通過(guò)數(shù)據(jù)傳遞的方式進(jìn)行。（如有優(yōu)化的方式歡迎評(píng)論告知,萬(wàn)分感謝?。。。?/p>

基于react使用mobx的使用

1.mobx是一個(gè)輕量級(jí)的狀態(tài)管理器，所以很簡(jiǎn)單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法

我們需要把數(shù)據(jù)做成全局?jǐn)?shù)據(jù)，并且這個(gè)數(shù)據(jù)不能污染全局?jǐn)?shù)據(jù) -- 應(yīng)該是一個(gè)閉包(ES6 中class是一個(gè)語(yǔ)法糖，本身是一個(gè)函數(shù))

所以應(yīng)該定義一個(gè)類，然后導(dǎo)出一個(gè)實(shí)例（因?yàn)閿?shù)據(jù)要全局通用，所以不能導(dǎo)出類，應(yīng)該導(dǎo)出實(shí)例 -- 單例模式）

import {action , computed,makeObservable,observable} from "mobx"

class Store{
  //在mobx6.x版本中，需要在構(gòu)造函數(shù)中聲明數(shù)據(jù)類型
  constructor(){
     makeObservable(
    //指定目標(biāo)
    this,
   //定義當(dāng)前mobx類對(duì)象中的數(shù)據(jù)類型
  {
    list:observable,
    add:action,
    minus:action,
    amount:computed}
)
}
   list=Array.from(Array(8),(_,i)=>{
    return {id:'ID-'+i,name:`華為手機(jī)Mate2${i}`,price:Math.ceil(Math.random() * 2000 + 3000), count: 1}
})
//在類中，有一個(gè)getter方法，在使用的時(shí)候是一個(gè)數(shù)據(jù)
get amount(){
    return this.list.reduce((r,it)=>{
   r += it.price * it.count
   return r
},0)
}
}
add(key,step){
   console.log('-------- add',key,step)
   this.list= this.list.map(it =>{
     if(it.id === key) it.count += step
     return it
})
  console.log(this.list)
}

minus(key,step){
  console.log('---------minus',key,step)
  this.list=this.list,map(it =>{
  if(it.id === key) it.count -=step
  return it
})
}
}
export default new Store()

//new是實(shí)例對(duì)象 Store類 ，Store是導(dǎo)出類

輕量級(jí)狀態(tài)管理器 mobx

mobx是一個(gè)可伸縮的、輕量級(jí)（與數(shù)據(jù)復(fù)雜度有關(guān)的一個(gè)指標(biāo)）的狀態(tài)管理器

在項(xiàng)目中有一些數(shù)據(jù)需要全局管理(數(shù)據(jù)存在共用 -- 比如token、用戶信息，數(shù)據(jù)存在傳遞、可緩存性)

使用一個(gè)庫(kù)或則一個(gè)技術(shù)：

  首先要考慮業(yè)務(wù) -- 數(shù)組數(shù)據(jù) -- 購(gòu)物車(chē)數(shù)組([{key:唯一標(biāo)識(shí)，name:產(chǎn)品名字,price:產(chǎn)品單價(jià)，count：數(shù)量}]) -- 可以修改數(shù)量方法(add/munis需要傳遞每次減少數(shù)量，傳遞一個(gè)唯一標(biāo)識(shí)) -- 購(gòu)物車(chē)計(jì)算總價(jià)格(amount,每次數(shù)據(jù)變化都要重新計(jì)算)

  使用庫(kù) -> 安裝：cnpm i -S mobx mobx-react (mobx的5.X和6.X，他們的使用方法和方法名字等區(qū)別很多，幾乎沒(méi)有任何共同點(diǎn))

開(kāi)發(fā)過(guò)程：還原一個(gè)購(gòu)物車(chē)頁(yè)面，一切皆組件，最小化到一個(gè)元素（因?yàn)閞eact是沒(méi)有做組件重新渲染優(yōu)化 - - 賦值和渲染優(yōu)化是有的）

    標(biāo)簽組件 + 按鈕組件 => 組成一個(gè)行組件 =>組成一個(gè)列表組件 => 形成一個(gè)購(gòu)物車(chē)頁(yè)面組件 => 掛載到項(xiàng)目組件 => index的render方法上

注入使用：在其他組件上使用

import React from 'react'
import List from './List'
import {inject,observer} from 'mobx-react'
function Cart({cart}){
   return(
  <div>
  <h1>{cart.amount}</h1>
</div>
)
} 
export default inject('cart')(observer(Cart))
//inject是純函數(shù) 里面是數(shù)據(jù)state ， observer是觀察方法 里面是組件

 二、主要技術(shù)實(shí)現(xiàn)：

1.mobx下載安裝使用

2.用class類做全局?jǐn)?shù)據(jù)實(shí)例， new導(dǎo)出實(shí)例對(duì)象

3.a.引入store數(shù)據(jù)實(shí)例對(duì)象， -- 它的原理還是react的Context原理，import {Provider} from 'mobx-react'

b.使用Provider來(lái)包裹組件進(jìn)行跨組件傳值 <Provider><App/></Provider>

4.取mobx中的數(shù)據(jù)，使用注入(inject)手段 import {inject} from 'mobx-react'

a.inject是純函數(shù)：它會(huì)直接指定要注入到Provider提供的那個(gè)屬性就行了，需要加形參就可以使用數(shù)據(jù) function List(){return()}

const NewList = inject('cart')(List)   --->數(shù)據(jù)  - -> 組件名 ===>用時(shí)給組件直接加數(shù)據(jù)形參就直接使用 下發(fā)數(shù)據(jù)

export default NewList    

b.下發(fā)數(shù)據(jù)時(shí)使用綁定語(yǔ)法來(lái)展開(kāi)數(shù)據(jù)

5.mobx 6.x版本

a.構(gòu)造函數(shù)聲明數(shù)據(jù)類型

constructor(){
  makeObservable(
 //指向
this,
{    //定義當(dāng)前mobx類對(duì)象中數(shù)據(jù)類型
  list:observable,
  add:action,
  minus:action,
  amount:computed
})
}

b.給頁(yè)面組件添加監(jiān)聽(tīng)屬性 是給數(shù)據(jù)添加屬性 import {cart,observer} from 'react-mobx'

let ObersverComponent = observer(List)
export default inject('cart')(observerCompent)

是用來(lái)觀察cart中的可被觀察的數(shù)據(jù)對(duì)象是否被發(fā)生變化，如果發(fā)生變化，那么執(zhí)行頁(yè)面重新執(zhí)行渲染數(shù)據(jù)

mobx 特點(diǎn)：全局?jǐn)?shù)據(jù)修改方法監(jiān)聽(tīng)，有動(dòng)作傳參有修改，注入數(shù)據(jù)使用inject注入給組件使用數(shù)據(jù)，當(dāng)前頁(yè)面渲染初始化數(shù)據(jù)形參使用，

監(jiān)聽(tīng)修改用屬性observer（cart）

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

最新評(píng)論