在MobX中,可以使用@observable装饰器来定义可观察的数据变化。一旦使用@observable装饰器定义了一个可观察的对象,我们可以通过添加侦听器来在React中使用它。
首先,我们需要导入autorun
函数和observable
装饰器:
import { autorun, observable } from 'mobx';
然后,定义一个类,使用@observable
装饰器将需要监听的属性标记为可观察的:
class ChangeStore {
@observable change = { value: '' };
}
const store = new ChangeStore();
接下来,我们可以使用autorun
函数创建一个侦听器,用于在change对象的属性变化时执行相应的操作:
autorun(() => {
console.log('Change:', store.change.value);
// 在这里执行其他操作
});
在React组件中,我们可以使用mobx-react
库中的Observer
组件来包裹需要观察变化的部分。这样,当change
对象的属性变化时,被包裹的部分会自动重新渲染。
import { Observer } from 'mobx-react';
const MyComponent = () => (
<Observer>
{() => (
<div>{store.change.value}</div>
)}
</Observer>
);
在上面的例子中,store.change.value
是可观察的属性,在React组件中使用Observer
组件来实时更新对应的UI。
推荐腾讯云相关产品:
请注意,以上链接仅供参考,具体产品选择应根据实际需求和使用情况进行评估。
领取专属 10元无门槛券
手把手带您无忧上云