一个简单的例子
先下载引入依赖
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 那味了。