mobx @computed的解读
写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留言帮我指出。
官网dome:
import React, { Component } from 'react';
import mobx, {observable, computed } from 'mobx'; class ObservableTodoStore {
@observable todos = [];
@observable pendingRequests = ; constructor() {
mobx.autorun(() => console.log(this.report));
}
// get completedTodosCount()
@computed get completedTodosCount() {
console.log('completed')
return this.todos.filter(
todo => todo.completed === true
).length;
} @computed get report() {
console.log('report');
if (this.todos.length === )
return "<none>";
return `Next todo: "${this.todos[0].task}". ` +
`Progress: ${this.completedTodosCount}/${this.todos.length}`;
} addTodo(task) {
this.todos.push({
task: task,
completed: false,
assignee: null
});
}
}
const observableTodoStore = new ObservableTodoStore(); observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[].completed = true;
observableTodoStore.todos[].task = "try MobX in own project";
observableTodoStore.todos[].task = "grok MobX tutorial";
运行结果:
我的发现:
请留意第三行,改变了completed,先执行的函数回事completedTodosCount(),
第五行,只改变todos的task属性,完成进度没有改变,completedTodosCount()根本就不执行,
若把completedTodosCount的@computed去掉,则每次console report后都紧接着console completed;
所以我得到了下面的结论
// completedTodosCount 本来只是一个变量,因为使用了getter/setter,在该变量get/set的时候会执行函数,
// report函数get了没有使用@computed的completedTodosCount,所以每一次get都会执行getter函数(getter函数只是一个普通的getter函数),
// 若使用了@computed, 每当你调用completedTodosCount时,
// @computed会先判断getter函数里面的依赖是否发生改变,选择性执行getter函数,或者使用之前的值
讨论群,大大的回答
讨论的结论:
completedTodosCount也跟observable一样是一个被监听的值,只是他是从observable数据中导出来的,除此之外跟observable是一样一样的
至此:由于没有找到官方一点的解释,这个结论是我自己的结论。如果是有问题的,请留言帮我指出来。拜托了。
mobx @computed的解读的更多相关文章
- mobx源码解读3
计算属性 function Todo() { this.id = Math.random() mobx.extendObservable(this, { aaa: 222, bbb: 11, ccc: ...
- mobx源码解读4
这节介绍一下mobx的变动因子的稳定性. mobx整个系统是由ObservableValue, ComputedValue, Reaction这三个东西构建的 ObservableValue 是最小的 ...
- mobx源码解读2
我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...
- mobx源码解读1
mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...
- [MST] Derive Information from Models Using Views
Redundant data or caching data is a constant source of bugs. MST adheres to the philosophy that no d ...
- [MobX] MobX fundamentals: deriving computed values and managing side effects with reactions
Derivations form the backbone of MobX and come in two flavors: computed values are values that can b ...
- MobX中@computed和自定义get函数的区别
首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...
- Vue中的computed 解读
computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算.比如: <body id="content"> & ...
- vue源码中computed和watch的解读
computed 会基于其内部的 响应式依赖 进行缓存. 只在相关 响应式依赖发生改变 时 它们才会重新求值. 可以在将模板中使用的常量放在计算属性中. watch 监听数据变化,并在监听回调函数中返 ...
随机推荐
- REST简介
一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...
- 0-1背包问题蛮力法求解(java版本)
sloves: package BackPack; public class Solves { public int[] DecimaltoBinary(int n,int m) { int ...
- C语言 · 矩形面积交
问题描述 平面上有两个矩形,它们的边平行于直角坐标系的X轴或Y轴.对于每个矩形,我们给出它的一对相对顶点的坐标,请你编程算出两个矩形的交的面积. 输入格式 输入仅包含两行,每行描述一个矩形. 在每行中 ...
- 解决PHP-问题:Class 'SimpleXMLElement' not found in
1.问题 在ubuntu 16.10中,学习PHP,学习到PHP如何生成XML文件时候,碰到了这个问题: PHP Fatal error: Class 'ClassName\SimpleXMLElem ...
- Ubuntu 16.10 安装byzanz截取动态效果图工具
1.了解byzanz截取动态效果图工具 byzanz能制作文件小,清晰的GIF动态效果图,不足就是,目前只能通过输入命令方式来录制. byzanz主要的参数选项有: -d, --duration=SE ...
- 【解决方案】Myeclipse 10 安装 GIT 插件 集成 步骤 图解
工程开发中,往往要使用到集成GIT ,那么下面说说插件安装步骤 PS:以Myeclipse 10 为例,讲解集成安装步骤. ----------------------main------------ ...
- C++随笔:.NET CoreCLR之corleCLR核心探索之coreconsole(1)
一看这个标题,是不去取名有点绕呢?或者是,还有些问题?报告LZ...你的标题取得有问题,是个病句!↖(^ω^)↗!!!先不要急,其实我今天带给大家的就是CoreCLR中的coreclr.其中它是在名字 ...
- spring boot 实战:我们的第一款开源软件
在信息爆炸时代,如何避免持续性信息过剩,使自己变得专注而不是被纷繁的信息所累?每天会看到各种各样的新闻,各种新潮的技术层出不穷,如何筛选出自己所关心的? 各位看官会想,我们是来看开源软件的,你给我扯什 ...
- Hibernate中事务的隔离级别设置
Hibernate中事务的隔离级别,如下方法分别为1/2/4/8. 在Hibernate配置文件中设置,设置代码如下
- 云计算下PAAS的解析一
云计算下PAAS的解析一 PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...