React - 1つのリスト項目を変更すると重大なパフォーマンス上の問題が発生する

Question

重大なパフォーマンス上の問題が発生しました。私は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:function(nextProps, nextState){ 
return this.props.todo!==nextProps.todo; 
}, 

ためshouldComponentUpdateを実装しようとしたが、this.props.todoはnextProps.todoはそう何も変わっていないのと同じです。私はこのフィドルで私のアプリケーションのミニバージョンを再作成しましたhttps://jsfiddle.net/2Lk1hr6v/29/と私はこの不幸な状況で私を助けることができるsomリアクトエキスパートがあることを望んでいます。あなたは、リストから項目ごとに一意のキーを追加する必要が

Answer 1

ここでも同じように編集します。もう1つはthreadです。
また、ここで私が気付いたことをもう2つ気づきました。 TodoItemクラスでは、this.props.doneはthis.doneではありません。 todolistのクラスで

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

、あなたが宣言されていないthis.doneを参照しています。あなたはおそらくその関数を宣言する必要がありますか？

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

ES6 arrow functionsにも切り替えてください！あなたはそれを最後に縛る必要はありません。コードはもっと小さくて清潔です！

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

チェックアウト編集したフィドルを：https://jsfiddle.net/2Lk1hr6v/33/
これは今それが何だったかよりもはるかに高速でなければなりません！

PS：その他のES6の機能を調べるhere !!

Answer 2

：

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

キーは、そのidかもしれ例えばアイテムに関連付けられている必要があります。それはリスト内のインデックスでなくてはなりません。