优化 React 中组件的渲染负载答案

【问题标题】：Optimize rendering loads of components in react优化 React 中组件的渲染负载
【发布时间】：2017-01-02 02:58:14
【问题描述】：

我正在 React 的帮助下开发基于电子的独立应用程序，它包含表（其中很多）。为了表示表格数据，我使用Facebook`s Fixed Data Table，我发现它非常高效并且整体很棒。关键是我用逻辑夸大了它，所以现在它经常滞后。一件重要的事情是数据以这种格式进入 FDT：

[ { columnName: value, columnName: value, ... , columnName: value },
  { columnName: value, columnName: value, ... , columnName: value },
  ... ,
  { columnName: value, columnName: value, ... , columnName: value } ]

FDT 以这种方式处理这些数据：

   |TABLE
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL
    __________|
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL
    __________|
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL

所以我有那个代码来呈现表格：

 <Table
    rowsCount={rows.size}
    headerHeight={51}
    rowHeight={45}
    width={tableWidth}
    height={tableHeight}
  >
    {columnList.map((column, key) => 
      <Column
        key={key}
        columnKey={key}
        width={100}
        header={
          <SortHeaderCell label={column.columnname} />
        }
        cell={props =>
          <FixedDataTableCellComponent
            columnName={column.columnname}
            row={rows.get(props.rowIndex)}
            {...props}
          />
        }
      />
    )}
  </Table>

然后问题来了。每次发生变化时，reducers 都会将数据传递到某些单元格，因此整个表必须在返回的渲染代码中运行这个 columnList.map 事物。我不确定，但我认为这会导致有很多列的表出现延迟。

您能否为这种情况提出一些可靠的解决方案？提前致谢。

【问题讨论】：

标签： javascript reactjs fixed-data-table

【解决方案1】：

尝试在列组件中添加shouldComponentUpdate，并检查是否有任何props发生了变化，如果没有变化返回false；

shouldComponentUpdate: function(nextProps, nextState) {
 // check if data for that column has changed
}

【讨论】：

我很确定没有收到新道具的列不会重新渲染，而且 Facebook 的人已经完成了。问题是该表必须遍历整个 columnList 及其子项中的每一个小变化。

【解决方案2】：

我不确定，但您可以尝试在 componentWillMount 方法（仅运行一次）中运行“columnList.map”。然后渲染方法会快一点，有一个静态的列列表。我猜这样它会更类似于 Facebook 的固定数据表示例。

我的意思是，像这样：

  componentWillMount() {
    const columns = columnList.map( (column, key) => 
      <Column
        key={key}
        columnKey={key}
        width={100}
        header={
          <SortHeaderCell label={column.columnname}/>
        }
        cell={props =>
          <FixedDataTableCellComponent
            columnName={column.columnname}
            row={rows.get(props.rowIndex)}
            {...props}
          />
        }
      />
    );

    //Set default state:
    this.setState({
      columns: columns
    });
  }

  render() {
    const { columns } = this.state;

    <Table
      rowsCount={rows.size}
      headerHeight={51}
      rowHeight={45}
      width={tableWidth}
      height={tableHeight}
    >
    {columns}

    </Table>
  }

我知道区别很微妙，但也许它有效。这只是一个想法。

【讨论】：

不，不幸的是它不会工作，因为在挂载阶段，表格组件没有填充的 columnList 或其他重要的道具。
那么，也许您可以添加一个包装组件，该组件仅在您第一次获得可用数据时才呈现表格。