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 这么一个流程,主要理解这个流程就可以,状态管理再多工具都是这样
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- 使用shell脚本检测数据库连接访问情况(r10笔记第98天)
- 贝叶斯分类器及Python实现
- Docker 简介与安装
- 三种决策树算法(ID3, CART, C4.5)及Python实现
- Logistic 回归算法及Python实现
- MySQL主从不一致的修复过程(r10笔记第96天)
- ML中相似性度量和距离的计算&Python实现
- Oracle中的ROWID实现(r10笔记第95天)
- 100个Numpy练习【3】
- 100个Numpy练习【4】
- Golang语言中Path包用法
- 100个Numpy练习【5】
- Golang中container/list包中的坑
- 关于Golang语言数组索引的有趣现象
- 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 数组属性和方法
- go test 测试用例那些事(二) mock
- [数据结构]链式存储: 多项式求和
- [Web] CSS 中 Display(显示) 与 Visibility(可见性)的区别与用法
- [数据结构] 二叉搜索树的CURD(增删改查)操作
- Python 为什么用 # 号作注释符?
- Logging with ElasticSearch, Kibana, ASP.NET Core and Docker
- 【DB笔试面试843】在Oracle中,解释GLOBAL_NAMES设为TRUE的用途。
- SpringBoot 返回 json 数据以及数据封装(万字长文)
- 内核级木马与病毒攻防:Linux可执行文件的ELF格式描述
- 「 思考 」 React Hooks 的设计哲学
- JMeter之Json提取器详解
- nodejs 图片处理工具 gm 的使用!
- Java 进程内存分布
- Web 游戏监听浏览器返回点击事件 !
- 权限维持_Linux操作系统后门