如何使用Object.assign使状态在React中不可变？

Question

I have been working on react and I came to know that we should not directly mutate the states because it would not render the component. Instead we should use setState method. For this, we need to copy the entire object into another and then change the elements, but it can be very expensive. I have heard Object.assign helps doing this, Also what is the best method to do that?

Answer 1

I don't know React, but if you need to make a shallow copy of an object, Object.assign does indeed let you do that:

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

Example, which also demonstrates what I mean by "shallow":

 // 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); }