React.js和大表 [英] React.js and big table

问题描述

我需要绘制一张大表，不是很大，大约400x400的单元格。但React渲染速度太慢，并且每次单击该单元格时，都应更新单元格，此更新需要相同的时间。有什么建议如何加快它？或者React不适合执行此类任务？

I need to draw a big table, not really big, about 400x400 cells. But React renders it too slow, and on every click on the cell, cell should be updated and this update takes same huge amount of time. Any suggestions how to speed it up ? Or React is just not suitable tool for such task ?

以下是示例（表格大小略有缩小）：
https://jsfiddle.net/69z2wepo/15731/

Here is example (with slightly reduced size of table): https://jsfiddle.net/69z2wepo/15731/

var ROWSC = 400;
var COLSC = 100;

var Hello = React.createClass({
    getInitialState: function () {
        return {
            t: { "1-1": 'c' }
        };
    },
    clicked: function (k) {
        var t = this.state.t;
        t[k] = t[k] ? 0 : 'c';
        this.setState({  t: t  });
    },
    render: function() {
        var items = [];
        for (var r = 0; r < ROWSC; r++) {
            var cols = [];
            for (var c = 0; c < COLSC; c++) {
                var k  = ''+r+'-'+c;
                cols.push(<td key={c} onClick={this.clicked.bind(this,k)} className={this.state.t[k]}>&nbsp;</td>);
            }
            items.push(<tr key={r}>{cols}</tr>);
        }
        return <table>
            {items}
            </table>
        </div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

推荐答案

默认情况下，React会重新渲染所有内容，但是存在性能问题，
可以使用 shouldComponentUpdate 用于确定要在更新时排除组件树的哪些部分
。

By default, React re-renders everything, but in the presence of performance problems, it is possible to use the shouldComponentUpdate function to determine which parts of the component tree to exclude on updates.

在您的示例中，只有一行可以一次更新，所以
如果我们开始跟踪更新发生的行，我们可以确保只更新
此行。首先，我们必须引入一个新的组件来包装我们可以放置钩子的
表行。

In your example, there is only a single row that can be updated at once, so if we start tracking which row the update occured on we can make sure only this row is updated. First, we must introduce a new component that wraps the table row where we can place our hook.

var Row = React.createClass({
    shouldComponentUpdate: function(nextProps) {
        return nextProps.mustUpdate;
    },
    render: function() {
        return <tr>{this.props.children}</tr>;
    }
});

然后我们就可以使用它了

Then we can use it like

items.push(
   <Row key={r}
        mustUpdate={this.state.lastUpdatedRow === r}>
        {cols}
   </Row>);

此外，重新渲染所有这些单元格似乎也是浪费，所以我们可以引入
另一个包装表格单元格的组件。

Furthermore, it seems like a waste to re-render all those cells too, so we can introduce yet another component that wraps the table cells.

var Cell = React.createClass({
    shouldComponentUpdate: function(nextProps) {
        return this.props.selected !== nextProps.selected;
    },
    render: function() {
        var props = this.props;
        return (
            <td onClick={props.onClick.bind(null, props.col, props.row)} 
                className={props.selected ? 'c' : ''}>&nbsp;
            </td>
        );
    }
});

这可以让您在更新时获得显着的性能提升。如果它仍然不是
足以满足您的特定问题，则可能是React不适合您的用例。
无论如何，这是优化React程序的本质，您将组件拆分为较小的
组件，并确保只有实际更改的部分更新。

This should give you a significant performance improvement on updates. If it is still not good enough for your particular problem, it might be that React is not ideal for your use case. Anyway, that is the essence of optimizing React programs, you split components into smaller components and make sure only the parts that actually changed update.

这篇关于React.js和大表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！