React JS - 應該組件更新列表項

我找不到任何地方如何實現這個看起來很容易實現的功能。React JS - 應該組件更新列表項

該功能在此開發談話https://youtu.be/-DX3vJiqxm4?t=1741

他提到，在陣列中的每個對象，他檢查upvotes和downvotes，檢查列表行需要更新提及，但我就是無法實現它。

我有一個應用程序在很多項目的反應JS，而我只改變一個隨機項。當然反應重新呈現在虛擬DOM整個列表和DIFFS整個列表的以前和當前虛擬的DOM，它需要較長的時間。

但我想，以避免渲染不變列表項。在我的應用程序 - 如果「待辦事項」屬性沒有改變，該項目不需要更新。這裏是我的應用程序的演示：https://jsfiddle.net/2Lk1hr6v/29/

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

我使用列表中的項目組件這種方法，但this.props.todo相同nextProps.todo所以當我改變沒有行被更新前五項的隨機項目。

來源

2017-06-16 gfels

那是因爲你還沒有更新，待辦列表陣列this.props.todos的參考。

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

這就是爲什麼不變性很重要。

如果您認爲這太複雜了。使用庫，如immutableJS，它會自動爲你做。

編輯：工作小提琴鏈接！ https://jsfiddle.net/11z2zzq6/1/

來源

2017-06-17 00:09:31

很抱歉，但我做了一個小提琴與此編輯，它仍然無法正常工作。 :(https://jsfiddle.net/2Lk1hr6v/30/ – gfels

我發揮它周圍，我發現你無法逃脫改變'.todo'直接，所以編輯上面的回答，同時也包括工作提琴。 –

我已經放棄了，找不到任何解釋它是如何爲使用shouldComponentUpdate的列表工作的。對你有好感！ – gfels

React JS - 應該組件更新列表項

回答

相關問題