Mobx6 使用

发表于 | 分类于 |
字数统计: 550 字 | 阅读时长 ≈ 2 分钟

前言

如果只写函数组件，建议用mobx-react-lite。如果需要写类组件，建议用mobx-react。

  1. mobx-react 支持类组件，mobx-react-lite 不支持类组件。
  2. mobx-react 支持Provider 和inject，mobx-react-lite 可以用React.createContext替代。
  3. mobx-react 支持特殊的观察对象 propTypes，mobx-react-lite 可以用typeScript代替。
  4. mobx-react(7.3.0)的大小：压缩前16kb，压缩后5.5kb；mobx-react-lite(3.3.0)的大小：压缩前6.2kb,压缩后2.2kb。

使用

因为项目里全面拥抱 hooks，所以选择 mobx-react-lite。

安装

1
yarn add mobx mobx-react-lite

定义 mobx 的 store

mobx支持多个多个状态模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { makeAutoObservable } from "mobx"

export class Timer {
    secondsPassed = 0

    constructor() {
        // 自动给属性添加响应式代理，方法会添加一层触发 action 的代理。
        makeAutoObservable(this,
            {  // 自定义各个类属性的mobx注解，如false(不注解)等

            },
            {  //  options参数，autoBind是指自动绑定this
                autoBind: true,
            }
        )
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const timeStore = new Timer();

export default timeStore;

定义导出出口 index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { createContext, useRef } from 'react';
import timeStore from './time/index';


// 创建context用来保存各项数据store
export const Store = createContext({ timeStore });

// StoreProvide组件，用来给子组件传递store
const StoresProvider: React.FC<{
  children: React.ReactNode[] | React.ReactNode;
}> = props => {
  return (
    <Store.Provider value={{ timeStore }}>{props.children}</Store.Provider>
  );
};
export default StoresProvider;

在 react 工程入口导入

1
2
3
4
5
6
7
8
9
10
11
import { store } from  './store/index';
import StoresProvider from '@stores/index';

ReactDOM.render(
  <React.StrictMode>
    <StoresProvider>
      <App  />
    </StoresProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

在页面使用

1
2
3
4
5
6
7
8
9
10
11
import { observer } from "mobx-react-lite"
import { Store } from '~/stores';

const View: React.FC = observer(() => { // observer 的高阶组件包裹，它负责把被包裹的组件添加到 Timer 的响应式依赖中去。
  const { timeStore } = useContext(Store)
  const { reset, secondsPassed } = timeStore;
  
  return (
     <button onClick={() => reset()}>Seconds passed: {secondsPassed}</button>
  )
})

参考文章

深入学习MobX6，使用React平台typeScript语言写MobX6的编码规范

react-mobx6+使用案例

MobX 是怎么实现的？