Я использую реагирующую виртуализацию для рендеринга большого массива в многосетку.Это выглядит примерно так:
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 строки (например), я обнаружил, что реагирующая виртуализация отображает первые 2K строки (так как их высота равна 0, она не учитывает текак видимый и, следовательно, продолжает рендеринг), который перегружает память браузера.
На данный момент, я не знаю, что делать ... Я не могу изменить свой набор данных, к сожалению, к сожалению.Как я могу сказать, что реагирует на виртуализацию, чтобы не отображать строку (подмножество ячеек в моей многосетке), когда высота === 0?
большое спасибо,