React Virtualized Table - 约 8 列表中的输入元素的性能问题

Question

我正在尝试创建一个 8 列表，每列包含 <input /> 元素。出于某种原因，我在文本输入的 on change 事件中遇到了延迟。将列数减少到 4 以下会使体验更好。这可能有点道理，但我也尝试增加列的数量，我发现对于 10 列或更多列，体验再次很棒。您可以查看我的超级简单的 React 应用程序，您可以在其中动态更改列数 - http://com.react.table-with-inputs.s3-website.eu-central-1.amazonaws.com/。

这是我的代码：

import React from 'react';
import { AutoSizer, Table, Column } from 'react-virtualized';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      numOfCols: '8',
    };
  }

  rowGetter = ({ index }) => {
    return { index };
  };

  renderHeaderCell = ({ label }) => {
    return (
      <span>{label}</span>
    );
  };

  renderCell = ({ rowIndex, columnIndex }) => {
    return (
      <input key={`input-${rowIndex}-${columnIndex}`} />
    );
  };

  render() {
    return (
      <div style={{ display: 'flex', flex: 1, flexDirection: 'column', padding: '10px' }}>
        <span>NUMBER OF COLUMNS</span>
        <input
          value={this.state.numOfCols}
          onChange={e => this.setState({ numOfCols: e.target.value })}
        />
        <br />
        <br />
        <AutoSizer style={{ flex: 1 }}>
          {({ height, width }) => (
            <Table
              width={width}
              height={height}
              estimatedRowSize={36}
              overscanRowCount={10}
              headerHeight={30}
              rowHeight={36}
              rowCount={20}
              rowGetter={this.rowGetter}
            >
              {
                (() => {
                  const cols = [];

                  for (let i = 0; i < parseInt(this.state.numOfCols); i += 1) {
                    cols.push(
                      <Column
                        label={`Title${i + 1}`}
                        dataKey={`title${i + 1}`}
                        width={120}
                        cellRenderer={this.renderCell}
                        headerRenderer={this.renderHeaderCell}
                      />
                    )
                  }

                  return cols;
                })()
              }
            </Table>
          )}
        </AutoSizer>
      </div>
    );
  }
}

export default App;

编辑 1： 这仅在 Chrome（Mac 和 Windows、桌面和移动设备）上发生。它不会在 Safari 或 Firefox 上重现（不是桌面版，也不是移动版）。

编辑 2： 我试图删除AutoSizer，但没有任何改变。上传了一个更新版本，该版本能够渲染或不渲染 Table 和 AutoSizer 容器 (http://com.react.table-with-inputs.s3-website.eu-central-1.amazonaws.com/)。

Answer 1

我没有重现该问题，但是我在您的代码中看到了多个可能在该代码中产生性能问题的点，所以这是我的尝试。

首先，您是否尝试过减少渲染次数？

例如，也许您的组件可以切换到 PureComponent 以便它仅在状态和道具更改时重新呈现。这可以提高性能。您需要进行大量测试，因为您需要检查子组件是否需要重新渲染。

删除内联样式，因为这每次都会创建一个新对象，因此破坏了 react 可以进行的每个渲染优化。如果您仍然需要 style={something} 则将 something 移动到类声明之外的 const 变量，以确保对象被创建一次。请不要认为这是一种不好的做法，因此请检查代码中出现的所有其他情况。

在那里，我看到至少有两个地方 react 会重新渲染一个元素，但该元素并没有改变，因为对象内容是硬编码的。

你为什么要创建一个新函数然后像这样内联执行它？

更有效的方法是使用 lodash 的地图：

map(range(this.state.numOfCols), i => (<Column
  label={`Title${i + 1}`}
  dataKey={`title${i + 1}`}
  width={120}
  cellRenderer={this.renderCell}
  headerRenderer={this.renderHeaderCell}
/>))

一旦所有明显的问题都得到解决，安装一个 perf 包，例如 https://github.com/welldone-software/why-did-you-render，并检查为什么你的 App 组件渲染过多。

也许您的示例中未包含某些代码导致组件每次都重新呈现？

编辑：重读代码后，我 75% 确定问题出在 style={{ flex: 1 }} 导致完全 AutoSizer 重新渲染！