Wie verwendet man Object.assign, um Zustände in React unveränderlich zu machen?

Question

Ich habe an der Reaktion gearbeitet und ich habe erfahren, dass wir die Zustände nicht direkt mutieren sollten, weil es die Komponente nicht rendern würde. Stattdessen sollten wir die setState-Methode verwenden. Dazu müssen wir das gesamte Objekt in ein anderes kopieren und dann die Elemente ändern, aber es kann sehr teuer werden. Ich habe gehört, dass Object.assign dabei hilft. Auch, was ist die beste Methode dafür?

Answer 1

Ich weiß nicht reagieren, aber wenn Sie eine flache Kopie eines Objekts zu machen brauchen, Object.assign in der Tat nicht lassen Sie, dass:

var theCopy = Object.assign({}, theOriginal); 

Beispiel, das zeigt auch, was ich mit „flachen bedeuten „:

// An original, with three properties; the third refers to an object 
 
var theOriginal = { 
 
    answer: 42, 
 
    question: "Life, the Universe, and Everything", 
 
    obj: { 
 
    foo: "bar" 
 
    } 
 
}; 
 

 
// Make a shallow copy 
 
var theCopy = Object.assign({}, theOriginal); 
 

 
// Note that the object's properties are not linked 
 
log("theOriginal.answer:   " + theOriginal.answer); 
 
log("theCopy.answer:    " + theCopy.answer); 
 
theCopy.answer = 67; 
 
log("updated theCopy.answer:  " + theCopy.answer); 
 

 
// But note that while the `obj` property was copied, both 
 
// copies refer to the *same* object: 
 
log("theOriginal.obj.foo:   " + theOriginal.obj.foo); 
 
log("theCopy.obj.foo:    " + theCopy.obj.foo); 
 
theOriginal.obj.foo = "updated"; 
 
log("updated theOriginal.obj.foo: " + theOriginal.obj.foo); 
 
log("updated theCopy.obj.foo:  " + theCopy.obj.foo); 
 

 

 
function log(msg) { 
 
    var p = document.createElement('pre'); 
 
    p.appendChild(document.createTextNode(msg)); 
 
    document.body.appendChild(p); 
 
}