作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一篇文章是一个 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 ,但它们将在树之外。在树外面是个好习惯吗?
最佳答案
您可以使用 afterCreate
和 beforeDestroy
操作来创建和处置 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/
我是一名优秀的程序员,十分优秀!