反应虚拟化-选择加入或退出虚拟化

Question

在我正在开发的类似日历的应用程序中，我使用的是最健壮的反应虚拟化组件。

我使用了ScrollSync的三个网格，就像在这个例子中一样，但也使用cellRangeRenderer在网格上呈现“药丸”。

但是，我发现，在速度较慢的计算机上，滚动时呈现的速度可能相当慢(在一个视图中可以有大约40列20行和40多个药丸)。

一些将要使用这个应用程序的人实际上并不需要虚拟化，因为整个数据表没有那么大。因此，我想要做的是继续使用react-virtualized提供的通用框架，但是对于行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)传递给它，并按如下方式使用它：

​

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支持。

希望它有帮助:)