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

Question

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

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

，并且有效。但是后来我想为什么不通过语法而不传递语法this.state呢？

<Child parentsState={this.state}  

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

谢谢！

Answer 1

首先，将整个状态作为prop传递给组件是反模式是毫无意义的。这导致Child依赖于父级的状态结构，并且每次更改父级时，您还需要更改子级。另外，从Child里面还不清楚您会收到哪些道具，因此您将始终必须转到父源代码才能找到

关于您的问题：两种情况都相同，除了在第一个示例中，您从this.state创建了一个看起来像状态的 new 对象，但是它仍然是一个全新的对象，而在第二种情况下，您传递状态对象本身

还请注意错误，<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，这是Bad Thing™。 ：-）（如果this.state包含引用对象或数组的属性，则第一个含义也可能如此。）

至少在this.state具有任何引用对象的属性的情况下，它们都是 。（在这种情况下，第一个还不错）。 / p>

Answer 3

正常物体和传播物体之间的差异可以定义为：-

var obj = {name：'stackoverflow'}

1. var obj1 = {... obj}

     

   输出将为

        

       

   obj1 = {name：'stackoverflow'}

     

2. var obj2 = {obj}

     

   输出将为

        

       

   obj1 = {obj：{name：'stackoverflow'}}