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

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

 

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

 

Mobx有如下几个主要概念：

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

Computed value：计算值，是根据state推导计算出来的值；

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

Action：动作，建议是唯一可以修改状态的方式；

结合单向数据流管理方式和上述概念，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
来源：CSDN
原文：https://blog.csdn.net/smk108/article/details/84777649
版权声明：本文为博主原创文章，转载请附上博文链接！