[web 前端] mobx教程(一)-mobx简介

时间:2024-07-21 11:03:38

opy from : https://blog.****.net/smk108/article/details/84777649

Mobx是通过函数响应式编程使状态管理变得简单和可扩展的状态管理库。Mobx和Redux一样,采用单向数据流管理状态:通过action改变应用的state,state的改变触发相应ui的更新,如下图所示:

[web 前端]   mobx教程(一)-mobx简介

Mobx有如下几个主要概念:

State:状态,应该是应用依赖的最小状态集,没有任何多余的状态,也不需要通过其他状态计算而来的中间状态;

Computed value:计算值,是根据state推导计算出来的值;

Reaction:响应,受state影响,会对state的变化做出一些更新ui、打印日志等反应;

Action:动作,建议是唯一可以修改状态的方式;

结合单向数据流管理方式和上述概念,Mobx的主要流程如下图所示:

[web 前端]   mobx教程(一)-mobx简介

Mobx整体是一个观察者模式,存储state的store是被观察者,使用store的组件是观察者。当action改变被观察的state之后,computed value和reactin会自动根据state的改变做最小化更新,需要注意的是computed value采用延迟更新的方式,只有待更新的computed value被使用时才会被重新计算,不然,computed value不仅不会被重新计算,还会被自动回收。

MobX背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。

Mobx与React是非常强力的一对组合,我在使用React+Mobx做开发时,感觉Mobx还是很好用的,并在我们FE团队做了一个简单的分享,推荐同事尝试使用。当然,在开发中也遇到了一些问题,现在把我的总结分享给大家,随时欢迎相关的技术交流。

接下来,我会按照如下的list进行总结,更新完某一篇后会在相应的title上添加超链接,同时会根据自己不断使用的理解进行持续更新。

目录如下:

简介
Mobx主要概念
在React中使用Mobx
Mobx定义数据存储
Mobx常见问题及解决方案(1)严格模式
Mobx常见问题及解决方案(2)不主动更新问题
Mobx工具函数
Mobx调试工具

---------------------
作者:smk108
来源:****
原文:https://blog.****.net/smk108/article/details/84777649
版权声明:本文为博主原创文章,转载请附上博文链接!