10 react-mobx学习

Mobx介绍

mobx和react的关系，相当于vuex和vue的关系

状态管理工具

类似的工具还有：redux，dva，recoil

使用最多的是mobx和redux

Mobx环境配置

Mobx是一个独立的响应式的库，可以独立于任何UI框架存在，但是通常大家习惯把它和React进行绑定使用，用Mobx来做响应式数据建模，React作为UI视图框架渲染内容，我们环境的配置需要三个部分

1. 一个create-react-app创建好的React项目环境
2. mobx框架本身
3. 一个用来链接mobx和React的中间件

安装
npm install mobx mobx-react-lite

实现方法

初始化mobx

初始化步骤

1. 定义数据状态state
2. 在构造器中实现数据响应式处理 makeAutoObservble
3. 定义修改数据的函数action
4. 实例化store并导出

定义一个store

// 编写第一个mobx store案例

import { makeAutoObservable } from "mobx"

class CounterStore {
  // 1，定义数据
  count = 0

  constructor() {
    // 2，把数据弄成响应式
    makeAutoObservable(this)
  }

  // 3，定义一个函数
  addCount = () => {
    console.log(this.count)
    this.count++
  }
}

// 4，实例化，然后到处给react使用
const counterStore = new CounterStore()
export { counterStore }

使用

// 1，导入countStore实例
import { counterStore } from "./store/counter"

// 2，导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
  return (
    <div className="App">
      <button onClick={counterStore.addCount}>{counterStore.count}</button>
    </div>
  )
}

// 3，包裹APP，实现响应式
export default observer(App)

computed计算属性

实现步骤

1. 生命一个存在的数据
2. 通过get关键词 定义计算属性
3. 在 makeAutoObservable 方法中标记计算属性

import { computed, makeAutoObservable } from "mobx"

class CounterStore {
  list = [1, 2, 3, 4]

  // 标记filterList为计算属性
  constructor() {
    makeAutoObservable(this, {
      filterList: computed
    })
  }

  // 计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  addCount = () => {
    this.list.push(6, 7, 8)
  }
}

const counterStore = new CounterStore()
export { counterStore }

使用方法

// 1，导入countStore实例
import { counterStore } from "./store/counter"

// 2，导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
  return (
    <div className="App">
      <button onClick={counterStore.addCount}>{counterStore.list.join('-')}</button>
      <button onClick={counterStore.addCount}>{counterStore.filterList.join('-')}</button>
    </div>
  )
}

// 3，包裹APP，实现响应式
export default observer(App)

模块化

统一使用一个store

例如：

counterStore：

import { computed, makeAutoObservable } from "mobx"

class CounterStore {
  count = 0

  constructor() {
    makeAutoObservable(this)
  }

  addCount = () => {
    this.count++
  }
}

export default CounterStore

ListStore：

// 编写第一个mobx store案例

import { computed, makeAutoObservable } from "mobx"

class ListStore {
  list = [1, 2, 3, 4]

  // 标记filterList为计算属性
  constructor() {
    makeAutoObservable(this, {
      filterList: computed
    })
  }

  // 计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  addList = () => {
    this.list.push(6, 7, 8)
  }
}

export default ListStore 

组合store，放入index.js

// 组合子模块
// 封装统一导出的mobx
import CounterStore from "./counter.Store"
import ListStore from "./list.Store"
import React from "react"

class RootStore {
  constructor() {
    // 实例化
    this.counterStore = new CounterStore()
    this.listStore = new ListStore()
  }
}
// 实例化
const store = new RootStore()
// 使用react context 机制，完成统一方法封装
// 之前使用Provider value= {传递的数据}
// 查找机制：useContext有限从Provider value 如果找不到，就会找默认参数
// createContext方法传递过来的 默认参数
const context = React.createContext(store)

// 通过useContext拿到rootStore实例对象
// 只要在业务组件中 调用useStore() 就能获取rootStore
const useStore = () => React.useContext(context)
export { useStore }

例如在APP中使用

// 1，导入countStore实例
import { useStore } from "./store/index"

// 2，导入中间件连接mobx react完成响应式
import { observer } from 'mobx-react-lite'
function App () {
  // 
  const store = useStore()
  // 结构赋值，破坏响应式，用哪个store就解析哪个
  // const {counterStore,listStore} = useStore()
  return (
    <div className="App">
      <button onClick={store.counterStore.addCount}>{store.counterStore.count}</button>
      <button onClick={store.listStore.addList}>{store.listStore.filterList.join('-')}</button>
    </div>
  )
}

// 3，包裹APP，实现响应式
export default observer(App)