doubleyong
管理员
管理员
  • 最后登录2022-01-18
  • 发帖数1052
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:473回复:0

[react]Mobx6 的新写法

楼主#
更多 发布于:2021-09-26 11:01
目前 MobX 已经更新到 6.X 了,相比于之前有了极大的简化,去掉了之前版本的装饰器风格写法,主要原因是装饰器在现在的 ES 规范中并不成熟,而且引入装饰器语法也会增加打包后的代码体积。

1 、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 );
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号