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