react-mobx基础
git地址
1. Mobx介绍
一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理
优势
- 简单
编写无模板的极简代码精准描述你的意图
- 轻松实现最优渲染
依赖自动追踪，实现最小渲染优化
- 架构自由
可移植, 可测试 无特殊心智负担
2. 配置开发环境
Mobx是一个独立的响应式的库，可以独立于任何UI框架存在，但是通常大家习惯把它和React进行绑定使用，用Mobx来做响应式数据建模，React作为UI视图框架渲染内容，我们环境的配置需要三个部分
- 一个创建好的React项目环境
- mobx框架本身
- 一个用来链接mobx和React的中间件
npm create vite react-mobx --template react
npm i mobx mobx-react-lite
3. 基础使用
需求: 使用mobx实现一个计数器的案例
1. 初始化mobx
初始化步骤
- 定义数据状态state
- 在构造器中实现数据响应式处理 makeAutoObservble
- 定义修改数据的函数action
- 实例化store并导出
import {makeAutoObservable} from 'mobx'
class CounterStore {
// 1.定义数据
count = 0
constructor() {
// 2.把数据弄成响应式
makeAutoObservable(this)
}
// 3.定义action函数(修改数据)
addCount = () => {
this.count++
}
}
// 4.实例化 然后导出给react使用
const counterStore = new CounterStore()
export { counterStore }
2. React使用store
实现步骤
- 在组件中导入counterStore实例对象
- 在组件中使用storeStore实例对象中的数据
- 通过事件调用修改数据的方法修改store中的数据
- 让组件响应数据变化
// 1.导入counterStore
import { counterStore } from './store/counter'
// 2.导入中间件链接mobx react 完成响应式变化
import { observer } from 'mobx-react-lite'
function App() {
return (
<div className="App">
{/* 把store中的count渲染下 */}
{counterStore.count}
{/* 点击事件触发action函数修改count 的值 */}
<button onClick={counterStore.addCount}>+</button>
</div>
)
}
// 包裹组件让视图响应数据变化
export default observer(App)
4. 计算属性（衍生状态）
概念: 有一些状态根据现有的状态计算（衍生）得到，我们把这种状态叫做计算属性, 看下面的例子
实现步骤
- 声明一个存在的数据
- 通过get关键词 定义计算属性
- 在 makeAutoObservable 方法中标记计算属性(可以标记也可以不标记,只是看的明显点)
import { computed, makeAutoObservable } from 'mobx'
class CounterStore {
// 1.定义数据
count = 0
//定义一个原始数据 list
list=[1,2,3,4,5]
constructor() {
// 2.把数据弄成响应式
makeAutoObservable(this,{
filterList:computed
})
}
// 定义计算属性
get filterList(){
return this.list.filter(el=>el>2)
}
// 3.方法修改list
addList=()=>{
this.list.push(6,7,8)
}
}
// 4.实例化 然后导出给react使用
const counterStore = new CounterStore()
export { counterStore }
// 1.导入counterStore
import { counterStore } from './store/counter'
// 2.导入中间件链接mobx react 完成响应式变化
import { observer } from 'mobx-react-lite'
function App() {
return (
<div className="App">
<div>
{counterStore.filterList}
<button onClick={counterStore.addList}>修改数组</button>
</div>
</div>
)
}
// 3.包裹App
export default observer(App)
5. 模块化
场景: 一个项目有很多的业务模块，我们不能把所有的代码都写到一起，这样不好维护，提了提供可维护性，需要引入模块化机制
实现步骤
- 拆分模块js文件，每个模块中定义自己独立的state/action
- 在store/index.js中导入拆分之后的模块，进行模块组合
- 利用React的context的机制导出统一的useStore方法，给业务组件使用
1- 定义counter模块
//counter.Store.js
import { makeAutoObservable } from 'mobx'
class CounterStore {
// 1.定义数据
count = 0
constructor() {
// 2.把数据弄成响应式
makeAutoObservable(this)
}
// 3.定义action函数(修改数据)
addCount = () => {
this.count++
}
}
export { CounterStore }
2- 定义list模块
//list.Store.js
import { computed,makeAutoObservable } from "mobx";
class ListStore{
list=[1,2,3,4,5]
constructor(){
makeAutoObservable(this,{
filterList:computed
})
}
get filterList(){
return this.list.filter(el=>el>3)
}
addList=()=>{
this.list.push(6,7,8)
}
}
export {ListStore}
3- 组合模块导出统一方法
// index.js
// 组合子模块
// 封装统一导出的供业务使用的方法
import { ListStore } from './list.Store'
import { CounterStore } from './counter.Store'
import React from 'react'
// 1.声明一个rootStore
class RootStore {
constructor() {
// 对子模块进行实例化操作
// 将来实例化根store的时候
// 根store有两个属性 分别是counterStore和listStore
// 各自对应的值 就是我们导入的子模块示例对象
this.counterStore = new CounterStore()
this.ListStore = new ListStore()
}
}
// 实例化操作
const rootStore = new RootStore()
// 使用react context机制 完成统一方法封装
// context机制的数据查找链 Provider如果找不到 就找createContext方法执行时传入的参数
let context = React.createContext(rootStore)
let useStore = ()=>React.useContext(context)
export { useStore }
4- 组件使用模块中的数据
// 1.导入store
import { useStore } from './store'
// 2.导入中间件链接mobx react 完成响应式变化
import { observer } from 'mobx-react-lite'
function App() {
//得到store
let store = useStore()
//也可以结构赋值 但是到store实例对象就行了,防止破坏响应式
//let {counterStore}= useStore()
return (
<div className="App">
<div>
{store.ListStore.filterList}
<button onClick={store.ListStore.addList}>添加数组</button>
</div>
<div>
{store.counterStore.count}
<button onClick={store.counterStore.addCount}>+</button>
</div>
</div>
)
}
// 3.包裹App
export default observer(App)
6. 异步数据处理
测试接口: http://geek.itheima.net/v1_0/channels
实现步骤:
- 在mobx中编写异步请求方法 获取数据 存入state中
- 组件中通过 useEffect + 空依赖 触发action函数的执行
import { computed,makeAutoObservable } from "mobx";
import axios from 'axios'
class ListStore{
list=[1,2,3,4,5]
channelList=[]
constructor(){
makeAutoObservable(this,{
filterList:computed
})
}
get filterList(){
return this.list.filter(el=>el>3)
}
addList=()=>{
this.list.push(6,7,8)
}
setChannelList=async ()=>{
const res=await axios.get('http://geek.itheima.net/v1_0/channels')
this.channelList = res.data.data.channels
}
}
export {ListStore}
// 1.导入store
import { useStore } from './store'
// 2.导入中间件链接mobx react 完成响应式变化
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
function App() {
//得到store
let store = useStore()
//也可以结构赋值 但是到store实例对象就行了,防止破坏响应式
//let {counterStore}= useStore()
useEffect(() => {
store.ListStore.setChannelList()
}, []);
return (
<div className="App">
<div>
{store.ListStore.filterList}
<button onClick={store.ListStore.addList}>添加数组</button>
</div>
<div>
{store.counterStore.count}
<button onClick={store.counterStore.addCount}>+</button>
</div>
<div>
请求数据:
<ul>
{store.ListStore.channelList.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
</div>
)
}
// 3.包裹App
export default observer(App)
7.基础使用总结
1.初始化mobx的过程是怎样的
声明数据->响应式处理->定义action函数->实例化导出
2.mobx如何配合react,需要依赖什么包
mobx-react-lite作为链接包,导出observer方法,包裹组件
3.模块化解决了什么问题
维护性问题
4.如何实现mobx的模块化
按照功能拆分store模块,根模块中组合子模块,利用context机制依赖注入
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
