Reactjs 反应-更改一个列表项时出现严重性能问题

我遇到了一个严重的性能问题。我有一个应用程序，其中有2000个相当大的DOM结构列表项，当我更改列表组件中的一个项时，如下所示：

changeOne:function(){
var permTodos = this.props.todos;
permTodos[Math.floor((Math.random() * 5) + 0)].todo=((Math.random() * 50) + 1);
this.setState({ todos: permTodos });
},

它会重新呈现虚拟DOM表示中的所有列表项，这非常慢。同样的事情在Angular1中完成的速度要快40倍。我已尝试为列表项实现shouldComponentUpdate

shouldComponentUpdate:function(nextProps, nextState){
return this.props.todo!==nextProps.todo;
},

---

但是this.props.todo与nextProps.todo相同，因此没有任何更改。我已在此小提琴中重新创建了我的应用程序的迷你版，我希望有som React专家可以帮助我解决这一不幸情况。

您需要为列表中的每个项目添加唯一键：

this.state.todos.map(function(todo) {
  return <TodoItem key={todo.id} todo={todo} done={this.done} />
}.bind(this))

this.state.todos.map（函数（todo）{
返回
}.绑定（本）

---

键必须与项关联，例如它可能是其

id

。它不能是所有项目所在列表中的索引。

您需要为列表中的每个项目添加唯一键：

this.state.todos.map(function(todo) {
  return <TodoItem key={todo.id} todo={todo} done={this.done} />
}.bind(this))

this.state.todos.map（函数（todo）{
返回
}.绑定（本）

---

键必须与项关联，例如它可能是其

id

。它不能是所有项目所在列表中的索引。

此处的编辑也相同，如另一篇文章中所述
我还注意到了我在小提琴上注意到的另外两件事。在TodoItem类中，您必须说

this.props.done

而不是

this.done

render: function() {
    return <li onClick={this.props.done}>{this.props.todo}</li>
}

也切换到！你不必把它绑在最后。代码更小更干净

{
      this.state.todos.map(todo => <TodoItem todo={todo} done={this.done} />)
}

{
this.state.todos.map（todo=>）
}

查看编辑的小提琴：
现在应该比以前快多了

---

PS：探索其他ES6功能

这里也有相同的编辑，如另一篇文章中所述
我还注意到了我在小提琴上注意到的另外两件事。在TodoItem类中，您必须说

this.props.done

而不是

this.done

render: function() {
    return <li onClick={this.props.done}>{this.props.todo}</li>
}

也切换到！你不必把它绑在最后。代码更小更干净

{
      this.state.todos.map(todo => <TodoItem todo={todo} done={this.done} />)
}

{
this.state.todos.map（todo=>）
}

查看编辑的小提琴：
现在应该比以前快多了

---

PS：探索其他ES6功能

您可能不应该同时显示所有项目。只展示你需要的。这在React中相当容易做到。你可以使用像

react virtualize

这样的库，也可以自己做。你可能不应该同时显示所有项目。只展示你需要的。这在React中相当容易做到。您可以使用

react virtualize

之类的库，也可以自己使用。如果我只更改“todo”属性，它会提高性能吗？我想知道的是，如果列表项的“todo”属性没有改变，是否可以不呈现这些项。了解在这种情况下是否可以将shouldComponentUpdate添加到列表项中。对我来说，这似乎是不可能的。如果我只更改“todo”属性，它会提高性能吗？我想知道的是，如果列表项的“todo”属性没有改变，是否可以不呈现这些项。了解在这种情况下是否可以将shouldComponentUpdate添加到列表项中。在我看来这是不可能的。