react mobx 基本用法示例小结
作者：请叫我大哥大
react mobx 基本用法
一. 安装mobx
- yarn add mobx
- yarn add mobx-react-lite
二. 创建一个mobx文件夹统一管理项目所有的数据
三. 在mobx文件夹里创建一个index.js 统一管理
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};四. 创建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;五. 使用
// 导入的是 三 步骤 创建的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() 进行性能优化
在优化的那个组件不要有任何mobx相关的数据和方法
因为memo函数里的旧值和新值，只能监听到通过redux 或者 组件传递的值，mobx传递的值无法进行监听。
目前我采用的方法是 最后一层优化的组件 通过数据传递的方式进行。（如有优化的方式欢迎评论告知,万分感谢！！！）
基于react使用mobx的使用
1.mobx是一个轻量级的状态管理器，所以很简单(单一全局数据使用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是导出类轻量级状态管理器 mobx
mobx是一个可伸缩的、轻量级（与数据复杂度有关的一个指标）的状态管理器
在项目中有一些数据需要全局管理(数据存在共用 -- 比如token、用户信息，数据存在传递、可缓存性)
使用一个库或则一个技术：
首先要考虑业务 -- 数组数据 -- 购物车数组([{key:唯一标识，name:产品名字,price:产品单价，count：数量}]) -- 可以修改数量方法(add/munis需要传递每次减少数量，传递一个唯一标识) -- 购物车计算总价格(amount,每次数据变化都要重新计算)
使用库 -> 安装：cnpm i -S mobx mobx-react (mobx的5.X和6.X，他们的使用方法和方法名字等区别很多，几乎没有任何共同点)
开发过程：还原一个购物车页面，一切皆组件，最小化到一个元素（因为react是没有做组件重新渲染优化 - - 赋值和渲染优化是有的）
标签组件 + 按钮组件 => 组成一个行组件 =>组成一个列表组件 => 形成一个购物车页面组件 => 挂载到项目组件 => 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是观察方法 里面是组件二、主要技术实现：
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) --->数据 - -> 组件名 ===>用时给组件直接加数据形参就直接使用 下发数据
export default NewList
b.下发数据时使用绑定语法来展开数据
5.mobx 6.x版本
a.构造函数声明数据类型
constructor(){
makeObservable(
//指向
this,
{ //定义当前mobx类对象中数据类型
list:observable,
add:action,
minus:action,
amount:computed
})
}b.给页面组件添加监听属性 是给数据添加属性 import {cart,observer} from 'react-mobx'
let ObersverComponent = observer(List)
export default inject('cart')(observerCompent)是用来观察cart中的可被观察的数据对象是否被发生变化，如果发生变化，那么执行页面重新执行渲染数据
mobx 特点：全局数据修改方法监听，有动作传参有修改，注入数据使用inject注入给组件使用数据，当前页面渲染初始化数据形参使用，
监听修改用属性observer（cart）
到此这篇关于react mobx 用法的文章就介绍到这了,更多相关react mobx 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！