我正在使用react-virtualized在多网格中渲染大数组。看起来像这样:
class ImportContainer extends React.Component<IImportContainerProps, IImportContainerState> {
grid;
componentDidUpdate(prevProps) {
if (prevProps.toggleState !== this.props.toggleState) {
this.refreshGridRows(0, 0);
}
}
componentWillUnmount() {
}
refreshGridRows = (start: number = 0, end: number = (this.state.gridRowCount - this.state.fixedRowCount)) => {
this.grid.recomputeGridSize({columnIndex: this.state.fixedColumnCount, rowIndex: 0});
}
calcRowHeight = (I) => {
if (this.state.myData[I.index].randomBool === this.props.toggleState) {
return 0;
} else {
return 25;
}
}
render() {
return <>
<AutoSizer>
{({ height, width }) => <MultiGrid
ref={this._setRef}
rowHeight={this.calcRowHeight}
[...]
/>
}
</AutoSizer>
</>;
}
}
export default ImportContainer;
这大大简化了,但主要概念在那里。
因此,我切换this.props.toggleState,触发recomputeGridSize
,然后this.calcRowHeight
将显示/或隐藏所需的行。一种过滤数据的简单方法。
在小范围内可以正常使用。但是,当处理需要隐藏前2K行的大型集(例如)时,我发现react-virtualized渲染了前2K行(因为它们的高度为0,所以不考虑那些可见并继续渲染),这会使浏览器内存超载。
在这一点上,我不知道该怎么办...我无法不幸地更改数据集。当height === 0时,我怎么能告诉react-virtualized不渲染一行(我的多重网格中的单元格子集)?
非常感谢
答案 0 :(得分:0)
这是(或曾经是)一个react-virtualized错误。诀窍是将高度设置为0.1px,以便产生“不可见”行。在数千行上,显示质量是可以接受的。最好的解决方案仍然是尽可能生成新的数据集。