React-Redux大規模なカスタムデータテーブル

Question

電子と大型データテーブルでreact-reduxのパフォーマンスに問題があります。

<Table> 
<TableHead> 
    <tr> 
    x*<Column /> 
    </tr> 
<TableHead/> 
<TableBody> 
    x*<Row> x*<TableCell /><Row /> 
<TableBody/> 
<Table /> 

マイテーブルには、最大20の列と5000の行が含まれています。私は数秒ごとに更新を取得します。私はちょうど13カラムと5000行で時間を計った。テーブルのビューがレンダリングされるまで〜30秒かかる。私の選択肢ではどれが長くなるのか。

export default class TableBody extends React.Component{ 

    eachRow(key, i){ 
     return(
       <Row 
       key = {i} 
       id = {key} 
       tableRow = {this.props.state.tableBody.byKey[key]} 
       tableHead = {this.props.state.tableHead} 
       /> 
      ) 
    } 
    render(){ 
     return(
      <tbody> 
       {this.props.state.tableBody.allKeys.map(this.eachRow.bind(this))} 
      </tbody> 
      ) 
    } 
} 

マッピングされているアレイには、5000個のエントリが含まれている可能性があります。

export default class Row extends React.Component{ 

    shouldComponentUpdate(nextProps, nextState){ 
     return this.props !== nextProps 
    } 

    eachCell(col,i){ 
     const { 
      tableHead, 
      tableRow 
     } = this.props 

     return(
       <Cell 
       key={i} 
       visibility = {tableHead.byCol[col].visibility} 
       data = {tableRow[tableHead.byCol[col].name]} 
       /> 

      ) 
    } 

    render(){ 
     return(
       <tr> 
        {this.props.tableHead.allCols.map(this.eachCell.bind(this))}   
       </tr> 
      ) 
    } 

} 

各行は、テーブルが持っているどのように多くの列にdepening、細胞のX量が含まれています

export default class Cell extends React.Component{ 

    shouldComponentUpdate(nextProps, nextState){ 
     if(this.props.visibility !== nextProps.visibility || this.props.data !== nextProps.data){ 
      return true 
     } 
     return false 
    } 

    cellBackground(content){ 
     switch(content){ 
      case 'ENABLED': 
      case 'REAL TIME': 
      case 'REPLAY': 
      case 'SENT': 
      case 'ACCEPTANCE SUCCESS': 
       //green 
       return {backgroundColor: '#009900'} 
      case 'DISABLED': case 'IDLE': 
       //orange 
       return {backgroundColor: '#ff6600'} 
      case 'UNKNOWN': 
       //blue 
       return {backgroundColor: '#0066ff'} 
      case 'ERROR': 
       //red 
       return {backgroundColor: '#ff0000'} 
      default: 
       //for every other cell dont use any styling options 
       return {} 
     } 
    } 

    render(){ 
     var cellStyle = this.cellBackground(this.props.data) 
     if(this.props.visibility){ 
      return(
       <td style={cellStyle}> 
        {this.props.data} 
       </td> 
      ) 
     } 
     return null 
    } 

} 

それは私のアプリケーションは5000行をレンダリングするために30秒かかることを、私のために遅く感じています。私は自分のアプリケーションの速度を理解するためのデータがありません。私は何か本質的に間違っていると思う。たぶん私のアプリが時間を要する場所をプロファイルする良い方法があります。

EDIT： 私は電子開発ツールを使用し、私のアプリのパフォーマンスをプロファイリングしました。レンダリングパートは3190ms、スクリプトセクションでは36500msで最も多く消費されます。どういうわけか、子どもを作り、その小道具や何かを更新するのには、時間がかかります。私は本当に私が間違っていることを理解していません。私は反応仮想化したバージョンを作成しようとし、その後の時間を補う。

Performance in electron

Answer 1

個人的に、私は一度に5000行をレンダリングするという考え方が好きではありません。 shouldComponentUpdateの各行での高速チェックでも、5000を掛けて時間がかかります。

現在のビューに適したバッチ/チャンクで行を分割しようとすると、より多くをロード...）、またはスクロールダウンします。

あなたの場合はreact-virtualizedをお勧めします。