1

我正在 React 的帮助下开发基于电子的独立应用程序，它包含表（其中很多）。为了表示表数据，我使用Facebook 的固定数据表，我发现它非常高效且整体很棒。关键是我用逻辑夸大了它，所以现在它经常滞后。一件重要的事情是数据以这种格式进入 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在返回的渲染代码中运行这个东西。我不确定，但我认为这会导致有很多列的表格出现滞后。

你们会为这种情况提出一些强有力的解决方案吗？提前致谢。

4

2 回答 2

1

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

shouldComponentUpdate: function(nextProps, nextState) {
 // check if data for that column has changed
}
于 2016-08-25T15:42:00.537 回答
0

我不确定，但您可以尝试在 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>
  }

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

于 2016-08-25T16:46:45.147 回答