首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

when reaction在MobX中的使用

在MobX中,when reaction是一种特殊类型的反应(reaction),它会在满足特定条件时执行一些副作用。当条件为真时,它会执行提供的副作用函数,并在条件变为假时自动停止执行。

使用when reaction可以方便地处理一些需要在特定条件下执行的逻辑,例如在某个状态变量达到某个特定值时触发某些操作。

下面是when reaction的一些特点和使用方法:

  1. 特点:
    • 当条件为真时执行副作用函数,当条件变为假时自动停止执行。
    • 可以在副作用函数中进行异步操作,例如发起网络请求或定时器操作。
    • 当条件变为假时,可以选择是否清理之前执行的副作用。
  • 使用方法:
    • 导入when函数:import { when } from 'mobx';
    • 使用when函数创建when reaction,传入两个参数:条件函数和副作用函数。
    • 条件函数返回一个布尔值,用于判断是否执行副作用函数。
    • 副作用函数可以是同步或异步的,可以执行任意操作。
    • 可以选择在when函数调用后立即执行一次副作用函数,或者等待条件为真时再执行。

下面是一个示例代码,演示了when reaction的使用:

代码语言:txt
复制
import { observable, when } from 'mobx';

const store = observable({
  count: 0,
});

// 创建when reaction
const disposer = when(
  () => store.count > 10, // 条件函数
  () => {
    console.log('Count is greater than 10!');
    // 执行副作用函数,可以进行任意操作
  }
);

// 修改状态变量
store.count = 5; // 不满足条件,副作用函数不会执行
store.count = 15; // 满足条件,副作用函数执行

// 停止执行副作用函数
disposer(); // 调用返回的disposer函数即可停止执行副作用函数

在上面的示例中,当store.count的值大于10时,副作用函数会被执行,并打印出"Count is greater than 10!"的消息。当store.count的值不满足条件时,副作用函数不会执行。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,这里无法给出具体的推荐链接。但是,腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。可以通过访问腾讯云官方网站,查找相关产品和文档,获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

playbookwhen使用

背景 使用ansible编写playbook过程,我们发现在安装某服务时,例如部署fastdfs分布式存储时,有的机器需要启动tracker和storage两个服务,有的机器只需要启动一个服务即可...,它们需要配置不同,我们要根据不同机器来做不同判断,来分发不同配置文件,这时就会用到when来做判断了,并且我们还要使用jinja2循环条件控制语句,还要在ansible清单文件设置好变量...become: true 我们日常部署,这种使用方法能帮我们大大提高playbook执行效率 针对不同主机来做判断,如果满足条件,则执行任务,不满足直接略过 - name: Copy...: fdfs_role == 'tracker' become: true 这里我们自定义了一个变量fdfs_role,该变量是定义清单文件,如下: [fdfs] 10.0.3.115 10.0.3.116...115 [master] 10.0.3.150 [master:vars] mysql_db_role=master [slave:vars] mysql_db_role=slave 后面遇到其他使用方法再补充吧

64930
  • MobX管理状态(ES5实例描述)-4.常用工具方法

    react和ES7装饰修饰符等特性为切入点 但MobX传统ES5环境也能良好工作,本文尝试以此为出发点,探讨既有的非react项目中直接引入MobX并用其整理重构老代码方法 没有babel、...临时派生值,使得只满足其返回值条件时,reaction才执行,从而避免不必要响应 var obj = mobx.observable({a:1, b:2});var act = mobx.action...) 该方法头两个参数是两个函数,头一个data函数跟踪并返回用到数据;返回值传递给第二个产生副作用effect函数做参数 和autorun不同是,effect函数创建时并不立即生效,而是第一次得到新值后生效...js结构 支持可观察对象包括:数组、对象、map和基本类型 派生值和其他不可枚举属性不会包含在结果 第二个参数设为false可以浅转换以提高性能 var obj = mobx.observable...: mobx.action(function(state) { this.state = state; }) }); mobx.when(

    1K50

    mobx 入门

    mobx 响应式状态管理库 安装 // npm npm i --save mobx // yarn yarn add mobx 基础概念 所谓响应式,既是将原有数据结构,例如 数组,对象等转变为可观察对象..., 通过对可观察对象监控,当数据变化做出对应动作,所以可以大概归纳为: 构建观察对象 设置响应动作 mobx构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象...配置和 react 使用在类 类中使用 observable class Man { // 使用装饰器 构建装饰器值 @observable name = '' @observable...) console.log(add.total) // -> 22 add.total = 100 // -> Cannot set total value action 与 异步函数 action 绑定异步函数...mobx-react import { observable, autorun, computed, action, when, reaction } from 'mobx' import { observer

    1K20

    MobX状态管理:简洁而强大状态机

    this.todos[index].completed; } }观察者(Observers)React使用mobx-react库observer高阶组件或useObserver Hook...autorun、reactionwhen函数创建反应,这些函数会在数据变化时自动执行。...makeObservable和makeAutoObservableMobX 6,推荐使用makeObservable和makeAutoObservable来初始化可观察状态,它们提供了更好类型安全和自动类型推断...反应式函数(Reactive Functions)使用autorun、reactionwhen函数,你可以创建基于数据变化自动执行函数。...热重载和开发工具MobXmobx-react-devtools插件配合使用,提供了开发过程查看数据流、跟踪依赖和性能分析能力,支持热重载,方便快速迭代。

    16710

    Flutter与MobX那些事

    开始 以前一篇文章,半行代码 介绍到 Flutter 里面使用 MobX, 今天我们就来聊聊 Flutter 和 MobX 那些事。...我们先来看看 MobX 是什么,根据README介绍 使用透明函数响应式编程增强 Dart 程序状态管理 是前端里大名鼎鼎 MobX.js Dart 版本。...(); 输出: Hello MobX ReactionDisposer when(bool Function(Reaction) predicate, void Function() effect) 待条件响应...reaction基础上加上 predicate 函数返回 true 最佳实践 使用MobX,那么我们代码该如何组织呢?...当需要处理衍生状态时候,可用 computed 替代。 到这里,其实我们使用 MobX 时候可以组织出职责分层很明确函数响应式应用架构。

    87110

    MobX】390- MobX 入门教程(上)

    2019102303.png 本文概要 本文使用MobX 5 版本,主要将从以下几个方面介绍 MobX 使用: 配置 Webpack MobX 开发环境 MobX 常用 API 介绍(主要介绍与可观察数据相关操作...// undefined 因此实际开发,需要注意数组长度判断。...方法2: 使用 observe(callback) 来观察值改变,其计算后 .newValue 上。...知识点:错误处理 计算值计算期间抛出异常,则此异常会被捕获,并在读取其值时候抛出异常。 抛出异常不会中断跟踪,所有计算值可以从异常恢复。...,而是达到一个效果(如:打印日志,发起网络请求等命令式副作用); @computed,如果一个计算值不再被观察了,MobX 可以自动地将其垃圾回收,而 autorun 值必须要手动清理才行。

    82420

    实现简版 react 状态管理器 mobx

    mobx 是一个简单可扩展状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。...mobx vs reduxmobx 学习成本更低,性能更好状态解决方案(小编这里没有使用过 redux,但是看过使用 redux 状态管理代码,确实使用起来比较复杂)开发难度低,书写简单开发代码量少...React 使用react 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染这里配上官网 mobx 执行流程图图片页面的状态存储 mobx ,通过事件触发 mobx 方法函数,改变状态,...这里是函数和函数内部变量有绑定关系,如果我们 autorun 外面使用 console.log(o.name) 就不会触发回调执行。...我们知道 autorun 会自动收集内部函数中使用属性进而绑定关联,那我们函数 render 方法中使用了 store 数据,当属性改变时,就会触发 autorun,我们 autorun 重新渲染

    1.4K30

    MobX】391- MobX 入门教程(下)

    三、MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容,我们了解到,对可观察数据做出反应时候,需要我们手动修改可观察数据值。...3.1 (@)action action 是修改任何状态行为,使用 action 好处是能将多次修改可观察状态合并成一次,从而减少触发 autorun 或者 reaction 次数。...2019102301.png 在这个案例,我们引用 mobx-react 库来实现,很明显可以看出 mobx-react 是作为 mobx 和 react 之前桥梁。...首先安装 mobx-react 依赖: cnpm i mobx-react -D 修改webpack.config.js, presets 配置添加 react 进来: // ......@observer 需要根据数据变换,而改变UI组件去引用,另外建议有使用到相关数据类都引用。

    89620

    带你走进Flutter_Mobx

    Flutter 状态管理框架很多,笔者个人使用起来比较舒适是 flutter_mobx使用了不短时间,最近抽时间了解了一下 flutter_mobx 实现。今天在这里分享一下。...如果你还不熟悉 flutter_mobx 使用,可以参考它文档:https://pub.dev/packages/flutter_mobx,也可以参考我之前写一篇文章: Flutter与Mobx... enforceWitePolicy,会检查是否有计算中去观察变量行为,有的话会报错。...那么就是 Context了,那么这个 Context 又是做什么呢?Context 是顶层函数创建,本质上是一个单例,是一个 ReactiveContext 对象实例。...虽然数据状态本身处理细节比较复杂,但是我们其实也可以不做过多关心。了解flutter_mobx大致实现对于我们遇到具体问题时候,可以提供一些有效帮助。

    71610

    Mobx实践

    mobx是另一种流行状态管理方案,这里分享一下我最近使用mobx经验。...react反而把更新组件操作(setState)交给了使用者,由于setState"异步"特性导致了没法立刻拿到更新后state。...依赖收集 mobx,通过autorun和reaction对依赖数据进行了收集(可以通过get来收集),一旦这些数据发生了变化,就会执行接受到函数,和发布订阅很相似。...computed 想像一下,redux,如果一个值A是由另外几个值B、C、D计算出来store该怎么实现?...reaction则是和autorun功能类似,但是autorun会立即执行一次,而reaction不会,使用reaction可以监听到指定数据变化时候执行一些操作,有利于和副作用代码解耦。

    86820

    用故事解读 MobX 源码(一)autorun

    使用 autorun 时,所提供函数总是立即被触发一次“ 话了。...你翻看源码,将会发现此方法 onInvalidate 是 Reaction一个属性,且初始化 Reaction 时传入到构造函数,这样做目的是方便做扩展。...….); 回过头来,刚才所述 autorun 源码中找到 Reaction 类初始化部分: const reaction = new Reaction(name, function() { this.track...Mobx 则借鉴了 事务 这个概念,它实现比较简单,就是通过 成对 使用 startBatch 和 endBatch 来开始和结束一个事务,用于批量处理 Reaction 执行,避免不必要重新计算。...探长 R1 整理和观察员关系 两者依赖更新算法参考文章Mobx 源码解读(四) Reaction 中有详细注解,推荐阅读。这里也做一下简单介绍。

    46120

    用故事解读 MobX 源码(一)autorun

    使用 autorun 时,所提供函数总是立即被触发一次“ 话了。...你翻看源码,将会发现此方法 onInvalidate 是 Reaction一个属性,且初始化 Reaction 时传入到构造函数,这样做目的是方便做扩展。...….); 回过头来,刚才所述 autorun 源码中找到 Reaction 类初始化部分: const reaction = new Reaction(name, function() { this.track...Mobx 则借鉴了 事务 这个概念,它实现比较简单,就是通过 成对 使用 startBatch 和 endBatch 来开始和结束一个事务,用于批量处理 Reaction 执行,避免不必要重新计算。...探长 R1 整理和观察员关系 两者依赖更新算法参考文章Mobx 源码解读(四) Reaction 中有详细注解,推荐阅读。这里也做一下简单介绍。

    1K10
    领券