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修饰。
MobX快速入门教程(重要概念讲解)的更多相关文章
- 专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
- MongoDb 快速入门教程
文章首发于[博客园-陈树义],点击跳转到原文MongoDb 快速入门教程. MongoDb 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 它是可扩展的 ...
- BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 序
BIML 101 - BIML 快速入门教程 做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- MySQL 快速入门教程
转:MySQL快速 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数据 ...
- WPF/MVVM Quick Start Tutorial - WPF/MVVM 快速入门教程 -原文,翻译及一点自己的补充
转载自 https://www.codeproject.com/articles/165368/wpf-mvvm-quick-start-tutorial WPF/MVVM Quick Start T ...
- EntityFramework6 快速入门教程
EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
- 指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程
指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程 1.4.2 指示灯组 指示灯组的放大图如图1.5所示. 图1.5 指示灯组 各个指示灯对应的功能如下: q RX:对应于0号端口, ...
随机推荐
- 用SwipeBackLayout实现滑动关闭当前Activity
说起SwipeBackLayout,我对它还是有一定怨念的.当时就希望能实现关闭当前Activity的效果,但完全搜不当相关的东西,最后好不容易搜到了这个SwipeBackLayout,觉得可以实现滑 ...
- 配置SSD-caffe测试时出现“Check failed: error == cudaSuccess (10 vs. 0) invalid device ordinal”解决方案
这是由于GPU数量不匹配造成的,如果训练自己的数据,那么我们只需要将solver.prototxt文件中的device_id项改为自己的GPU块数,一块就是0,两块就是1,以此类推. 但是SSD配置时 ...
- [转]MySQL单列索引和组合索引的区别介绍
FROM : http://database.ctocio.com.cn/353/11664853.shtml MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引 ...
- 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, ...
- IDEA 快速将spring boot项目打包成jar包,简单快速有效
原文地址;https://blog.csdn.net/chen846262292/article/details/80701101 https://www.cnblogs.com/chrischen ...
- 在此处打开OpenPowershellHere右键 在此处打开命令窗口右键
windows 10 右键添加在本文件夹打开cmd 或prowershell 在此处打开OpenPowershellHere右键 Windows Registry Editor Version 5 ...
- 【已解决】Android微信开放平台,申请移动应用的 应用签名 如何获取
在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate?t=manage/createMobile&type=app&a ...
- 第二章 微服务网关基础组件 - zuul入门
一.zuul简介 1.作用 zuul使用一系列的filter实现以下功能 认证和安全 - 对每一个resource进行身份认证 追踪和监控 - 实时观察后端微服务的TPS.响应时间,失败数量等准确的信 ...
- [leetcode]Recover Binary Search Tree @ Python
原题地址:https://oj.leetcode.com/problems/recover-binary-search-tree/ 题意: Two elements of a binary searc ...
- 命令行修改mysql密码和远程访问
http://jingyan.baidu.com/article/a3a3f8118cea488da2eb8a0a.html