反应。渲染和更新 1500 <li> 个元素的简单列表时非常慢。我认为 VirtualDOM 很快

Question

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

我的理解是 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 link，以防万一：http://jsfiddle.net/9nrnz1qm/3/}

Answer 1

当您生成元素列表时，您应该为每个人提供唯一的关键道具。在你的情况下：
```
<ul className="todo-list">
    { this.state.todoItems.map(function (todoItem, i) {
        return <TodoItem key={i} data={ todoItem } completedCallback={ updateCount } />
    }) }
</ul>
```
您可以通过浏览器控制台中的警告消息找到有关此错误的信息：

Each child in an array should have a unique "key" prop. Check the render method of TodoList. See fb.me/react-warning-keys for more information.
还有一个警告，您可以通过将 <TodoItem /> 内 <input type="checkbox" /> 上的事件处理程序从 onClick 更改为 onChange 来轻松修复：
```
<input onClick={this.updateCompletedState} type="checkbox" checked={this.state.data.completed ? 'checked' : ''} />
```

您正在进行一些字符串连接以设置正确的 className。要获得更具可读性的代码，请尝试使用简单易用的 React.addons.classSet:

render: function () {
    var renderContext = this.state.data ?
        var cx = React.addons.classSet({
            'todo-item': true,
            'strike-through': this.state.data.completed
        });

        (<li className={ cx }>
            <input onChange={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;
}

Answer 2

如果你做到以下几点，你可以减少很多时间。为我更新需要 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 指出了其中的一些）}

Answer 3

我正在查看您在哪里渲染 () 列表...

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

不应在每次更新 TodoItem 时调用它。给上面的元素一个包围 div 和一个 id 像这样：

return <div id={someindex++}><TodoItem
  data={ todoItem }
  completedCallback={ updateCount }
/></div>

然后简单地重新渲染单个 TodoItem，就像这样：

ReactDOM.render(<TodoItem ...>, document.getElementById('someindex'));

ReactJS 应该是很快的，是的，但是你仍然需要坚持通用的编程范式，即要求机器尽可能少地做，从而尽可能快地产生结果。重新渲染不需要重新渲染的东西会妨碍它，无论它是否 "best practice".

反应。渲染和更新 1500 <li> 个元素的简单列表时非常慢。我认为 VirtualDOM 很快

ReactJS. Quite slow when rendering and updating a simple list of 1500 <li> elements. I thought VirtualDOM was fast

javascript

performance

dom

reactjs