react函数式组件中mobx的快速上手(纯干货)

安装

npm install mobx mobx-react

定义仓库对象

typescript类型文件 src/store/index.ts

核心:makeAutoObservable文件包裹该导出的对象实例.

import { makeAutoObservable } from 'mobx';

class MyTestStore {
    constructor() {
        makeAutoObservable(this);
    }
    // 第一层中一个字符串
    aStr: string = '';
    // 一个对象
    userInfo: UserInfo = new UserInfo();
    // 另一个对象
    authorized: Authorized = new Authorized();
}

// 子数据 !!【注:该子数据未进行 makeAutoObservable 自动监听 】
class UserInfo {
    name: string = '';
    age: number = 0;
}

//子数据
class Authorized {
  // 注: 子数据 也进行了自动监听
    constructor() {
        makeAutoObservable(this);
    }
    isSystemManager: boolean = false;
    isRootUser: boolean = false;
}

export const myTestStore = new MyTestStore();

组件中使用

关键点1: 使用store对象的组件需要用observer包裹,则会有响应试.

关键点2: 嵌套的对象也需要使用makeAutoObservable才具有响应效果.未被监听的值会被修改,但并不会触发页面的更新.

import React from 'react';
import { observer } from 'mobx-react';
import { myTestStore } from '@/store/index.ts';

function CompA() {
    return (
        <>
            <div>{JSON.stringify(myTestStore)}</div>
            <button
                onClick={() => {
                    //这样修改会生效 (嵌套的对象,也包裹一层响应监听后,则可以直接修改)
                    myTestStore.authorized.isRootUser = !myTestStore.authorized.isRootUser;
                }}>
                {/* authorized 对象也有被监听 */}
                点击我,改变【authorized】对象的值,会触发页面刷新
            </button>
            <button
                onClick={() => {
                    //这样修改不会生效 (嵌套的对象,未多包裹一层响应,默认不监听它的改变)
                    myTestStore.userInfo.age = parseInt(String(Math.random() * 100));
                }}>
                {/* userInfo 对象未被监听 */}
                点击我,改变【userInfo】对象的值,但不会触发页面刷新
            </button>
        </>
    );
}
export default observer(CompA);

-完-