应对虚拟化Multigrid性能问题

问题描述

我正在尝试制作一个不错的“结果视图”，以查看SQL查询的结果。这些结果可能包含数千个结果，因此选择了React Virtualized以避免呈现所有行。选择了MultiGrid组件，以便将查询中的列名粘贴到视图的顶部。该组件如下所示：

使用Cell Measurer，MultiGrid具有动态宽度。该代码受示例here的启发。我的问题是该组件的渲染速度非常慢，并且在先渲染，隐藏然后再次渲染的情况下，整个应用程序冻结一分钟或更长时间。显然有一些不应该提供的东西，但是我不确定问题出在哪里。我尝试清除CellMeasurerCache，但这似乎不起作用。 MultiGrid的代码如下：

const useStyles = makeStyles((theme) => ({
  tableWrapper: {
    minHeight: 200,height: '100%',width: '100%',resize: 'vertical',overflowY: 'hidden',scrollbarWidth: 'none',paddingBottom: theme.spacing(2),},gridCell: {
    whiteSpace: 'Nowrap',display: 'flex',flexDirection: 'column',paddingLeft: '1em',paddingRight: '1em',justifyContent: 'center',}));

export default function ResultTable() {
  const recordingContext = useContext(RecordingContext);

  const classes = useStyles();

  const result = recordingContext?.activeRecording?.queryOutput;

  if (!result || !result.results) {
    return (
      <Typography style={{ padding: '8px 16px' }} variant="subtitle1">
        No data to show
      </Typography>
    );
  }

  const { labels,types,values } = result.results;

  function formatDate(d: Date) {
    let month = `${d.getMonth() + 1}`;
    let day = `${d.getDate()}`;
    const year = d.getFullYear();

    if (month.length < 2) month = `0${month}`;
    if (day.length < 2) day = `0${day}`;

    return [year,month,day].join('-');
  }

  function format(index: number,entry: unkNown): string {
    let datatype = 0;
    if (types) {
      datatype = types[index];
    }
    if (datatype === 12) {
      if (typeof entry === 'number') {
        const date = new Date(Number(entry));
        return formatDate(date);
      }
      const date = new Date(String(entry));
      return formatDate(date);
    }
    return String(entry);
  }

  const STYLE: Cssproperties = {
    width: '100%',fontFamily: 'raleway',resize: 'none',};

  const cache = new CellMeasurerCache({
    defaultWidth: 100,fixedHeight: true,});

  type CellRendererType = {
    rowIndex: number;
    columnIndex: number;
    style: React.Cssproperties;
    parent: MeasuredCellParent;
  };

  function cellRenderer({
    rowIndex,parent,columnIndex,style,}: CellRendererType) {
    const content =
      rowIndex === 0
        ? labels[columnIndex]
        : format(columnIndex,values[rowIndex - 1][columnIndex]);
    return (
      <CellMeasurer
        cache={cache}
        parent={parent}
        key={`${columnIndex}-${rowIndex}`}
        columnIndex={columnIndex}
        rowIndex={rowIndex}
      >
        <div
          style={style}
          key={`${columnIndex}-${rowIndex}`}
          className={classes.gridCell}
        >
          {content}
        </div>
      </CellMeasurer>
    );
  }
  return (
    <div className={classes.tableWrapper}>
      <div
        style={{
          minHeight: 201,paddingBottom: 1,}}
      >
        <AutoSizer>
          {({ height,width }) => (
            <MultiGrid
              cellRenderer={cellRenderer}
              columnWidth={cache.columnWidth}
              columnCount={labels.length}
              height={height}
              deferredMeasurementCache={cache}
              rowHeight={48}
              rowCount={values.length + 1}
              scrollToColumn={0}
              scrollToRow={0}
              fixedRowCount={1}
              width={width}
              style={STYLE}
              styletopRightGrid={{
                fontWeight: 'bold',backgroundColor: '#404040',fontSize: 14,}}
              styleBottomrightGrid={{
                outline: 'none',}}
              overscanColumnCount={0}
              overscanRowCount={20}
            />
          )}
        </AutoSizer>
      </div>
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）