转载请注明原文地址: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修饰。

MobX快速入门教程(重要概念讲解)的更多相关文章

  1. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  2. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

  3. MongoDb 快速入门教程

    文章首发于[博客园-陈树义],点击跳转到原文MongoDb 快速入门教程. MongoDb 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 它是可扩展的 ...

  4. BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 序

    BIML 101 - BIML 快速入门教程 做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...

  5. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  6. MySQL 快速入门教程

    转:MySQL快速 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数据 ...

  7. WPF/MVVM Quick Start Tutorial - WPF/MVVM 快速入门教程 -原文,翻译及一点自己的补充

    转载自 https://www.codeproject.com/articles/165368/wpf-mvvm-quick-start-tutorial WPF/MVVM Quick Start T ...

  8. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  9. 指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程

    指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程 1.4.2  指示灯组 指示灯组的放大图如图1.5所示. 图1.5  指示灯组 各个指示灯对应的功能如下: q  RX:对应于0号端口, ...

随机推荐

  1. Android判断用户的网络类型(2/3/4G、wifi)

    很多时候需要先判断当前用户的网络,才会继续之后的一些处理逻辑.但网络类型获取这一块,我用我自己的的手机调试时遇到一些问题,这里记录一下. 一加手机一代,移动4G 网络,得到的subtype类型值为17 ...

  2. bat与jscript开发工具时遇到的一些问题

    之前使得bat调用luac进行编译时,会弹出一个"黑色的界面",闪烁一下,感觉不太好.而脚本vbs或者jscript调用bat是可以利用Run方法,将其第二个参数设置为0便可以隐藏 ...

  3. 调用人人网API

    大致步骤与上篇调用新浪微博API类似.只是感觉新浪微博的做的更好一些,人人网的非常多要手动操作 与新浪微博类似,先在人人网开放平台http://dev.renren.com/注冊站内应用, 把该填的填 ...

  4. Restful API 的设计规范(转)

    1. URI URI 表示资源,资源一般对应服务器端领域模型中的实体类.URI规范 不用大写; 用中杠-而不用下杠_; 参数列表要encode; URI中的名词表示资源集合,使用复数形式; 资源集合与 ...

  5. SVG.js 颜色渐变使用

    一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...

  6. 利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序(上)

    本文将介绍如何利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序,分为上下两篇.上篇主要介绍实现,下篇主要介绍界面. 打开Visual ...

  7. JVM的内存区域划分(转)

    原文链接:JVM的内存区域划分 JVM的内存区域划分 学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内 ...

  8. 突发奇想-取缔宏定义,用另外一种语言来做C++的部分外层封装

    突发奇想:用一种语言 来编写C++外挂,可以替代宏定义,可以这么做,在C++里面加入特定标签,比如<javascript></javascript>中间的代码可以翻译成C++代 ...

  9. secureCRT在Windows上面的安装过程

    参考这篇文章: https://www.cnblogs.com/yjd_hycf_space/p/7729796.html

  10. javascript中的分支判断与循环

    分支判断与循环 分支结构 单一选择结构(if) 二路选择结构(if/else) 内联三元运算符 ?: 多路选择结构(switch) var condition = true; if (conditio ...