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，以便产生“不可见”行。在数千行上，显示质量是可以接受的。最好的解决方案仍然是尽可能生成新的数据集。

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

1 个答案: