Question

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

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

我做的事情不是最优的吗？我总是可以手动更新计数标签（以及静默状态），这将是一个几乎是即时的操作，但这会消除使用ReactJS的重点。

＆＃13;

/** @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);

＆＃13;

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

＆＃13;

_{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指出其中一些代码）}

Answer 2

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

数组中的每个子节点都应该有一个唯一的“键”支柱。检查TodoList的render方法。有关详细信息，请参阅fb.me/react-warning-keys。
通过将<input type="checkbox" />内的<TodoItem />上的事件处理程序从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 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应该很快，是的，但你仍然需要坚持一般的编程范式，即要求机器尽可能少地做，从而尽可能快地产生结果。重新渲染不需要重新渲染的东西会妨碍它，无论它是否是最佳实践＆＃34;。

ReactJS。渲染和更新1500个<li>元素的简单列表时速度相当慢。我以为VirtualDOM很快</li>

3 个答案: