js:MobX简单入门

本文介绍了如何使用MobX库来管理React应用的状态。首先,通过`observable`定义状态,如`count`。接着,利用`computed`创建响应式计算值,并用`autorun`监听状态变化并自动更新视图。最后,通过`action`修饰符来安全地修改状态,确保状态改变的原子性。示例中展示了直接修改和使用方法两种方式增加`count`的值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

MobX 核心 API :

  • 定义状态(observable)
  • 响应状态(autorun, computed)
  • 修改状态(action)
import { observable, autorun, computed, action } from 'mobx';

// 1. 定义状态
const store = observable({
  count: 0,
});

// 2. 响应状态

// 计算值
const count10 = computed(() => {
  return 10 * store.count;
});

// 定义响应函数
autorun(() => {
  console.log('count:', store.count, count10.get());
});

// 3. 修改状态
// 方式一:直接修改状态
store.count += 1;
store.count += 1;
store.count += 1;

// 方式二:显式修改状态
const increase = action(() => store.count++);
increase();

参考
MobX 简明教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值