javascript - react 。呈现和更新 1500 个 <li> 元素的简单列表时非常慢。我认为 VirtualDOM 很快

Question

我对以下简单 ReactJS 示例的性能感到非常失望。单击项目时，标签(计数)会相应更新。不幸的是，更新大约需要 0.5-1 秒。这主要是由于“重新呈现”了整个待办事项列表。

我的理解是 React 的关键设计决策是让 API 看起来像是在每次更新时重新呈现整个应用程序。它应该获取 DOM 的当前状态并将其与目标 DOM 表示进行比较，进行差异比较并仅更新需要更新的内容。

我做的事情不是最优的吗？我总是可以手动更新计数标签(和静默状态)，这将是一个几乎即时的操作，但这消除了使用 ReactJS 的意义。

/** @jsx React.DOM */

TodoItem = React.createClass({

    getDefaultProps: function () {
        return {
            completedCallback: function () {
                console.log('not callback provided');
            }
        };
    },
    getInitialState: function () {
        return this.props;
    },

    updateCompletedState: function () {
        var isCompleted = !this.state.data.completed;
        this.setState(_.extend(this.state.data, {
            completed: isCompleted
        }));
        this.props.completedCallback(isCompleted);
    },

    render: function () {
        var renderContext = this.state.data ?
            (<li className={'todo-item' + (this.state.data.completed ? ' ' + 'strike-through' : '')}>
                <input onClick={this.updateCompletedState} type="checkbox" checked={this.state.data.completed ? 'checked' : ''} />
                <span onClick={this.updateCompletedState} className="description">{this.state.data.description}</span>
            </li>) : null;

        return renderContext;
    }
});


var TodoList = React.createClass({
    getInitialState: function () {
        return {
            todoItems: this.props.data.todoItems,
            completedTodoItemsCount: 0
        };
    },

    updateCount: function (isCompleted) {
        this.setState(_.extend(this.state, {
            completedTodoItemsCount: isCompleted ? this.state.completedTodoItemsCount + 1 : this.state.completedTodoItemsCount - 1
        }));
    },
    
    render: function () {
        var updateCount = this.updateCount;
        return (
            <div>
                <div>count: {this.state.completedTodoItemsCount}</div>
                <ul className="todo-list">
                    { this.state.todoItems.map(function (todoItem) {
                        return <TodoItem data={ todoItem } completedCallback={ updateCount } />
                    }) }
                </ul>
            </div>
        );
    }
});

var data = {todoItems: []}, i = 0;

while(i++ < 1000) {
	data.todoItems.push({description: 'Comment ' + i, completed: false});
}

React.renderComponent(<TodoList data={ data } />, document.body);

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

_{jsFiddle 链接，以防万一:http://jsfiddle.net/9nrnz1qm/3/}

Answer 1

如果您执行以下操作，您可以大大缩短时间。为我更新需要 25 毫秒到 45 毫秒。

• 使用生产构建
• 实现 shouldComponentUpdate
• 不可变地更新状态

updateCompletedState: function (event) {
    var isCompleted = event.target.checked;
    this.setState({data: 
        _.extend({}, this.state.data, {
            completed: isCompleted
       })
    });
    this.props.completedCallback(isCompleted);
},

shouldComponentUpdate: function(nextProps, nextState){
    return nextState.data.completed !== this.state.data.completed;
},

Updated fiddle

_{(这段代码有很多值得怀疑的地方，daniula 指出了其中的一些)}