react mobx 如何调用计算值
调用 MobX 计算值的方法
在 React 中使用 MobX 时，计算值（computed）是通过派生状态自动生成的。以下是调用计算值的具体方法：
使用 @computed 装饰器定义计算值
在 MobX 的类或对象中，通过 @computed 装饰器定义计算属性。计算值会根据依赖的 observable 状态自动缓存并更新。
import { observable, computed } from "mobx";
class Store {
@observable price = 10;
@observable quantity = 2;
@computed get total() {
return this.price * this.quantity;
}
}在 React 组件中访问计算值
通过 observer 包装的 React 组件会自动监听计算值的变化，并在依赖的 observable 状态变化时重新渲染。
import { observer } from "mobx-react-lite";
const Cart = observer(({ store }) => {
return <div>Total: {store.total}</div>;
});直接调用计算值
计算值可以像普通属性一样直接访问，无需额外调用方法。MobX 会自动处理缓存和更新逻辑。
const store = new Store();
console.log(store.total); // 输出 20动态依赖的计算值
计算值会动态跟踪其依赖的 observable 状态。如果依赖变化，计算值会在下次访问时重新计算。
store.price = 15;
console.log(store.total); // 输出 30（自动重新计算）注意事项
- 计算值应保持纯函数特性，避免副作用。
- 避免在计算值中修改其他 observable 状态，这可能导致无限循环。
- 计算值的缓存机制依赖于访问时的依赖状态，频繁变化的依赖可能影响性能。
通过以上方式，可以高效地在 React 和 MobX 中定义和使用计算值，实现派生状态的自动化管理。
