1. Mobx介绍
一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理。
优势：
-
简单
编写无模板的极简代码精准描述你的意图
-
轻松实现最优渲染
依赖自动追踪，实现最小渲染优化
-
架构自由
可移植, 可测试 无特殊心智负担
2. 配置开发环境
Mobx是一个独立的响应式的库，可以独立于任何UI框架存在，但是通常大家习惯把它和React进行绑定使用，用Mobx来做响应式数据建模，React作为UI视图框架渲染内容，我们环境的配置需要三个部分：
- 一个create-react-app创建好的React项目环境
- mobx框架本身
- 一个用来链接mobx和React的中间件
# 创建项目
$ yarn create vite react-mobx --template react
# 安装mobx和中间件工具 mobx-react-lite 只能函数组件中使用
$ yarn add mobx mobx-react-lite
3. 基础使用
需求：使用mobx实现一个计数器的案例
1. 初始化mobx
初始化步骤
- 定义数据状态
- 在构造器中实现数据响应式处理
- 定义action函数
- 实例化store并导出
counterStore.js
import { makeAutoObservable } from 'mobx'
class CounterStore {
count = 0 // 1.定义数据
constructor() {
makeAutoObservable(this) 2.// 响应式处理
}
// 3.定义修改数据的方法
addCount = () => {
this.count++
}
}
//4.实例化store，并导出给react使用
const counter = new CounterStore()
export default counter
2. React使用store
实现步骤
- 在组件中导入counterStore实例对象
- 在组件中使用storeStore实例对象中的数据
- 通过事件调用修改数据的方法修改store中的数据
- 让组件响应数据变化
App.js
// 1.导入countStore
import { counterStore } from './store/counter';
// 2.导入中间件连接 mobx react 完成响应式变化
import { observer } from 'mobx-react-lite';
function App() {
return (
<div>
{/* 把store中的count渲染一下 */}
{counterStore.count}
{/* 点击事件触发action函数修改count值 */}
<button onClick={counterStore.addCount}>加1</button>
</div>
);
}
// 3.包裹App
export default observer(App);
4.计算属性 computed
关键：原生js中的每个对象都继承了object，都有get和set方法，类也是对象
实现步骤
- 生命一个存在的数据
- 通过get关键词 定义计算属性
- 在 makeAutoObservable 方法中标记计算属性
// couter.js
import { makeAutoObservable } from 'mobx';
class CouterStore {
// 1）定义一个原始数据 list
list = [1, 2, 3, 4, 5, 6];
constructor() {
// 2.把数据弄成响应式
makeAutoObservable(this);
}
// 2）定义计算属性
get filterList() {
return this.list.filter((item) => item > 2);
}
// 3）修改list方法
addList = () => {
this.list.push(7, 8, 9);
};
}
// 4.实例化 然后导出给react使用
const counterStore = new CouterStore();
export { counterStore };
//App.js
// 1.导入countStore
import { counterStore } from './store/counter';
// 2.导入中间件连接 mobx react 完成响应式变化
import { observer } from 'mobx-react-lite';
function App() {
return (
<div>
{/* 使用计算属性 */}
{counterStore.filterList.join('-')}
<button onClick={counterStore.addList}>修改数组</button>
</div>
);
}
// 3.包裹App
export default observer(App);
5.模块化
场景: 一个项目有很多的业务模块，我们不能把所有的代码都写到一起，这样不好维护，提了提供可维护性，需要引入模块化机制
实现步骤
- 拆分模块js文件，每个模块中定义自己独立的state/action
- 在store/index.js中导入拆分之后的模块，进行模块组合
- 利用React的context的机制导出统一的useStore方法，给业务组件使用
- 两个子模块：
//子模块 src/store/counter.Store.js
// 编写第一个mobx store小案例
import { makeAutoObservable } from 'mobx';
class CounterStore {
// 1.定义数据
count = 0;
// 1）定义一个原始数据 list
list = [1, 2, 3, 4, 5, 6];
constructor() {
// 2.把数据弄成响应式
makeAutoObservable(this);
}
// 2）定义计算属性
get filterList() {
return this.list.filter((item) => item > 2);
}
// 3）修改list方法
addList = () => {
this.list.push(7, 8, 9);
};
// 3. 定义action函数（修改数据）
addCount = () => {
this.count++;
};
}
// 4.实例化 然后导出给react使用
export { CounterStore };
//子模块 src/store/list.Store.js
import { makeAutoObservable } from 'mobx';
class ListStore {
list = ['react', 'vue'];
constructor() {
makeAutoObservable(this);
}
addList = () => {
this.list.push('angular');
};
}
export { ListStore };
- 组合子模块
//src/store/index.js
// 封装统一导出的供业务使用的方法
import React from 'react';
// 导入子模块
import { CounterStore } from './counter.Store';
import { ListStore } from './list.Store';
// 1.声明一个rootStore
class RootStore {
constructor() {
// 对子模块进行实例化操作
// 将来实例化根store的时候，根store有两个属性，分别是counterStore和listStore,且各自对应的值就是我们导入的子模块实例对象
this.counterStore = new CounterStore();
this.listStore = new ListStore();
}
}
/**样本代码 */
// 实例化操作
const rootStore = new RootStore();
// 使用react context 完成统一方法封装
//核心目的：让每个业务组件可以通过统一一样的方法获取store中的数据
//知识：Provider value ={传递的数据} 查找机制-useContext 优先从Provider value找，如果找不到，就会找createContext方法传递过来的默认参数
const context = React.createContext(rootStore);
// 这个方法作用：通过useContext拿到rootStore实例对象，然后返回 只要在业务组件中，调用useStore()获得rootStore
const useStore = () => React.useContext(context);
export { useStore };
- 业务组件使用
//App.js
import { observer } from 'mobx-react-lite';
import { useStore } from './store/index';
function App() {
// const rootStore = useStore();
// console.log(rootStore);
// 解构赋值到 store实例对象即可，防止破坏响应式，用哪个store就解构哪个store即可
const { counterStore } = useStore();
return (
<div>
{counterStore.count}
<button onClick={counterStore.addCount}>+</button>
</div>
);
}
// 3.包裹App
export default observer(App);
6.Mobx基础使用总结
-
初始化mobx的过程是怎么样的？
声明数据 --> 响应式处理 --> 定义action函数 --> 实例化导出
-
mobx如何配合react,需要依赖什么包？
mobx-react-lite作为链接包，导出observer方法，包裹组件
-
模块化解决什么问题？
维护性问题
-
如何实现mobx的模块化？
按照功能拆分store模块，根模块中组合子模块，利用context 机制依赖注入
