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

}

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

}

我感觉很慢，我的应用程序需要 30 秒才能呈现 5000 行。我没有数据来计算我的申请速度。我认为我做的事情本质上是错误的。也许有更好的方法来分析我的应用程序在哪里花费时间。

编辑： 我使用了电子开发工具并分析了我的应用程序的性能。渲染部分耗时 3190 毫秒，而脚本部分消耗的时间最多，为 36500 毫秒。不知何故，创建孩子并更新他们的道具或其他东西需要很长时间。我真的不明白我做错了什么。我将尝试使用 react-virtualized 制作一个版本并比较它之后的时间。

Performance in electron

Answer 1

就个人而言，我不喜欢一次渲染 5000 行的想法。即使是对shouldComponentUpdate 的每一行进行快速检查，乘以 5000 也需要很长时间。

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

在你的情况下，我建议react-virtualized。