小白一看就会的React学习笔记 九（ 状态管理工具 Mobx ）

一、 优势

1. 简单

编写无模板的极简代码精准描述你的意图

2. 轻松实现最优渲染

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

3. 架构自由

可移植, 可测试 无特殊心智负担 2. 配置开发环境
Mobx是一个独立的响应式的库，可以独立于任何UI框架存在，但是通常大家习惯把它和React进行绑定使用，用Mobx来做响应式数据建模，React作为UI视图框架渲染内容，我们环境的配置需要三个部分
1一个create-react-app创建好的React项目环境
2mobx框架本身
3一个用来链接mobx和React的中间件

二、 环境配置

Mobx是一个独立的响应式的库，可以独立于任何UI框架存在，但是通常大家习惯把它和React进行绑定使用，用Mobx来做响应式数据建模，React作为UI视图框架渲染内容，我们环境的配置需要三个部分

1. 一个create-react-app创建好的React项目环境
2. mobx框架本身
3. 一个用来链接mobx和React的中间件 npx add mobx mobx-react-lite

1. 初始化mobx

初始化步骤

1. 定义数据状态state
2. 在构造器中实现数据响应式处理 makeAutoObservble
3. 定义修改数据的函数action
4. 实例化store并导出

想要使用它的值 就都得这样

实现步骤

1. 在组件中导入counterStore实例对象
2. 在组件中使用storeStore实例对象中的数据
3. 通过事件调用修改数据的方法修改store中的数据
4. 让组件响应数据变化

2. mobx 计算属性（衍生状态）

概念: 有一些状态根据现有的状态计算（衍生）得到，我们把这种状态叫做计算属性 实现步骤

1. 生命一个存在的数据
2. 通过get关键词 定义计算属性
3. 在 makeAutoObservable 方法中标记计算属性

使用

3. 模块化

实现步骤

1. 拆分模块js文件，每个模块中定义自己独立的state/action
2. 在store/index.js中导入拆分之后的模块，进行模块组合
3. 利用React的context的机制导出统一的useStore方法，给业务组件使用