gpt4 book ai didi

reactjs - Mobx-state-tree 在树内使用 mobx react - 好的还是坏的做法?

转载 作者:行者123 更新时间:2023-12-02 20:04:00 27 4
gpt4 key购买 nike

我有一篇文章是一个 mobx-state-tree 对象,我正在 React 应用程序中使用它。

这是我树中的一个 Action

setId(id: string) {
self.id = id

this.updateProduct()
},

和事件

 <input
value={comp.productId}
onChange={(e) => comp.setId(e.target.value)}
/>

问题是 this.updateProduct() 会在每次更改时运行,并在每次按键后进行异步调用。

我想利用 mobx react 并使用类似的东西

reaction(
() => ({
id: this.id
}),
() => {
this.updateProduct()
}, {
delay: 500 // this is the key thing
})

我发现延迟在这种情况下非常有用,所以我想在树中使用它们。

在 mobx-state-tree 中添加 react 是一个好习惯吗?如果是,使用 react 的正确位置在哪里?

我可以在 react 组件内定义 react ,但它们将在树之外。在树外面是个好习惯吗?

最佳答案

您可以使用 afterCreatebeforeDestroy 操作来创建和处置 react 。

示例

.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
};
});

关于reactjs - Mobx-state-tree 在树内使用 mobx react - 好的还是坏的做法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55164293/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com