在我的 Typescript 应用程序中,有一个代表一些数据的类。这个类是端到端共享的(前端和后端都使用它来构造数据)。它有一个名为items
这是一个数字数组。
class Data {
constructor() {
this.items = [0];
}
addItem() {
this.items = [...this.items, this.items.length];
}
}
我试图在我的组件中渲染这些数字,但由于修改类实例不会导致重新渲染,所以我必须“强制重新渲染”才能生成新的items
值呈现:
const INSTANCE = new Data();
function ItemsDisplay() {
const forceUpdate = useUpdate(); // from react-use
useEffect(() => {
const interval = setInterval(() => {
INSTANCE.addItem();
forceUpdate(); // make it work
}, 2000);
return () => clearInterval(interval);
}, []);
return (
<div>
<h1>with class:</h1>
<div>{INSTANCE.items.map(item => <span>{item}</span>)}</div>
</div>
);
}
虽然这可行,但它有一个主要缺点:addItem()
不是唯一的修改INSTANCE
;该类实际上具有大约 10 到 15 个代表不同数据部分的属性。所以,做forceUpdate()
无论何时发生修改都是一场噩梦。并非没有提到,如果这个实例将在组件之外修改,我将无法forceUpdate()
将更改与组件同步。
Using useState([])
代表items
将解决这个问题,但正如我所说Data
有很多属性,还有一些函数。那又是一场噩梦。
我想知道从类实例渲染数据的最佳方法是什么,而无需重新渲染黑客或将整个实例解包到本地组件状态。
Thanks!
这是 Codesandbox 演示 https://codesandbox.io/s/class-properties-rerender-lpsqv这显示了使用类和本地状态之间的差异。