mobx 粗浅学习笔记

一个简单的例子

先下载引入依赖

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

通过类实例化一个对象，在构造器中使用 makeAutoObservable 方法绑定 new 出来的实例。

当改变返回的 timeState，就会触发副作用（更新视图）。

使用这种类构造出一个实例的方式可以实现复用。

class timeState {
  constructor() {
    makeAutoObservable(this)
  }

  second = 0;
  
  increase() {
    this.second ++
  }

  reset() {
    this.second = 0
  }
}

const timeState1 = new timeState()

setInterval(() => {
  timeState1.increase()
}, 1000)

export default observer(() => {
  return (
    // 这里使用箭头函数，避免 this 为 undefined
    <button onClick={() => timeState1.reset()}>已过秒数：{timeState1.second}秒</button>
  )
})

也可以直接 makeAutoObservable 一个对象，这种要想复用只能复制粘贴了。

// 相当于 Vue 中的 data
const timeState = makeAutoObservable({
  second: 0,
  increase() {
    this.second ++
  },
  reset() {
    this.second = 0
  }
})

可以看到有一点 Vue 的选项式 api 那味了。