React 状态管理 - Mobx 入门(上)

Mobx是另一款优秀的状态管理方案

【让我们未来多一种状态管理选型】

响应式状态管理工具

扩展学习资料

|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|
| 名称 | 链接 | 备注 |
| mobx 文档 | 1. MobX 介绍 · MobX 中文文档 | |
| mobx | https://medium.com/@Zwenza/how-to-persist-your-mobx-state-4b48b3834a41 | 英文 |

Mobx核心概念

  • Mobx提供了一种状态(State)可供观察的解决方案。【在Mobx内部队state进行主动监听】
  • 可观察的状态(Observable state)意味着在Mobx构建的应用中,更细粒度更高效的状态管理。
  • 与Redux中状态变化取决于对比前后差异,Mobx中申明了观察对象便会依据框架本身的能力进行管理

Redux应用流转图

reducer不能直接修改store

Reducer中不能修改Store,不能发生数据突变,这里是执行纯函数的【这样写会留下隐患】

Mobx应用流转图

actions直接修改State

Mobx接入实战

  • Observable State【可观察的状态】
    • Mobx为常用的数据结构(如:对象,数组和类实例)添加了可观察的功能。
    • 使用**@observable**装饰器更便捷完成添加Observable State功能。
  • Derivations(衍生)
    • 源自任何状态,并且不会再有任何相互作用的东西【包括具体UI和一些计算值】
    • Computed values(计算值):使用纯函数(pure function)从当前可观察状态中衍生出的值。【state变就跟着变】
    • Reactions(反应):当状态改时需要自动发生的副作用。【依赖了state的UI】
相关推荐
G_G#1 天前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界1 天前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路1 天前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug1 天前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu121381 天前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 天前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 天前
GDAL 实现矢量合并
前端
hxjhnct1 天前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子1 天前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗1 天前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全