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】
相关推荐
mbshqqb7 小时前
TypeScript基础教程之同步生成器
前端·javascript·typescript
嘟嘟同学和妮妮同学8 小时前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光8 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼8 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下8 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构
song5018 小时前
React Native for OpenHarmony 实战:三方库 react-native-parallax-scroll-view 的鸿蒙化适配指南
分布式·react native·react.js·transformer·harmonyos
总要学点什么8 小时前
第51篇:数据分析-热力图——笔刷画的是圆,落到地上却成了椭圆
3d·数据挖掘·数据分析·前端框架·gis·webgl·cesium
全栈项目管理程序猿9 小时前
ArcGIS JS 基础教程(29):CSVLayer 表格点位图层
前端·javascript
骑着蜗牛撵大象3279 小时前
豆包 Seed 驱动的记账智能体:从拍票抽取到月报生成的全链路落地记录
java·前端·javascript·结构化输出·豆包seed·多模态识别·记账系统
溪语流沙9 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js