反應 - 更改一個列表項時出現嚴重的性能問題

我遇到了嚴重的性能問題。我與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所以沒有什麼改變。我已經在這個小提琴https://jsfiddle.net/2Lk1hr6v/29/中重新創建了我的應用程序的迷你版本，我希望能夠幫助我解決這個不幸的情況。

來源

2017-06-16 gfels

您可能不應該同時顯示所有項目。只顯示你需要的。這在React中很容易實現。你可以使用'react-virtualize'這樣的庫或者自己動手 – BravoZulu

同樣在這裏編輯，如另一個thread中提到的。
另外我注意到我在小提琴中注意到的另外兩件事。在TodoItem類中，您必須說this.props.done而不是this.done。

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

在TodoList的階級，你是指未申報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 !!

來源

2017-06-17 12:02:55

您需要從列表中添加唯一的密鑰每個項目：

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

主要必須項相關聯，例如它可能是其id。它必須不是列表中所有項目所在的索引。

來源

2017-06-16 20:41:53 oklas

如果我只是改變「todo」屬性，會不會提高性能？我想知道的是，如果有可能不渲染「todo」屬性沒有從之前改變的列表項。要知道是否可以添加shouldComponentUpdate來列出這種場景中的項目。對我來說似乎是不可能的。 – gfels

反應 - 更改一個列表項時出現嚴重的性能問題

回答

相關問題