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】
相关推荐
一袋米扛几楼988 分钟前
【网络安全】SIEM -Security Information and Event Management 工具是什么?
前端·安全·web安全
小陈工19 分钟前
2026年4月7日技术资讯洞察:下一代数据库融合、AI基础设施竞赛与异步编程实战
开发语言·前端·数据库·人工智能·python
Cobyte28 分钟前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理
前端·javascript·vue.js
竹林81832 分钟前
从零到一:在React前端中集成The Graph查询Uniswap V3池数据实战
前端·javascript
Mintopia39 分钟前
别再迷信"优化":大多数性能问题根本不在代码里
前端
倾颜39 分钟前
接入 MCP,不一定要先平台化:一次 AI Runtime 的实战取舍
前端·后端·mcp
军军君0142 分钟前
Three.js基础功能学习十八:智能黑板实现实例五
前端·javascript·vue.js·3d·typescript·前端框架·threejs
恋猫de小郭42 分钟前
Android 上为什么主题字体对 Flutter 不生效,对 Compose 生效?Flutter 中文字体问题修复
android·前端·flutter
Moment44 分钟前
AI全栈入门指南:一文搞清楚NestJs 中的 Controller 和路由
前端·javascript·后端
禅思院44 分钟前
前端架构演进:基于AST的常量模块自动化迁移实践
前端·vue.js·前端框架