Question

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

$('#wrap-categories').click(function(e) {
    e.stopPropagation();
});
$('#wrap-categories').click(function() {        
    $('#wrap-categories > ul').addClass('opened').show();
});

$(document).click(function() {      
    $('#wrap-categories > ul').removeClass('opened').hide();
});

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

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

所以我有那个代码来渲染表：

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

然后出现问题。每次更改某些内容时，reducers都会将数据传递给某些单元格，因此整个表格必须在返回的渲染代码中运行此<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>内容。我不确定，但我认为它会导致具有大量列的表格滞后。

您是否愿意为这种情况提出一些有力的解决方案？提前谢谢。

Answer 1

尝试在列组件中添加shouldComponentUpdate，并检查是否有任何道具已更改，如果没有更改则返回false;

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

Answer 2

我不确定，但您可以尝试运行＆＃34; columnList.map＆＃34;在componentWillMount方法中（只运行一次）。然后渲染方法会更快一些，具有静态列列表。我猜这种方式更类似于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>
  }

我知道差异是微妙的，但也许它有效。这只是一个想法。

优化反应中组件的渲染负载

2 个答案: