react学习之mobx使用

mobx是一个可以和react良好配合的集中状态管理工具，相当于vue和vuex

1、mobx依赖包下载

npm install mobx mobx-react-lite

2、mobx使用

新建一个store文件

import { makeAutoObservable } from 'mobx'

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

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

  addCount = () => {
    // 定义action函数
    this.count++
  }
}
const counterStore = new CounterStore()
export default counterStore

在组件中使用store中的数据

// 导入counterStore文件
import counterStore from '../store/counter'
// 导入中间件连接mobx react完成响应式变化
import { observer } from 'mobx-react-lite'

function Layout() {
  return (
    <div>
      {/* 渲染数据 */}
      <h2>{counterStore.count}</h2>
      <button onClick={counterStore.addCount}>点击加一</button>
    </div>
  )
}
// 包括Layout组件
export default observer(Layout)

3、mobx计算属性——computed

1. 声明一个存在的数据
2. 定义get计算属性
3. 在makeAutoObservable方法中标记（不标记也能生效）

store文件

import { computed, makeAutoObservable } from 'mobx'

class CounterStore {
  // 定义原始数据
  list = [1, 2, 3, 4, 5]

  constructor() {
    makeAutoObservable(this, {
      filterList: computed,
      number: computed,
    })
  }

  get filterList() {
    return this.list.filter((item) => item > 2)
  }
  get number() {
    return this.list[0]
  }
}
const counterStore = new CounterStore()
export default counterStore

组件中使用

// 导入counterStore文件
import counterStore from '../store/counter'
// 导入中间件连接mobx react完成响应式变化
import { observer } from 'mobx-react-lite'

function Layout() {
  return (
    <div>
      {/* 渲染数据 */}
      <h2>{counterStore.filterList.join('-')}</h2>
      <h2>{counterStore.number}</h2>
    </div>
  )
}
// 包括Layout组件
export default observer(Layout)

4、mobx模块化——用于组合子模块

1、新建一个counter.js

import { makeAutoObservable } from 'mobx'

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

  constructor() {
    makeAutoObservable(this)
  }

  getCount = (count) => {
    this.count = count
  }
}

export { CounterStore }

2、新建一个lister.js

import { makeAutoObservable } from 'mobx'

class ListStore {
  list = ['react', 'vue']

  constructor() {
    makeAutoObservable(this)
  }

  addList = () => {
    this.list.push('angular')
  }
}

export { ListStore }

3、新建index.js，用于组合子模块，封装统一导出的供业务使用的方法

import React from 'react'
import { CounterStore } from './counter'
import { ListStore } from './lister'

// 1、声明一个rootstore
class RootStore {
  constructor() {
    // 对子模块进行实例化操作
    this.counterStore = new CounterStore()
    this.listStore = new ListStore()
  }
}

// 使用react context机制，完成统一方法封装
const rootStore = new RootStore()
// 查找机制：useContext 优先从Provider value找，如果找不到，就会找createContext方法传递过来的默认参数
const context = React.createContext(rootStore)

// 通过useContext拿到rootStore实例对象 然后返回
const useStore = () => React.useContext(context)

// 导出useStore方法，供组件通过调用该方法使用根实例
export default useStore

4、在组件中使用

// 导入useStore
import useStore from '../store/index'
// 导入中间件连接mobx react完成响应式变化
import { observer } from 'mobx-react-lite'

function Layout() {
  // 解构赋值
  const { counterStore, listStore } = useStore()
  return (
    <div>
      {/* 渲染数据 */}
      <h2>{counterStore.count}</h2>
      <h2>{listStore.list.join('-')}</h2>
      <button onClick={() => counterStore.getCount(5)}>count赋值</button>
    </div>
  )
}
// 包裹Layout组件
export default observer(Layout)