• [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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    Python---http协议.md
    ORACLE-osi分层模型.md
    安卓开发学习01
    记账本开发记录——第二十二天(2020.2.9)
    记账本开发记录——第二十一天(2020.2.8)
    记账本开发记录——第二十天(2020.2.7)
    记账本开发记录——第十九天(2020.2.6)
    记账本开发记录——第十八天(2020.2.5)
    记账本开发记录——第十七天(2020.2.4)
    记账本开发记录——第十六天(2020.2.3)
  • 原文地址:https://www.cnblogs.com/0616--ataozhijia/p/10191724.html
Copyright © 2020-2023  润新知