反应虚拟化：当 calcRowHeight 返回 0 时忽略行答案

【问题标题】：React-virtualized: ignore rows when calcRowHeight return 0反应虚拟化：当 calcRowHeight 返回 0 时忽略行
【发布时间】：2019-11-18 19:04:45
【问题描述】：

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

非常感谢，

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

它是（或曾经是）react-virtualized 的已知错误。诀窍是将高度设置为 0.1px，这样它就会产生一个“不可见”的行。在数千行上，显示质量是可以接受的。如果可能的话，最好的解决方案仍然是生成一个新的数据集。

【讨论】：