mobx @computed的解读

写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留言帮我指出。

官网dome:

import React, { Component } from ‘react‘;
import mobx, {observable, computed } from ‘mobx‘;

class ObservableTodoStore {
    @observable todos = [];
    @observable pendingRequests = 0;

    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 === 0)
            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[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].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是一样一样的

至此:由于没有找到官方一点的解释,这个结论是我自己的结论。如果是有问题的,请留言帮我指出来。拜托了。

时间: 2024-11-05 10:18:50

mobx @computed的解读的相关文章

[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 data that can be derived should ever get stored. In this lesson, you will learn how to introduce views that declaratively derive data and which cache d

mobx

原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指出,非常感谢: mobx是一个比redux更好的状态管理包,代码量更少,思路更清晰,没有像redux那样复杂的reducer,action (ps: redux的作者也推荐mobx,某大大告诉我的,并没有原话链接) 1.mobx 反应流程 2.the core idea State 是每一个应用程序

[Mobx] Use MobX actions to change and guard state

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group change

OpenCV2马拉松第27圈——SIFT论文,原理及源码解读

计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g/article/details/28913101 简介 SIFT特征描述子是David G. Lowe 在2004年的ijcv会议上发表的论文中提出来的,论文名为<<Distinctive Image Featuresfrom Scale-Invariant Keypoints>>.这是一个很强大的算法,主要用于图像配准和物体识别等领域,但是其计算量相比也比较大,性价

react mobx webpack 使用案例

1.package.json: { "name": "wtest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "build

Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux

来源简书 电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. 本教程旨在介绍其用法及概念,并重点介绍其与React的搭配使用. 先来看看最基本的用法. observable和autorun import { observable, autorun } from 'mobx'; const value = obse

1-2 Mobx 入门实践之TodoList(官方Demo)

第一步:导入模块 import React, { Component } from 'react'; import { observable, autorun,computed } from 'mobx' import {observer} from "mobx-react"; 第二步:创建store class ObservableTodoStore{    @observable todos = [];    @observable pendingRequests = 0;    

mobx基本概念

mobx是一个简单可扩展的状态管理库,主要用来管理状态之间的依赖关系,可以使用在任何状态管理的场景,并不仅限于react. 结合mobx-react可以用在react中,结合mobx-vue可以用在vue中.mobx的概念与knockout和rxjs中的概念极其相似, 相当于将kouckout中的状态管理部分独立出来了. mobx的基本流程如下图: 1. mobx的基本概念 state 应用的数据,包括领域状态和视图状态 observable 可观察者,可以被观察者观察的数据 observer

react+react-router+mobx+element打造管理后台系统---react-amdin-element

react-admin-element,一款基于react的后台管理系统. 那么我们和其他的后台管理系统有什么区别呢? demo地址:点我进入demo演示 github地址:点我进入github 1. cli工具 为了方便下载使用,我们提供了cli工具 npm install create-react-admin-cli -g create-react-admin  这里我们会为您提供两种版本 1. react-admin-demo 这个版本里是我们推荐里版本,里面包括了我们为您提供的一些封装好