admin 管理员组

文章数量: 1184232


2024年4月18日发(作者：sap哪个模块顾问待遇好)

mobx函数式写法

MobX支持函数式编程风格，可以使用`computed`和`reaction`函数

来实现。

`computed`函数用于定义一个计算属性，它接受一个函数作为参数，

该函数返回计算结果。当依赖的数据发生变化时，计算属性会自动重

新计算。

例如，我们可以定义一个计算属性`total`，它依赖于`price`和

`quantity`两个属性：

```javascript

import { observable, computed } from 'mobx';

class Cart {

@observable price = 10;

@observable quantity = 2;

@computed get total() {

return * ty;

}

}

const cart = new Cart();

(); // 20

= 15;

(); // 30

```

`reaction`函数用于定义一个响应式函数，它接受两个参数：一个函

数和一个可选的选项对象。当依赖的数据发生变化时，响应式函数会

自动执行。

例如，我们可以定义一个响应式函数`logTotal`，它依赖于`total`

属性：

```javascript

import { observable, computed, reaction } from 'mobx';

class Cart {

@observable price = 10;

@observable quantity = 2;

@computed get total() {

return * ty;

}

}

const cart = new Cart();

reaction(

() => ,

total => (`Total: ${total}`)

);

= 15; // Total: 30

ty = 3; // Total: 45

```

在上面的例子中，我们使用`reaction`函数监听``属性的

变化，并在每次变化时打印出新的总价。


本文标签： 函数 定义 计算 属性 模块

版权声明：本文标题：mobx函数式写法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1713385232a631970.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。