优化 React 中组件的渲染负载

Posted 2023-02-21

【中文标题】优化 React 中组件的渲染负载

【英文标题】：Optimize rendering loads of components in 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 事物。我不确定，但我认为这会导致有很多列的表出现延迟。

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

【参考方案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 或其他重要的道具。

那么，也许您可​​以添加一个包装组件，该组件仅在您第一次获得可用数据时才呈现表格。