网站建设了流程,广东企业黄页网站,0元开店0元铺货无加盟费开网店,网络服务公司名字目录
Mobx的讲解与使用
Mobx环境配置
Mobx的基本使用
Mobx计算属性的使用
Mobx监听属性的使用
Mobx处理异步的使用
Mobx的模块化 Mobx的讲解与使用
Mobx是一个可以和React良好配合的集中状态管理工具#xff0c;mobx和react的关系相当于vuex和vue之间的关系#xff0…目录
Mobx的讲解与使用
Mobx环境配置
Mobx的基本使用
Mobx计算属性的使用
Mobx监听属性的使用
Mobx处理异步的使用
Mobx的模块化 Mobx的讲解与使用
Mobx是一个可以和React良好配合的集中状态管理工具mobx和react的关系相当于vuex和vue之间的关系同类工具还有redux、dva、recoil。
mobx优势编写无模板的极简代码来精准描述你的意图依赖自动追踪最小渲染优化轻松实现最优渲染可移植和测试轻松实现架构自由学习成本小且面向对象编程对TS友好。
mobx的核心思想任何源自应用状态的东西都应该自动的获得。 Mobx与redux的区别Mobx写法上更偏向于OOP(面向对象编程)对一份数据直接进行修改操作不需要始终返回一个新的数据并非单一store可以是对store redux默认以JavaScript原生对象形式存储数据而Mobx使用可观察对象。详细比较如下
reduxmobx有严格的工作流程需要写大量的模板代码无模板代码非常简洁需要保证数据不可变数据是响应式的可以直接修改数据proxyredux需要中间件处理异步mobx可以直接处理异步redux约束强更适合大型多人协作开发mobx适合简单规模不大的应用
Mobx版本说明经过时间的积淀mobx也迎来了许多版本的迭代其中具体的版本说明如下 Mobx4可以运行在任何支持ES5语法的浏览器(Object.defineProperty) Mobx5版本运行在任何支持ES6语法的浏览器(Proxy) Mobx4和Mobx5具有相同的api都需要使用装饰器语法 Mobx6是目前最新版本为了与标准的JavaScript的最大兼容性默认情况下放弃了装饰器语法因为装饰器语法仅仅是给提案举例ES标准化还需要很久。 还是那句老生常谈的话想了解前沿技术还是多多看看官方手册mobx官方文档
Mobx环境配置
Mobx是一个独立的响应式的库可以独立于任何UI框架而存在但是通过人们把它和React来绑定使用用Mobx来做响应式数据建模React作为UI视图架构渲染内容。配置Mobx如下
通过类似create-react-app创建好的react项目环境使用create-react-app初始化react项目如果要详细了解react框架的搭建推荐看一下这篇文章React脚手架的搭建与使用
npx create-react-app 项目名称
安装 mobx 和 mobx-react或mobx-react-lite这里简单提一下mobx-react和mobx-react-lite都是连接react和mobx的中间件两种的区别是mobx-react支持类和函数组件体积相对而言较大而mobx-react-lite只支持函数组件体积较小自己可以根据具体情况进行使用下载
npm install mobx mobx-react-lite
Mobx的基本使用
安装好mobx相关的第三方包之后就可以使用mobx进行状态管理了如下在src目录下新建一个store文件夹在store文件夹下新建一个counter.jsx文件用来管理count状态如下
import { action, makeObservable, observable } from mobx;class Counter {constructor(){// 参数1target 把谁变成响应式(可观察)参数2指定哪些属性或方法变成可观察makeObservable(this,{ // 设置观察模式count:observable, // 设置管理状态的数据increment:action.bound, // 可以设置bound属性修改this指向decrement:action,reset:action})}// 当前的初始化状态数据count 0// 操作状态的方法increment(){this.count}decrement(){this.count--}reset(){this.count 0}
}
// eslint-disable-next-line import/no-anonymous-default-export
export default new Counter()
在想使用count数据的相关组件中进行引入并使用即可过程如下
import React from react
import { observer } from mobx-react-lite
import counter from ./store/counterfunction App() {return (divh3计数器案例/h3div点击次数{counter.count}/divbutton onClick{()counter.increment()}加1/buttonbutton onClick{()counter.decrement()}减1/buttonbutton onClick{()counter.reset()}重置/button/div)
}// 使用ovserver高阶组件函数包裹需要使用store的组件
export default observer(App) 默认情况下class中的方法不会绑定thisthis指向取决于如何调用当然如果你想调用函数时不想通过箭头函数来调用函数在使用makeAutoObservable时可以通过bound属性来修改指向问题 makeAutoObservable的使用makeAutoObservable就像加强版的makeObservable默认情况下它将推断所有的属性推断的规则为所有的属性都成为observable所有的方法都成为action所有的计算属性都成为computed (计算属性接下来会讲到)。具体的使用如下
import { makeAutoObservable } from mobx;class Counter {constructor(){// 参数1target让对象变成可观察// 参数2排除属性和方法// 参数3指定自动绑定thismakeAutoObservable(this,{},{autoBind:true})}// 当前的初始化状态数据count 0// 操作状态的方法increment(){this.count}decrement(){this.count--}reset(){this.count 0}
}
// eslint-disable-next-line import/no-anonymous-default-export
export default new Counter()
Mobx计算属性的使用
computed可以用来从其它可观察对象中派生信息计算值采用惰性求值会缓存其输出并且只有当其依赖的可观察对象被改变时才会重新计算。
注意计算属性是一个方法且方法前面必须使用get进行修饰计算属性还需要通过makeAutoObservable方法指定如下 Mobx监听属性的使用
Mobx监听属性主要有以下两种方式现在分别对两种监听方式的使用进行讲解如下
autoRun的使用
autoRun函数接受一个函数作为参数每当该函数所观察的值发生变化时它都应该运行当自己创建 autoRun 时它也会运行一次Mobx会自动收集并订阅所有的可观察属性一旦有改变发生autorun将会再次执行。
import { autorun, makeAutoObservable } from mobx;
class Counter {constructor(){makeAutoObservable(this,{},{autoBind:true})}count 0increment(){this.count}decrement(){this.count--}reset(){this.count 0}
}
const counter new Counter()
// 监听数据的变化
autorun((){console.log(counter.count,counter.count);
})
export default counter reaction的使用
reaction类似于autorun但可以更加精细地控制要跟踪的可观察对象与autorun不同reaction在初始化时不会自动运行。
import { makeAutoObservable, reaction } from mobx;
class Counter {constructor(){makeAutoObservable(this,{},{autoBind:true})}count 0increment(){this.count}decrement(){this.count--}reset(){this.count 0}
}
const counter new Counter()
// 监听数据的变化
// reaction接收两个参数参数1data函数其返回值会作为第二个函数的输入参数2回调函数
reaction(() counter.count,(value,oldvalue){console.log(count数据发生变化了,value,oldvalue);
})export default counter Mobx处理异步的使用
异步进程在Mobx中不需要任何特殊处理因为不论是何时引起的所有 reactions 都将会自动更新因为可观察对象是可变的因此在action执行过程中保持对它们的引用一般是安全的如果可观察对象的修改不是在action函数中控制台会报警告可以关闭但是不推荐。什么意思呢如下 我们在进行异步加一之后打开浏览器的控制台看看能得出什么结果如下 当然控制台虽然爆出警告但是不影响实际的效果的产生的如果想消除警告可以设置严格模式如下 这种虽然是能消除警告但是并不符合规范如果想符合规范的话建议采用这种方式 runlnAction的使用
Mobx处理异步的方式除了使用上面的方式外还可以使用runlnAction进行异步处理通过runlnAction可以保证所有异步更新可观察对象的步骤都应该标识为action使用方式如下 Mobx的模块化
在大型项目中是不能将所有状态和方法都放到一个store中的我们可以根据业务模块定义多个store然后通过一个根store统一管理所有的store。一般我们会将在store文件夹下的index文件设置为根store如下
// 封装统一导出的store
import { createContext, useContext } from react;
// 两个store文件
import counter from ./counter
import list from ./list;// 声明一个 RootStore
class RootStore {counter counterlist list
}
const store new RootStore()
// 创建一个上下文对象用于跨级组件通讯
// 如果createContext提供了默认值不需要Provider
const Context createContext(store)
// 自定义hook
export default function useStore(){return useContext(Context)
} 总结Mobx5版本及之前版本对装饰器的语法这里就不再讲解了想要了解的朋友可以参考官方文档或者自行百度。
