zoukankan      html  css  js  c++  java
  • MobX快速入门教程(重要概念讲解)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7372119.html

    一:Mobx工作流程图

    二:MobX涉及到的概念

    1:状态state

    组件中的数据。

    2:被观察observable

    被observable修饰的state数据将会暴露给整个app,各观察者组件都可以根据state值的变化作出响应。

    3:观察者observer

    被observer修饰的组件,将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染(原理:用autorun包裹了render函数,state变化触发autorun从而自动渲染)

    4:action

    state值的修改需要在action函数中进行。

    5:衍生值computed

    get:基于state值,通过一些计算得到的新值并返回给调用者。

    set:get的相反运算,参数为一个值,由该值进行get函数中的反运算,得到对应的state值并赋予state。

    6:衍生行为autorun

    基于state的变化而触发的一系列行为(注意:这些行为不改变state值、不产生新的数据),通常为日志记录、请求发送、UI渲染等。

    三:Mobx的使用

    掌握了上面的基本概念,Mobx的使用流程就清晰了:

    新建一个mobx目录,在其中新建一个appStore.js文件,专门用于管理整个app的state。appStore中定义一个Component,在组件中:

    1:定义需要被全局观察的state,用@observable修饰

    2:定义改变state的行为函数,用@action修饰

    3:定义基于某state,通过计算产生新值的get函数,用@computed修饰

    4:定义基于所传参数,通过计算得到state值的set函数,用@computed修饰

    5:定义基于state变化,自动触发的行为函数,用@autorun修饰

    6:在文件末尾,新建一个该组件的实例,并export

    然后,在其他组件文件中,就可以import 这个组件实例,直接使用  组件实例.XXX  访问数据、方法了。

    注意:其他组件是观察者组件,用@observer修饰。

  • 相关阅读:
    Linux之SSH详解
    Linux下的静态路由配置
    Linux之防火墙配置
    五、SQL 转换:Oracle 转 MySQL
    四、Oracle转Mysql总结
    三、MySQL 替代 Oracle 序列以及自增长处理
    二、MySQL 高级部分
    一、MySQL 基础
    15-1、常用类
    14-1、GUI
  • 原文地址:https://www.cnblogs.com/ygj0930/p/7372119.html
Copyright © 2011-2022 走看看