Question

我正在使用我正在处理的类似日历的应用程序中最笨拙的react-virtualized组件。

我在this example中使用ScrollSync的三个网格，但也使用cellRangeRenderer在网格顶部渲染“药丸”。

该应用程序工作得非常好但是我发现在较慢的计算机上滚动时的渲染速度可能相当慢（在一个视图中可以有大约40列20行和最多40个丸）

一些将使用此应用程序的人实际上并不真正需要虚拟化，因为整个数据表不是大。所以，我想要做的是继续使用react-virtualized提供的一般框架，但对于行＆lt; x但只是将整个网格一次性渲染以有希望提高性能。对于行＆gt;的用户x然后网格将正常虚拟化。

我知道cellRangeRenderer只接收行和列的开始和结束索引，然后为网格的每个单元格返回一个div数组，所以我可以想象只发送一个开始和结束索引整个网格然后将返回整个网格。我只是不确定如何在滚动时覆盖重新渲染。

我有兴趣听到任何建议或类似的经历。

Answer 1

当您的行数足够小而不需要虚拟化时，我建议不要使用react-virtualized组件。它不必要地增加了复杂性等。：）

您可以创建一个假的Grid组件，它只渲染所有行，然后根据行数有条件地在它和真实行之间交换，例如：

import {Grid} from 'react-virtualized';
import FakeGrid from './FakeGrid';

// Your render function
const GridComponent = this.props.rowCount > SOME_THRESHOLD
  ? Grid
  : FakeGrid

return <GridComponent {...gridProps} />

Answer 2

我有一个组件，它包装了Table中的react-virtualized，并向其传递了fixedHeight道具（boolean），并按如下方式使用它： / p>

import {
  AutoSizer,
  Table as VirtualizedTable
} from 'react-virtualized';

const Table = (props) => {
  const getHeight = (autoSizerHeight) => {
    const { fixedHeight, headerHeight, rowHeight, rowCount } = props;

    // I'm checking for `rowCount` in order to properly render the `noRowsRenderer` component
    return fixedHeight && rowCount
      ? headerHeight + rowHeight * rowCount
      : autoSizerHeight;
  }
  
  return (
    <AutoSizer
      disableHeight={props.fixedHeight && Boolean(rowCount)}>
      {({ height, width }) => (
        <VirtualizedTable
          ...
          width={width}
          height={getHeight(height)}>
          {props.columnDefs.map(
            (columnDef, columnIndex) => (
              <Column ... />
            )
          )}
        </VirtualizedTable>
      )}
    </AutoSizer>
  );
}

注意：

我不选择虚拟化，当我不想在表中滚动时，或者在对数据进行分页并且页面不大时，通常使用fixedHeight道具。

希望它会有所帮助：）

react-virtualized - 选择加入或退出虚拟化

2 个答案: