Mobx6 的新写法
目前 MobX 已经更新到 6.X 了，相比于之前有了极大的简化，去掉了之前版本的装饰器风格写法，主要原因是装饰器在现在的 ES 规范中并不成熟，而且引入装饰器语法也会增加打包后的代码体积。
01
Mobx6 的新语法
老版本：
import {observable, action,makeObservable} from 'mobx'
class count{
constructor() {
makeObservable(this)
}
@observable totalCount = 0;
@action
add(){
this.totalCount++;
}
@action
sub(){
this.totalCount--;
}
}
mobx6 新版本
方法1: 使用 makeObservable 手动转换
import {observable, action,makeObservable} from 'mobx'
class count{
constructor() {
makeObservable(this,{
totalCount:observable,
add:action,
sub:action
})
}
totalCount = 0;
add(){
this.totalCount++;
}
sub(){
this.totalCount--;
}
}
方法2：makeAutoObservable 自动转换
无需通过observable和action等修饰器，直接在构造函数中使用makeAutoObservable来实现observable和action修饰器功能，使代码更加简洁。
class count{
constructor() {
makeAutoObservable(this)
}
totalCount = 0;
add(){
this.totalCount++;
}
sub(){
this.totalCount--;
}
}
注：一个 store，只能存在 makeAutoObservable 或 makeObservable 其中的一种。
02
runInAction函数
不同于 Vuex，将状态的批改划分为 mutation 和 action，同步批改放到 mutation 中，异步的操作放到 action 中。
在 MobX 中，不论是同步还是异步操作，都能够放到 action 中，只是异步操作在修改属性时，需要将赋值操作放到 runInAction 中
async initCount() {
try {
// 模拟获取远程的数据
const count = await new Promise((resolve) => {
setTimeout(() => {
resolve(10)
}, 500)
})
// 获取数据后，将赋值操作放到 runInAction 中
runInAction(() => {
this.count = count
})
} catch (e) {
throw new Error(e);
}
}
03
react中使用 mobx
mobx-react
mobx-react-lite 是一个轻量级的 mobx-react 库，提供了对 react hook 的支持，这一点在 react 16.8 以后是及其必要的。mobx-react@6 直接将 mobx-react-lite 作为它的一个依赖。
1. 使用mobx-react 提供的 Provider
index.js 中使用：
import store from './store/index'
import {Provider} from 'mobx-react'
使用方法：
<Provider {...store}>
<App />
</Provider>
组件内要引用：
import {inject, observer} from 'mobx-react'
export default inject('count')(observer(Count))
2. context 对象提供的 Provider示例（hook）
import React from 'react';
import { observer } from 'mobx-react';
import comA from 'comA ';
import comB from 'comB';
import { useStores } from '@utils/index';
function useStores(name) {
return React.useContext(MobXProviderContext)[name];
}
const Test = () => {
const store = useStores('flagStore'); // 手动传入字符串，选择要使用的内容
const PanelContent = {
'comA': comA,
'comB': comB
}
const ShowContent = PanelContent[store.funcType];
return (
<React.Fragment>
<ShowContent />
</React.Fragment>
)
}
export default observer(Test );
