mobx案例学习笔记

2022-01-17

一、mobx 介绍

简介

一个可以和 react 配合密切的集中状态管理工具。通过运用透明的函数式响应编程，使状态管理变得简单和可扩展。

优势

1.简单

编写无模板的己见代码来精准描述你的意图

2.轻松实现最优渲染

依赖自动追踪最小渲染优化

3.架构自由

4.可移植

可移植，可测试

二、mobx 基础使用

配置环境

1.使用 create-react-app 初始化 react 项目

1	npx create-react-app mobx-react-app

说明：create-react-app 是用来创建 react 工程化工具的命令，mobx-react-app 是项目名称目录

2.安装 mobx 和 mobx-react-lite

1	yarn add mobx mobx-react-lite

说明：mobx 是核心工具包，mobx-react-lite 是 mobx 和 react 配合时的包，注意它只能用于函数式组件。

整体说明

1.代码组织

store 独立于组件存在，不和任何组件绑定
store 中的数据可以再多个组件中共享，并提供数据同步

2.实现步骤

初始化 mobx
链接 React

使用

1.counterStore.js 定义 store 及 action

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//mobx相关操作
//1.定义数据 2.响应式处理 3.定义action 4.实例化并且导出
import { makeAutoObservable } from 'mobx';

class Counter {
    //定义数据
    count = 0;
    //响应式处理
    constructor() {
        makeAutoObservable(this);
    }
    //定义action函数
    addCount = () => {
        this.count++;
    };
}

//实例化
const counterStore = new Counter();

export default counterStore;

2.App.js 父组件引入 store 并使用

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
//导入counterStore
import counterStore from './store/counterStore';
import listStore from './store/listStore';
import { observer } from 'mobx-react-lite';
import Test from './Test';

function App() {
    return (
        <div className="App">
            <button onClick={counterStore.addCount}>{counterStore.count}</button>
            <button onClick={listStore.addList}>修改</button>
            <Test></Test>
            {/* 原数组 */}
            {listStore.list.map((item) => (
                <li>{item}</li>
            ))}
            <br />
            {/* 新数组 计算得到的 */}
            {listStore.filterList.map((item) => (
                <li>{item}</li>
            ))}
        </div>
    );
}
//使用observer方法包裹组件，使得可以响应式更新数据
//只能用于函数组件
export default observer(App);

3.Test.js 兄弟组件使用 mobx 中的数据

1
2
3
4
5
6
7
8
import counterStore from './store/counterStore';
const Test = () => {
    return <div>test count:{counterStore.count}</div>;
};
//因为与App组件是被调用的父子组件关系，所以这里可以observer方法包裹
//若是兄弟关系，则必须加上observer
//为了方便，最好还是加上
export default Test;

4.listStore.js 使用计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//计算属性
import { computed, makeAutoObservable } from 'mobx';

class ListStore {
    //数据 原数组
    list = [1, 2, 3, 4, 5, 6];
    //响应式处理
    constructor() {
        makeAutoObservable(this, {
            filterList: computed, //做一个标记 告诉mobx这个属性是一个计算属性
        });
    }
    //计算属性 运用类中的getters原理
    get filterList() {
        return this.list.filter((item) => item > 2);
    }
    //action方法
    addList = () => {
        this.list.push(7, 8, 9);
    };
}
const listStore = new ListStore();
export default listStore;