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 监听数据变化,并在监听回调函数中返 ...
随机推荐
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- Oracle Database 12c Data Redaction介绍
什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...
- Android权限管理之RxPermission解决Android 6.0 适配问题
前言: 上篇重点学习了Android 6.0的运行时权限,今天还是围绕着Android 6.0权限适配来总结学习,这里主要介绍一下我们公司解决Android 6.0权限适配的方案:RxJava+RxP ...
- Xamarin+Prism开发详解三:Visual studio 2017 RC初体验
Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio ...
- C#——传值参数(1)
//我的C#是跟着猛哥(刘铁猛)(算是我的正式老师)<C#语言入门详解>学习的,微信上猛哥也给我讲解了一些不懂得地方,对于我来说简直是一笔巨额财富,难得良师! 这次与大家一起学习C#中的值 ...
- Consul-template的简单应用:配置中心,服务发现与健康监测
简介 Consul-template是Consul的一个方扩展工具,通过监听Consul中的数据可以动态修改一些配置文件,大家比较热衷于应用在Nginx,HAProxy上动态配置健康状态下的客户端反向 ...
- CSS入门常见的问题
写在前面:本文简单介绍一下css的三大特性:层叠性.继承性.优先级.以及margin,padding,浮动,定位几个知识点.限于水平,不深入探讨,仅作为学习总结. 1,三特性 1)层叠性:同标签同权重 ...
- 满堂红CIO邓劲翔:房屋中介突围
人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...
- 【SAP业务模式】之ICS(七):IDOC配置
这是ICS业务模式系列的最后一篇了,主要讲解IDOC的配置. 一.指定EDI传输的供应商逻辑地址 事务代码:WEL1 注意:上面逻辑地址是生产公司+内部客户.有以下两种情形: 1.如果内部客户都是纯数 ...
- PHP5.4~7.1新特性总结
http://note.youdao.com/noteshare?id=7273b858fc12873ad092979e4ba173a7&sub=WEB334fdcf50b507ad93549 ...