Mobx6 的新寫法
目前 MobX 已經(jīng)更新到 6.X 了，相比于之前有了極大的簡化，去掉了之前版本的裝飾器風(fēng)格寫法，主要原因是裝飾器在現(xiàn)在的 ES 規(guī)范中并不成熟，而且引入裝飾器語法也會增加打包后的代碼體積。
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?手動轉(zhuǎn)換
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 自動轉(zhuǎn)換
無需通過observable和action等修飾器，直接在構(gòu)造函數(shù)中使用makeAutoObservable來實現(xiàn)observable和action修飾器功能，使代碼更加簡潔。
class count{
? ? constructor() {
? ? ? ? makeAutoObservable(this)
? ? }
? ? totalCount = 0;
? ? add(){
? ? ? ? this.totalCount++;
? ? }
? ? sub(){
? ? ? ? this.totalCount--;
? ? }
}
注：一個 store，只能存在 makeAutoObservable 或 makeObservable 其中的一種。
02
runInAction函數(shù)
不同于 Vuex，將狀態(tài)的批改劃分為 mutation 和 action，同步批改放到 mutation 中，異步的操作放到 action 中。
在 MobX 中，不論是同步還是異步操作，都能夠放到 action 中，只是異步操作在修改屬性時，需要將賦值操作放到 runInAction 中
async initCount() {
? ? try {
? ? ? // 模擬獲取遠程的數(shù)據(jù)
? ? ? const count = await new Promise((resolve) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? resolve(10)
? ? ? ? }, 500)
? ? ? })
? ? ? // 獲取數(shù)據(jù)后，將賦值操作放到 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>
組件內(nèi)要引用：
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');? //? 手動傳入字符串，選擇要使用的內(nèi)容
? ? ? ? const PanelContent = {
? ? ? ? ? ? 'comA': comA,
? ? ? ? ? ? 'comB': comB
? ? ? ? }
? ? const ShowContent = PanelContent[store.funcType];
? ? return (
? ? ? ? <React.Fragment>
? ? ? ? ? ? <ShowContent />
? ? ? ? </React.Fragment>
? ? )
}
export default observer(Test );
