反応のコンポーネントのレンダリングの負荷を最適化する

Question

私はReactの助けを借りて電子ベースのスタンドアロンアプリケーションを開発しており、テーブル（その多く）をenvolvesしています。テーブルのデータを表現するには、Facebook`s Fixed Data Tableを使用してください。それは非常に効率的で、全体的にも素晴らしいことが分かります。重要なのは、ロジックでオーバーブローされているので、かなり遅れていることです。

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

をそしてFDTは、このデータをこのように動作します：一つ重要なことは、データがこのような形式で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> 

を

それから問題が起こります。いくつかのものが変更されるたびに、レデューサーはいくつかのセルにデータを渡します。したがって、テーブル全体は返されたレンダーコードの中でこのcolumnList.mapを実行する必要があります。私は確かに分かりませんが、私はそれが特に多くの列を持つテーブルのラグを引き起こすと思います。

あなたはこの状況にいくつかの堅牢な解決策を提案してもらえますか？ ありがとうございます。

Answer 1

shouldComponentUpdateを列コンポーネントに追加し、変更がない場合はいずれかの変更があったかどうかを確認してください。

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

Answer 2

わかりませんが、componentWillMountメソッド（これは1回だけ実行されます）で "columnList.map"を実行しようとすることができます。レンダリングメソッドは少し速く、静的な列リストを持つでしょう。私はこれがFacebookのFixed Data Tableの例に似ていると思う。

は、私はこのように、何かを意味：

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> 
    } 

私は違いは微妙ですけど、多分それは動作します。それは単なるアイデアです。