react_11

MobX

介绍

需求，组件0 改变了数据，其它组件也想获得改变后的数据，如图所示

这种多个组件之间要共享状态数据，useState 就不够用了，useContext 也不好用了

能够和 react 配合使用的状态管理库有

• MobX

• Redux

其中 Redux API 非常难以使用，这里选择了更加符合人类习惯的 MobX，它虽然采用了面向对象的语法，但也能和函数式的代码很好地结合

文档

• MobX 中文文档

• MobX 官方文档

安装

 npm install mobx mobx-react-lite

在异步操作里为状态属性赋值，需要放在 runInAction 里，否则会有警告错误

使用 store，所有使用 store 的组件，为了感知状态数据的变化，需要用 observer 包装，对应着图中 reactions

• mobx 目前版本是 "mobx": "^6.10.2"

• mobx-react-lite 目前版本是 "mobx-react-lite": "^4.0.5"

• 名词

• 

• Actions 用来修改状态数据的方法

• Observable state 状态数据，可观察

• Derived values 派生值，也叫 Computed values 计算值，会根据状态数据的改变而改变，具有缓存功能

• Reactions 状态数据发生变化后要执行的操作，如 react 函数组件被重新渲染

• 使用

  首先，定义一个在函数之外存储状态数据的 store，它与 useState 不同：

• useState 里的状态数据是存储在每个组件节点上，不同组件之间没法共享

• 而 MobX 的 store 就是一个普通 js 对象，只要保证多个组件都访问此对象即可

• import axios from "axios";
  import { Student } from "../model/Student";
  import { makeAutoObservable, runInAction, makeObservable, observable, action, computed } from 'mobx'
  import R from "../model/R";
  class StudentStore {
      //属性 对应状态数据(observable state),可观察
      @observable student: Student = { id: 0, name: 'zhangsan' }
      //对应着action方法(用来修改状态数据的方法)
  //手动标识的时候使用 @action
      @action setName(name: string) {
          this.student.name = name
      }
      //对应着action方法(用来修改状态数据的方法)
      @action async fetch(id: number) {
          const resp = await axios.get<R<Student>>(`http://localhost:8080/api/students/${id}`)
          runInAction(() => {
              this.student = resp.data.data
          })
      }
      //派生值(derived values)或者叫计算值(computed values)会根据状态数据的改变而改变,计算值具有一个特性，
      //它具有缓存功能,比如第一次输入的是宋远桥,会计算出是宋大侠,第二次以及之后，如果宋远桥不变,那 
      //么displayName不会再执行了,它第一次执行的时候会把结果缓存起来
      @computed get displayName() {
          console.log('dispalyName 执行了')
          const first = this.student.name.charAt(0)
          if (this.student.sex === '男') {
              return first + '大侠'
          } else if (this.student.sex === '女') {
              return first + '女侠'
          }
          else {
              return ''
          }
      }
      //构造器
      constructor() {
  //手动标识的时候使用
          makeObservable(this)
  //自动使用的时候使用，如果不使用此代码，那么属性和方法就是普通属性和方法
          //makeAutoObservable(this)
      }
  }
  export default new StudentStore()

  其中 makeAutoObservable 会

• 将对象的属性 student 变成 Observable state，即状态数据

• 将对象的方法 fetch 变成 Action，即修改数据的方法

• 将 get 方法变成 Computed values

• 手动标识的时候需要在在tsconifg.json 中加入配置

• {
    "compilerOptions": {
      // ...
      "experimentalDecorators": true
    }
  }