mobx的基础知识

1.mobx的安装：yarn add mobx  mobx-react-lite 这个针对于函数式组件的安装

2.mobx的类组件安装 ：yarn add  mobx  mobx-react 这个是对类组件的安装

app 代码:

import { del } from './store/del.js'
import { observer } from 'mobx-react-lite'
// 调用 observer这个函数包裹组件，实现数据的动态响应

function App17() {

  return (
    


      

      {del.add}
      -1
      
{del.List.join('-')}
      +1
    
  )
}
export default observer(App17)

store代码：

import { makeAutoObservable } from 'mobx'
class DelStore {
  add = 20
  arr = [1, 2, 3, 1, 4, 5, 6]
  constructor() {
    makeAutoObservable(this)
  }
  // 计算属性用get
  get List() {
    return this.arr.filter(item => item > 3)
  }
  // 自减属性函数
  addTel = () => {
    this.add = this.add - 1
  }
  // 自增属性函数
  addCe = () => {
    this.add = this.add + 1
  }
}
const del = new DelStore()
export { del }

 3.mobx模块化：

import React from 'react'
import { ListStore } from './listStore'
import { CountStore } from './CountStore'

class RootStore {
  constructor() {
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 实例化操作
const rootStore = new RootStore()
// 使用react context机制完成统一封装
// 查找机制：useContext优先从Provider value 找。找不到就找上一层createContext方法传递过来的默认参数
const context = React.createContext(rootStore)
// 这个方法作用：通过useContext 拿到rootStore实例对象然后返回
const useStore = () => React.useContext(context)

export { useStore }

 app代码：

import { observer } from 'mobx-react-lite'
import { useStore } from './store/index.js'
function App18() {
  // 接收一下这个值
  const { countStore, listStore } = useStore()
  // console.log(rootStore)
  // console.log(useStore)
  return (
    

      {countStore.count}
      +1

      函数组件
      {listStore.list.join('-')}
      -----
      wode 
    
  )
}
export default observer(App18)