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

Question

在我的 React 应用程序中，我将 parent 的状态作为道具传递给 child，如下所示：

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

并且有效。但后来我想为什么我不应该通过 this.state 而不使用扩展语法，我确实喜欢：

<Child parentsState={this.state}  

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

谢谢！

Answer 1

首先，将整个状态作为 prop(s) 传递给组件是一种反模式，这毫无意义。它导致 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，这是一件坏事™。 :-)（第一个可能也意味着，如果 this.state 包含引用对象或数组的属性。）

它们两者可能是你想要避免的东西，至少如果this.state有任何引用对象的属性（在这种情况下第一个不是太糟糕了）。

Answer 3

普通Object和spreading Object的区别可以定义为：-

var obj = {名称：'Whosebug'}

1. var obj1 = {...obj}

   Output will be as

   obj1 = {name : 'Whosebug'}

2. var obj2 = {obj}

   Output will be as

   obj1 = {obj: {name : 'Whosebug'}}