React.js和大表

Question

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

这是一个示例(表的大小略有缩小):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'));

Answer 1

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

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

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

然后我们可以像这样使用它

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

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

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 程序的本质，你将组件拆分成更小的组件，并确保只更新实际更改的部分。