...this.state 和 this.state 之间的区别

Question

在我的反应应用程序中，我将父母的状态作为道具传递给孩子，如下所示：

<Child parentsState={...this.state} />

它有效。但后来我想为什么不应该在没有扩展语法的情况下通过 this.state ，我确实喜欢：

<Child parentsState={this.state}  

它也起作用了。大多数情况下，我使用带有数组的扩展语法，我不知道没有扩展语法的对象和没有它的对象之间有区别吗？

谢谢你！

Answer 1

首先，将整个状态作为 prop(s) 传递给组件是一种反模式，这是毫无价值的。这导致Child依赖于父级的状态结构，并且每次更改父级时也需要更改子级。此外，从 Child 内部也不清楚您收到哪些道具，您将始终必须转到父源代码才能找出

关于你的问题：两种情况都是一样的，除了在第一个例子中你创建一个看起来与状态完全一样的新对象this.state，但它仍然是一个全新的对象，而在第二种情况下你传递状态对象本身

还要注意错误，<Child parentsState={...this.state} />不会编译，但<Child parentsState={{...this.state}} />会