mobx教程(一)-mobx简介

版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 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背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。这理解起来可能有点儿抽象,我们用Excel来模拟一下上述原理:

Excel模拟Mobx流程

使用Excel举例有一个不恰当之处在于mobx的computed计算值是在被其它计算值或ui使用时才会更新,而Excel通过公式计算的单元格当其依赖的单元格的值更新后会立即重新计算。

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

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

目录如下:

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

猜你喜欢

转载自blog.csdn.net/smk108/article/details/84777649