其他分享
首页 > 其他分享> > 基于react使用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)

 

标签:list,react,mobx,inject,使用,组件,数据
来源: https://www.cnblogs.com/cc-font/p/16046138.html