ES6：React 解构不可变状态，有和没有传播答案

【问题标题】：ES6: React destructure immutable state with and without spreadES6：React 解构不可变状态，有和没有传播
【发布时间】：2018-08-18 06:04:47
【问题描述】：

和

之间有区别/优势吗？

const { foo } = this.state

还有一个传播

const { foo } = { ...this.state }

我将通过在最后一行调用 this.setState({foo}) 来更新状态。

我所说的“差异/优势”是指：foo 上是否有任何突变（如 push）只能通过破坏扩展状态（后者）才能正确完成？

【问题讨论】：

存在差异，但除非您提供这样做的理由，否则无法说这是否有利。不同之处在于，在第一个代码块中，您修改了foo，同时也修改了this.state.foo。在第二个块中，您不会因为您将键浅复制到另一个对象。无论如何，你不应该改变状态，所以......
所以后者是有利的，因为我可以安全地执行突变，然后通过this.setState({foo})更新状态
不要那样做。只是不要进行突变

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

如果某些东西在需要 cpu “更少工作”的版本中工作。

第二版：

您正在破坏原始对象
创建一个新对象
然后复制值

您使用原始对象进行复制的第一个版本，因此您只是从第二个版本开始执行第三步

【讨论】：

【解决方案2】：

除了传播创建一个新对象之外，实际上还有一个细微的差别。 Spread 也只复制对象自身的可枚举属性。

考虑：

let proto_state = {foo: "mark"}
let state = Object.create(proto_state)
console.log(state.foo) // inherits it from the proto_state

let {foo} = {...state} // undefined not own prop
console.log(foo);

({foo} = state)  // gets the inherited foo
console.log(foo);

我不知道这是否真的会成为您的代码的问题，但它们并不相同。

【讨论】：

【解决方案3】：

在第二种情况下，您首先克隆状态，然后对其进行解构。它增加了一个不需要的步骤，因为您应该在状态的写入端进行克隆/不可变更新。

【讨论】：