文章目录
前言
这里是mobx数据流管理的简单应用，官网学习：https://zh.mobx.js.org/；
我这里的例子是react+mobx的例子
一、开始前的准备
1.npx create-react-app my-app 使用react脚手架生成react项目；
2.npm install mobx mobx-react-lite --save
二、使用
1.简单使用
（1）使用makeObservable
写一个mobx的store文件：
//counterStore.js
import {
makeObservable, action, observable, computed, flow} from "mobx"
class CounterStore {
value = 0
name = "default"
loading = false
constructor(value = 0) {
makeObservable(this, {
value: observable,
name: observable,
loading: observable,
add: action.bound,
del: action.bound,
doubleValue: computed,
getBaseM: flow.bound,
getOther: flow.bound,
})
this.value = value
this.loading = false
}
add() {
this.value++
}
del() {
this.value--
}
get doubleValue() {
return this.value * 2
}
getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
{
"name": "yeld获取数据",
"age": 12,
"value": 1000
}
)
}, 2000);
})
}
getData2() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
{
"name": "async await获取数据",
"age": 16,
"value": 2000
}
)
}, 2000);
})
}
*getBaseM() {
const data = yield this.getData();
this.value = data.value;
this.name = data.name
}
async getOther() {
const data = await this.getData2();
this.value = data.value;
this.name = data.name
}
}
export default CounterStore
写一个counter的组件，再内部使用这个store做数据跟踪缓存
//counter.js
// import Store from "../store"
import Store from "../store/countStore"
import {
observer } from "mobx-react-lite"
import {
autorun, reaction } from "mobx";
import {
useState } from "react"
const Counter = () => {
const [storeInfo] = useState(new Store())
const test = (state) => {
state.name = "啊哈哈"
}
return <div>
<p>name: {
storeInfo.name}</p>
<button onClick={
() => test(storeInfo)}>测试</button>
<button style={
{
width: "120px",
margin: "10px"
}} onClick={
storeInfo.add}>+</button>
<span>{
storeInfo.value}</span>
<button style={
{
width: "120px",
margin: "10px"
}} onClick={
storeInfo.del}>-</button>
<div>
<p>二倍值：{
storeInfo.doubleValue}</p>
</div>
<button onClick={
storeInfo.getBaseM}>generator获取数据</button>
<button onClick={
storeInfo.getOther}>generator获取数据</button>
</div >
}
export default observer(Counter)
使用makeObservable做数据绑定的话，需要手动指定每个属性和方法绑定的类型，observable属性绑定，action是给方法做注解，flow给异步方法做注解，其中.bound是因为react中是严格模式，class中的方法会丢失this指向，所以需要手动绑定this，*.bound可以自动给你绑定this
（2）使用makeAutoObservable（注意，继承不能使用这个注解方法）
//counter.js
import {
makeAutoObservable } from "mobx"
class CounterStore {
value = 0
name = "default"
loading = false
constructor(value = 0) {
makeAutoObservable(this, {
getData: false,
getData2: false
}, {
autoBind: true
})
this.value = value
this.loading = false
}
add() {
this.value++
}
del() {
this.value--
}
get doubleValue() {
return this.value * 2
}
getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
{
"name": "yeld获取数据",
"age": 12,
"value": 1000
}
)
}, 2000);
})
}
getData2() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
{
"name": "async await获取数据",
"age": 16,
"value": 2000
}
)
}, 2000);
})
}
*getBaseM() {
const data = yield this.getData();
this.value = data.value;
this.name = data.name
}
async getOther() {
const data = await this.getData2();
this.value = data.value;
this.name = data.name
}
}
export default CounterStore
makeAutoObservable这个注解方法是自动帮你做observable，action，flow的指定，第二个参数可以指定哪些属性或方法不需要做跟踪；
2.异步请求
如上的代码，使用flow注解的代码，就是异步的代码，可以支持异步跟中数据变更并刷新组件
3.继承
我们在建一个叫SonStore.js的文件
//SonStore.js
import {
makeObservable, override } from "mobx"
import CounterStore from "./countStore"
class SonStore extends CounterStore {
constructor() {
super();
makeObservable(this, {
add: override
})
}
add() {
this.obj.value += 2
}
}
export default SonStore
如上代码， SonStore继承了CounterStore，并可以使用makeObservable指定需要被重写的方法，相比于父class，子class多了super初始化父级到子级中
注意：继承不能使用makeAutoObservable
总结
更多请参考官网：https://zh.mobx.js.org/；