Node.js React Redux大型自定义数据表

我在electron和大数据表中遇到了一些react redux的性能问题。我制作了自己的自定义表格，如下所示：

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

x*
x*x*

我的表格最多包含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>
            )
    }
}

导出默认类TableBody扩展React.Component{
每个箭头（键，i）{
返回(
)
}
render（）{
返回(
{this.props.state.tableBody.allKeys.map（this.eachRow.bind（this））}
)
}
}

它映射的数组可以包含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>
            )
    }

}

导出默认类行扩展React.Component{
shouldComponentUpdate（下一步，下一步状态）{
返回此。道具！==nextrops
}
每个单元格（第一列）{
常数{
桌面，
桌椅
}=这是道具
返回(
)
}
render（）{
返回(
{this.props.tableHead.allCols.map（this.eachCell.bind（this））}
)
}
}

每行包含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
    }

}

导出默认类单元格扩展React.Component{
shouldComponentUpdate（下一步，下一步状态）{
if（this.props.visibility！==nextrops.visibility | | this.props.data！==nextrops.data）{
返回真值
}
返回错误
}
手机背景（内容）{
交换机（内容）{
案例“已启用”：
“实时”案例：
“重播”案例：
“已发送”案例：
“验收成功”案例：
//绿色的
返回{backgroundColor:'#009900'}
案例“已禁用”：案例“空闲”：
//橙色的
返回{backgroundColor:'#ff6600'}
“未知”案例：
//蓝色的
返回{backgroundColor:'#0066ff'}
案例“错误”：
//红色的
返回{backgroundColor:'#ff0000'}
违约：
//对于其他单元格，不要使用任何样式选项
返回{}
}
}
render（）{
var cellStyle=this.cellBackground（this.props.data）
如果（此.道具.可见性）{
返回(
{this.props.data}
)
}
返回空
}
}

我感觉很慢，我的应用程序需要30秒来渲染5000行。我没有数据来压缩我的应用程序速度。我想我做错了什么。也许有更好的方法来分析我的应用程序花时间的地方

编辑： 我使用了electron dev工具并分析了我的应用程序的性能。渲染部分需要3190ms，而脚本部分消耗的时间最多为36500ms。不知何故，创造孩子们并更新他们的道具或其他东西需要很长时间。我真的不明白我做错了什么。之后，我将尝试使用react虚拟化和compair制作一个版本

---

就个人而言，我不喜欢一次渲染5000行的想法。即使快速检查每行的

shouldComponentUpdate

，也需要很长时间乘以5000

您可以尝试按适合当前视图的批/块划分行，然后通过按钮（例如：按下以加载更多…）或向下滚动来获取下一个

---

我建议您这样做。

就我个人而言，我不喜欢一次渲染5000行的想法。即使快速检查每行的

shouldComponentUpdate

，也需要很长时间乘以5000

您可以尝试按适合当前视图的批/块划分行，然后通过按钮（例如：按下以加载更多…）或向下滚动来获取下一个

---

我建议你这样做。

谢谢。我也有同样的想法，我只渲染我看到的东西或链接到无限滚动条的东西，它会在我向下滚动时将行添加到我的表视图中。谢谢你的回答。我做了一些性能评测，出于任何原因，react大约90%的时间都花在脚本编写上，而不是渲染上。应该是花在

shouldComponentUpdate

？我不确定。如果我第一次发送5000行，它们都是新的，所以我认为我花这么长时间是正常的？谢谢。我也有同样的想法，我只渲染我看到的东西或链接到无限滚动条的东西，它会在我向下滚动时将行添加到我的表视图中。谢谢你的回答。我做了一些性能评测，出于任何原因，react大约90%的时间都花在脚本编写上，而不是渲染上。应该是花在

shouldComponentUpdate

？我不确定。如果我第一次发送5000行，它们都是新的，所以我认为我花这么长时间是正常的？