Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx
是Redux
之后的一个状态管理库,基于响应式状态管理,整体是一个观察者模式的架构,存储state
的store
是被观察者,使用store
的组件是观察者。Mobx
可以有多个store
对象,store
使用的state
也是可以变对象,这些都是与Redux
的不同点,相比较于Redux
,Mobx
更轻量,也更受开发者的青睐。
简单介绍一下Mobx:
Mobx
也是采用单向数据流,通过action
改变state
,state
的改变会导致受其影响的view
更新
Mobx核心概念
- state状态
- computed value 计算值
- reaction响应
- action动作
computed value和reaction会自动根据state的改变做最小化的更新,并且这个更新是同步更新的,也就是说,action更改state后,新的state是可以被立即获取的。 注意:computed value采用的是延迟更新,只有当computed value被使用时它的值才会被重新计算,没有被使用时会自动回收。computed value必须是纯函数,不能用它修改state
Mobx示例
mobx大量使用了装饰器的语法,现在create-react-app创建的项目默认是不支持装饰器的,我们为了让他支持装饰器,我们需要配置一下babel的插件。 默认使用create-react-app创建的项目,配置文件是看不到的,如果仔细一点,可以在package.json里面有个eject的命令,运行npm run eject可以将配置文件弹出,然后再来增加babel的插件。
使用create-react-app支持装饰器语法
yarn add @babel/plugin-proposal-decorators
yarn add babel-plugin-transform-class-properties
配置如下:
测试是否能够支持装饰器语法:
@test = () => {
console.log('hello mobx');
};
@test
class Main {
}
如果在浏览器console能够正常输出hello mobx就配置成功了,已经可以支持装饰器的语法了。
注意:
这样写是触发不了更新的,千万别写反了,否则后悔一辈子
- 错误
@observer
@inject('store')
- 正确
@inject('store')
@observer
总结
mobx
主要是负责状态管理,mobx-react
主要是提供store
和注入
状态的更新是 action -> store -> views 这么一个流程,主要理解这个流程就可以,状态管理再多工具都是这样
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- golang讲解(go语言)标准库分析之strings结束篇
- golang(GO语言)http详解简单基础
- 操作系统几种I/O访问类型以及异步I/O性能评估
- 用golang写的golang解析json数据的包
- 神奇的go语言(网页下载)
- 关于MySQL极限值的初步验证纠错
- 神奇的go语言(开始篇)
- GPFS 3.4 的配置变更与性能评估
- 神奇的go语言(面向对象)
- 机器学习玩转Flappy Bird全书:六大“流派”从原理到代码
- 神奇的go语言(高级应用)
- HTML5 游戏引擎深度测评
- PowerVM 环境下实施 PowerHA7.1 要点
- Oculus + Node.js + Three.js 打造VR世界
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法