Reagieren JS - shouldComponentUpdate auf Listenelemente

Question

Ich kann nirgendwo finden, wie diese Funktion implementiert wird, die so einfach zu implementieren scheint.

Diese Funktion wird in diesem Entwickler Vortrag erwähnt https://youtu.be/-DX3vJiqxm4?t=1741

Er erwähnt, dass er für jedes Objekt in Array prüft upvotes und downvotes zu überprüfen, ob Listenzeile aktualisiert werden muss, aber ich kann es einfach nicht umsetzen.

Ich habe eine App in Reaktion JS mit vielen Elementen, und ich ändere nur einen zufälligen Artikel. React führt natürlich die gesamte Liste im virtuellen DOM erneut durch und diffundiert die vorherigen und aktuellen virtuellen DOMs der gesamten Liste und es dauert lange.

Aber ich möchte vermeiden, die unveränderten Listenelemente zu rendern. In meiner App - wenn "todo" Eigenschaft nicht geändert wurde, muss das Element nicht aktualisiert werden. Hier ist eine Demo meiner App: https://jsfiddle.net/2Lk1hr6v/29/

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

Ich benutze diese Methode in der Liste Element-Komponente, aber die this.props.todo ist die gleiche wie nextProps.todo so keine Zeilen aktualisiert werden, wenn ich ändern ein zufälliger Gegenstand der ersten fünf Gegenstände.

Answer 1

Das liegt daran, dass Sie die Referenz des Todo-Listenarrays this.props.todos nicht aktualisiert haben.

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

Deshalb ist Unveränderlichkeit wichtig.

Wenn Sie denken, dass dies zu komplex wird. Verwenden Sie Bibliotheken wie immutableJS, die das automatisch für Sie tun.

Bearbeiten: Working Geige Link! https://jsfiddle.net/11z2zzq6/1/