转载请注明原文地址: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. 用SwipeBackLayout实现滑动关闭当前Activity

    说起SwipeBackLayout,我对它还是有一定怨念的.当时就希望能实现关闭当前Activity的效果,但完全搜不当相关的东西,最后好不容易搜到了这个SwipeBackLayout,觉得可以实现滑 ...

  2. 配置SSD-caffe测试时出现“Check failed: error == cudaSuccess (10 vs. 0) invalid device ordinal”解决方案

    这是由于GPU数量不匹配造成的,如果训练自己的数据,那么我们只需要将solver.prototxt文件中的device_id项改为自己的GPU块数,一块就是0,两块就是1,以此类推. 但是SSD配置时 ...

  3. [转]MySQL单列索引和组合索引的区别介绍

    FROM : http://database.ctocio.com.cn/353/11664853.shtml MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引 ...

  4. Set a Room Mailbox to Show Details of a Meeting in its Calendar – Office 365

    You may notice that meetings with a ‘Room’ mailbox will by default only show a “Busy” status. Many, ...

  5. IDEA 快速将spring boot项目打包成jar包,简单快速有效

    原文地址;https://blog.csdn.net/chen846262292/article/details/80701101  https://www.cnblogs.com/chrischen ...

  6. 在此处打开OpenPowershellHere右键 在此处打开命令窗口右键

    windows 10  右键添加在本文件夹打开cmd  或prowershell 在此处打开OpenPowershellHere右键 Windows Registry Editor Version 5 ...

  7. 【已解决】Android微信开放平台,申请移动应用的 应用签名 如何获取

    在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate?t=manage/createMobile&type=app&a ...

  8. 第二章 微服务网关基础组件 - zuul入门

    一.zuul简介 1.作用 zuul使用一系列的filter实现以下功能 认证和安全 - 对每一个resource进行身份认证 追踪和监控 - 实时观察后端微服务的TPS.响应时间,失败数量等准确的信 ...

  9. [leetcode]Recover Binary Search Tree @ Python

    原题地址:https://oj.leetcode.com/problems/recover-binary-search-tree/ 题意: Two elements of a binary searc ...

  10. 命令行修改mysql密码和远程访问

    http://jingyan.baidu.com/article/a3a3f8118cea488da2eb8a0a.html