Question

我在电子和大数据表中遇到了react-redux的一些性能问题。我已经完成了自己的自定义表，如下所示：

methods: {
    process: function process(id) {
        var deferred = $q.defer();
        this.$http.post('controller/process', { id: id }).then(function (res) {
            if (res.data.items > 0) {
                this.process(id);
            } else { 
                return deferred.resolve(true);
            }
        }, function (data) {
            this.$notify(data, 'danger');
            this.progress = false;
            return deferred.resolve(true); //if not will fail promise
        });

        return deferred.promise;
    },
    run: function run($id) {

        this.busy = true;   
        this.process($id)
            .then(
                function() { //executes when resolve
                    this.busy = false;  
                },
                function() {
                    //executes when you run deferred.reject() in process method
                }
        );  

    }

},

我的表包含最多20列和5000行。我每隔几秒就会得到更新。我只用13列和5000行做了一些时间。从Point Data开始进入，直到呈现表的视图需要~30秒。在我的选择中哪个是长的。

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

它映射的数组可以包含5000个条目。

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

每行包含X个单元格，取决于表格的列数：

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

}

我感觉很慢，我的应用程序需要30秒来渲染5000行。我没有数据可以说明我的申请速度。我想我做的事情本质上是错误的。也许有更好的方式来描述我的应用程序占用时间的位置。

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

Performance in electron

Answer 1

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

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

我建议您react-virtualized。

React-Redux大型自定义数据表

1 个答案: