...this.state与this.state的区别

Question

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

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

而且起作用了。但后来我想，为什么我不应该在没有扩展语法的情况下通过this.state，我确实很喜欢：

<Child parentsState={this.state}  

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

谢谢!

Answer 1

首先，将整个状态作为支柱传递给组件是反模式，这是毫无价值的。这会导致Child依赖于父级的状态结构，而且每次您更改父级时，您还需要更改“子”。另外，还不清楚您收到的是哪些道具，您必须一直使用父源代码才能找到答案

关于您的问题:这两种情况都是相同的，除了在第一个示例中，您从与状态完全相似的新对象创建，但它仍然是一个全新的对象，而在第二种情况下，则传递状态对象本身。

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

Answer 2

假设您的第一个是这样的(使用{{和}})：

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

两者的区别

<Child parentsState={this.state} />

在第一种情况下，创建了this.state的浅层副本，并将该副本传递给Child，而在第二种情况下，this.state直接传递给Child。

第二个意思是Child中的代码可以直接修改this.state，这是一个很糟糕的™。-)(第一个可能也意味着，如果this.state包含引用对象或数组的属性。)

它们可能都是您想要避免的，至少如果this.state具有引用对象的任何属性(在这种情况下，第一个属性不是很糟糕)。

Answer 3

普通物体和扩展物体的区别可以定义为：-

var obj = {name：'stackoverflow'}

1. var obj1 = {...obj}

输出将为

obj1 = {name :obj1

1. var obj2 = {obj}

输出将为

obj1 = {obj：{name :obj1