Mobx6 的新写法

用户9914333

发布于 2022-07-22 14:49:28

7020

发布于 2022-07-22 14:49:28

文章被收录于专栏：bug收集

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

Mobx6 的新语法

老版本：

import {observable, action} 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 其中的一种。

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);
    }
  }

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 );

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-23，如有侵权请联系 cloudcommunity@tencent.com 删除

react