【nodejs状态库mobx之computed规则】

The above example nicely demonstrates the benefits of a computed value, it acts as a caching point. Even though we change the amount, and this will trigger the total to recompute, it won’t trigger the autorun, as total will detect its output hasn’t been affected, so there is no need to update the autorun

上述描述了,computed 复合属性total的计算过程,复合属性total包含price和amount两个子属性,total = price * amount。当computed返回值price * amount不变,则不会触发autorun中total changed的回调函数。

示例

import { makeObservable, observable, computed, autorun } from "mobx"class OrderLine {price = 0amount = 1constructor(price) {makeObservable(this, {price: observable,amount: observable,total: computed})this.price = price}get total() {console.log("Computing...")return this.price * this.amount}
}const order = new OrderLine(0)const stop = autorun(() => {console.log("Total: " + order.total)
})
// Computing...
// Total: 0console.log(order.total)
// (No recomputing!)
// 0order.amount = 5
// Computing...
// (No autorun)order.price = 2
// Computing...
// Total: 10stop()order.price = 3
// Neither the computation nor autorun will be recomputed.

3个computed使用规则

Rules When using computed values there are a couple of best practices to follow:

They should not have side effects or update other observables. Avoid creating and returning new observables. They should not depend on non-observable values.

它们不应该有副作用或更新其他可观察对象。

computed值应该是纯粹的,这意味着它们不应该改变任何状态,也不应该有任何副作用。它们只应该根据它们的依赖项计算新的值。

class Store {@observable value = 0;@observable otherValue = 0;@computed get double() {// Good: This computed value doesn't have any side effectsreturn this.value * 2;// Bad: This computed value has a side effect// this.otherValue = this.value * 2;// return this.otherValue;}
}

避免创建和返回新的可观察对象。

computed值应该返回一个简单的值,而不是一个新的可观察对象。如果你的computed值返回一个新的可观察对象,那么每次这个computed值被重新计算时,都会创建一个新的可观察对象。

class Store {@observable value = 0;@computed get double() {// Good: This computed value returns a simple valuereturn this.value * 2;// Bad: This computed value returns a new observable// return observable({ double: this.value * 2 });}
}

它们不应该依赖非可观察值。

computed值应该只依赖可观察对象的状态。如果你的computed值依赖非可观察值,那么当这个值改变时,MobX无法知道需要重新计算computed值。

class Store {@observable value = 0;nonObservableValue = 0;@computed get double() {// Good: This computed value depends on an observable valuereturn this.value * 2;// Bad: This computed value depends on a non-observable value// return this.nonObservableValue * 2;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

泛微E9开发 如何自定义流程标题

1、功能背景 主表中有“选择类别”下拉框字段,用户可以根据需求来选择申请类别,一般多个相似流程的申请可以合并成一个,但是为了区分,我们可以通过将标题修改的方式来使整个显示页面更明确。 2、展示效果 3、实现方法 注意&…

吴恩达深度学习笔记:深度学习的 实践层面 (Practical aspects of Deep Learning)1.6-1.8

目录 第一门课:第二门课 改善深层神经网络:超参数调试、正 则 化 以 及 优 化 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)第一周:深度学习的 实践层面 (Practical aspects of Deep Learning)…

SpringCloud使用Nginx代理、Gateway网关以后如何获取用户的真实ip

前言 本文转载自: www.microblog.store,且已获得授权. 一、需求背景 微服务架构使用了Nginx代理转发、并且使用了SpringCloud的Gateway统一控制所有请求,现在有个需求: 做一个日子记录切面,需要记录用户请求的ip地址。 在上述双重背景下…

knife4j 空指针异常

knife4j 空指针异常 一开始正常访问,但是改着改着,就无法访问了,百度了一圈没找到原因,最后对比了之前版本的区别发现这里有问题。最后把这个注解去掉就好了。 只是我本人遇到的问题是这样的,仅供参考

C++对象的初始化和处理

生活中我们买的电子产品都基本会有出厂设置!在某一天我们不用时候也会删除一些自己信息数据保证安全。 C中的面向对象来源于生活,每个对象也都会有初始设置以及对象销毁前的清理数据的设置。 构造函数和析构函数 对象的初始化和清理也是两个非常重要的安全问题 一…

Android Studio布局

文章目录 LinearLayout线性布局排列方向排列位置行列权重 LinearLayout线性布局 从行开始,顶格 排列方向 android:orientation“horizontal”android:orientation“vertical”排列位置 注意layout_width和layout_height的值是match_parent还是wrap_content&…

人工智能路径规划算法:迭代加深搜索

迭代加深搜索(Iterative Deepening Search, IDS)是一种结合了广度优先搜索(BFS)和深度优先搜索(DFS)的搜索策略,它通过重复执行深度限制的深度优先搜索来实现。每次迭代,深度限制增加…

03_Scala变量和数据类型

文章目录 [toc] **变量和数据类型****1.注释****2.变量和常量****3. 标识符的命名规范****4.scala的字符串****5.键盘输入****5.1 StdIn.readLine()****5.2 从文件中读取数据****5.3 Scala向外写数据** 变量和数据类型 1.注释 和Java完全一样 ** ** 2.变量和常量 var name…

如何在Pycharm中使用Git来进行版本管理

推荐视频:git pycharm的使用 连接github_哔哩哔哩_bilibilipycharm git的使用简单介绍 最近应该不会更新技能相关视频了 准备开题, 视频播放量 13042、弹幕量 2、点赞数 208、投硬币枚数 143、收藏人数 343、转发人数 58, 视频作者 呃呃燕, 作者简介 努力入门的计算机双非研究生…

Spark面试整理-解释Spark中的广播变量和累加器

在Apache Spark中,广播变量(Broadcast Variables)和累加器(Accumulators)是两种特殊的共享变量,它们用于不同的用途并有助于优化分布式计算的性能和资源利用。 广播变量(Broadcast Variables) 广播变量用于在所有节点之间高效地分发大数据集,主要用于只读操作。当你有…

Shell脚本学习记录

0.理解Linux文件权限 0.1 Linux安全性 用户的权限是通过创建用户时分配的用户ID(UID)来追踪的,UID是个数值,每个用户都有一个唯一的UID 0.1.1 /etc/passwd文件 Linux系统使用一个专门的文件/etc/passwd来匹配登录名与对应的UID值,该文件包…

请解释什么是PDO,以及它相对于MySQLi的优势是什么?

请解释什么是PDO,以及它相对于MySQLi的优势是什么? PDO,即PHP Data Object,是一个数据库访问层,为PHP访问数据库定义了一个轻量级的、一致性的接口。无论使用哪种数据库,都可以通过一致的函数(…

力扣37题:回溯算法之解数独

编写一个程序,通过填充空格来解决数独问题。 数独的解法需 遵循如下规则: 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图) 数独部分空…

R基本的数据管理

一&#xff0c;创建变量 创建一个数据框 > myData<-data.frame(x1c(1,2,3,4,5,6),x2c(6,5,67,8,9,0)) > myDatax1 x2 1 1 6 2 2 5 3 3 67 4 4 8 5 5 9 6 6 0增加一列为两者的和 > myData$sum<-myData$x1myData$x2 > myDatax1 x2 sum 1 1 6 …

Python浅谈清朝秋海棠叶版图

1、清朝疆域概述&#xff1a; 清朝是我国最后一个封建王朝&#xff0c;其始于1616年建州女真部努尔哈赤建立后金&#xff0c;此后统一女真各部、东北地区。后又降服漠南蒙古&#xff0c;1644年入关打败农民起义军、灭南明&#xff0c;削三藩&#xff0c;复台湾。后又收外蒙&am…

Vue 3新特性解析

Vue 3是Vue.js框架的最新版本&#xff0c;带来了一些重要的新特性和改进。以下是Vue 3的一些新特性解析&#xff1a; Composition API&#xff1a;Vue 3引入了Composition API&#xff0c;它提供了一种新的组织和重用组件逻辑的方式。通过Composition API&#xff0c;可以将相关…

Visual Studio 2022 Professional、Enterprise安装教程

Visual Studio 2022 Professional、Enterprise安装教程 下载安装包安装 我是电脑已经有VS2019&#xff0c;现在加装一个VS2022。 下载安装包 首先下载安装包&#xff0c;进入官网进行下载&#xff0c;VS官网下载地址。 进入之后&#xff0c;会显示如下界面&#xff0c;选择Pro…

Day8: 5道C++内存管理高频题整理

1、 什么是内存泄漏&#xff1f;如何避免它&#xff1f; 内存泄漏是指在程序中已分配的内存未被正确释放&#xff0c;导致该部分内存在程序运行期间一直占用而无法被再次使用的现象。这会逐渐消耗系统的内存资源&#xff0c;可能导致程序运行缓慢甚至崩溃。在C中&#xff0c;内…

安卓NetworkStatsManager使用及demo

目录 一、TrafficStats类简介二、demo示例 一、TrafficStats类简介 TrafficStats Android API 8提供了android.net.TrafficStats类。 通过此类能获取设备重启以来网络信息&#xff0c;部分函数如下所示&#xff1a; static long getMobileRxBytes() //获取通过移动数据网络…

开放式激光振镜运动控制器的视觉校正振镜精度解决方案

市场应用背景 激光振镜控制系统因具有惯量小、低负载、响应速度极快等优点&#xff0c;非常适合高速微加工应用&#xff0c;如激光标刻、焊接、3D打印和精密切割等应用。 激光振镜控制系统主要涵盖了激光振镜控制和图形校正等两个技术层面&#xff0c;来共同控制激光在加工过…