react mobx 基本用法示例小結
react mobx 基本用法
一. 安裝mobx
- yarn add mobx
- yarn add mobx-react-lite
二. 創(chuàng)建一個mobx文件夾統(tǒng)一管理項目所有的數據
三. 在mobx文件夾里創(chuàng)建一個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; // 數據
constructor() {
makeAutoObservable(this)
}
// 更新數據(此方法可以是異步的，可以在里面調完接口在更新數據)
updateNumber = (data) =>{
this.number = data;
}
}
const DemoStore = new DemoStoreData()
export default DemoStore;五. 使用
// 導入的是 三 步驟 創(chuàng)建的index.js 文件
import { useMobStore } from "./mobx/index.js";
import { observer } from "mobx-react-lite";
const PageList = () => {
// 解構的是 三 步驟里的 demoStore
const { demoStore } = useMobStore();
return (
<div>
{demoStore.number}
</div>
)
}
export default observer(PageList);六. 注意
如果組件想使用React.memo() 進行性能優(yōu)化
在優(yōu)化的那個組件不要有任何mobx相關的數據和方法
因為memo函數里的舊值和新值，只能監(jiān)聽到通過redux 或者 組件傳遞的值，mobx傳遞的值無法進行監(jiān)聽。
目前我采用的方法是 最后一層優(yōu)化的組件 通過數據傳遞的方式進行。（如有優(yōu)化的方式歡迎評論告知,萬分感謝！?。。?/p>
基于react使用mobx的使用
1.mobx是一個輕量級的狀態(tài)管理器，所以很簡單(單一全局數據使用class)類有get 數據方法
我們需要把數據做成全局數據，并且這個數據不能污染全局數據 -- 應該是一個閉包(ES6 中class是一個語法糖，本身是一個函數)
所以應該定義一個類，然后導出一個實例（因為數據要全局通用，所以不能導出類，應該導出實例 -- 單例模式）
import {action , computed,makeObservable,observable} from "mobx"
class Store{
//在mobx6.x版本中，需要在構造函數中聲明數據類型
constructor(){
makeObservable(
//指定目標
this,
//定義當前mobx類對象中的數據類型
{
list:observable,
add:action,
minus:action,
amount:computed}
)
}
list=Array.from(Array(8),(_,i)=>{
return {id:'ID-'+i,name:`華為手機Mate2${i}`,price:Math.ceil(Math.random() * 2000 + 3000), count: 1}
})
//在類中，有一個getter方法，在使用的時候是一個數據
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是實例對象 Store類 ，Store是導出類輕量級狀態(tài)管理器 mobx
mobx是一個可伸縮的、輕量級（與數據復雜度有關的一個指標）的狀態(tài)管理器
在項目中有一些數據需要全局管理(數據存在共用 -- 比如token、用戶信息，數據存在傳遞、可緩存性)
使用一個庫或則一個技術：
首先要考慮業(yè)務 -- 數組數據 -- 購物車數組([{key:唯一標識，name:產品名字,price:產品單價，count：數量}]) -- 可以修改數量方法(add/munis需要傳遞每次減少數量，傳遞一個唯一標識) -- 購物車計算總價格(amount,每次數據變化都要重新計算)
使用庫 -> 安裝：cnpm i -S mobx mobx-react (mobx的5.X和6.X，他們的使用方法和方法名字等區(qū)別很多，幾乎沒有任何共同點)
開發(fā)過程：還原一個購物車頁面，一切皆組件，最小化到一個元素（因為react是沒有做組件重新渲染優(yōu)化 - - 賦值和渲染優(yōu)化是有的）
標簽組件 + 按鈕組件 => 組成一個行組件 =>組成一個列表組件 => 形成一個購物車頁面組件 => 掛載到項目組件 => 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是純函數 里面是數據state ， observer是觀察方法 里面是組件二、主要技術實現(xiàn)：
1.mobx下載安裝使用
2.用class類做全局數據實例， new導出實例對象
3.a.引入store數據實例對象， -- 它的原理還是react的Context原理，import {Provider} from 'mobx-react'
b.使用Provider來包裹組件進行跨組件傳值 <Provider><App/></Provider>
4.取mobx中的數據，使用注入(inject)手段 import {inject} from 'mobx-react'
a.inject是純函數：它會直接指定要注入到Provider提供的那個屬性就行了，需要加形參就可以使用數據 function List(){return()}
const NewList = inject('cart')(List) --->數據 - -> 組件名 ===>用時給組件直接加數據形參就直接使用 下發(fā)數據
export default NewList
b.下發(fā)數據時使用綁定語法來展開數據
5.mobx 6.x版本
a.構造函數聲明數據類型
constructor(){
makeObservable(
//指向
this,
{ //定義當前mobx類對象中數據類型
list:observable,
add:action,
minus:action,
amount:computed
})
}b.給頁面組件添加監(jiān)聽屬性 是給數據添加屬性 import {cart,observer} from 'react-mobx'
let ObersverComponent = observer(List)
export default inject('cart')(observerCompent)是用來觀察cart中的可被觀察的數據對象是否被發(fā)生變化，如果發(fā)生變化，那么執(zhí)行頁面重新執(zhí)行渲染數據
mobx 特點：全局數據修改方法監(jiān)聽，有動作傳參有修改，注入數據使用inject注入給組件使用數據，當前頁面渲染初始化數據形參使用，
監(jiān)聽修改用屬性observer（cart）
到此這篇關于react mobx 用法的文章就介紹到這了,更多相關react mobx 用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react-redux action傳參及多個state處理的實現(xiàn)
本文主要介紹了react-redux action傳參及多個state處理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
簡析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
在使用reactjs庫的時候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了react實現(xiàn)記錄拖動排序的相關資料,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了React Navigation 路由傳參,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Webpack3+React16代碼分割的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了如何使用react-dnd編寫一個可拖拽排列的list,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要為大家介紹了Jira 任務管理系統(tǒng)項目總結講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React中的setState使用細節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹，需要的朋友可以參考下2022-12-12