React-virtualized：当 calcRowHeight return 0 时忽略行

Question

我正在使用 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 不渲染行（我的多重网格中的单元格子集）？

非常感谢，

Answer 1

它是（或曾经是）react-virtualized 的一个已知错误。诀窍是将高度设置为 0.1px，以便生成 'invisible' 行。在千行上，显示质量是可以接受的。最好的解决方案仍然是尽可能生成一个新的数据集。

React-virtualized：当 calcRowHeight return 0 时忽略行

React-virtualized: ignore rows when calcRowHeight return 0

reactjs

react-virtualized