我有一篇文章是mobx-state-tree对象,正在React应用程序中使用它。
这是我树上的动作
setId(id: string) {
self.id = id
this.updateProduct()
},
和事件
<input
value={comp.productId}
onChange={(e) => comp.setId(e.target.value)}
/>
问题是this.updateProduct()
会在每次更改时运行,并且每次按键后都会进行异步调用。
我想利用mobx反应并使用类似的东西
reaction(
() => ({
id: this.id
}),
() => {
this.updateProduct()
}, {
delay: 500 // this is the key thing
})
我发现延迟在这种情况下非常有用,因此我想在树中使用它们。
在mobx-state-tree中添加反应是一种好习惯吗?如果是,使用反应的正确位置在哪里?
我可以在react组件内部定义反应,但是它们将在树的外部。在树外是好习惯吗?
答案 0 :(得分:1)
您可以使用afterCreate
和beforeDestroy
动作来创建和处理反应。
示例
.actions(self => {
let dispose;
const afterCreate = () => {
dispose = reaction(
() => ({
id: this.id
}),
() => {
this.updateProduct();
},
{
delay: 500
}
);
};
const beforeDestroy = dispose;
return {
afterCreate,
beforeDestroy
};
});
您还可以使用addDisposer
帮助程序,因此如果需要,无需在beforeDestroy
中进行手动清理。
.actions(self => {
function afterCreate() {
const dispose = reaction(
() => ({
id: this.id
}),
() => {
this.updateProduct();
},
{
delay: 500
}
);
addDisposer(self, dispose);
}
return {
afterCreate
};
});