基于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）

这篇关于基于react使用mobx的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！