admin 管理员组文章数量: 1087139
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://roclinux.cn/b/1713385232a631970.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论