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

Posted 2023-02-22

【中文标题】...this.state 和 this.state 之间的区别

【英文标题】：difference between ...this.state and this.state

【发布时间】：2020-02-22 15:12:21

【问题描述】：

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

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

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

<Child parentsState=this.state  

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

谢谢！

【问题讨论】：

你确定第一个是<Child parentsState=...this.state /> 而不是<Child parentsState= ...this.state />

^^ -- 否则无效。

哇，我有 ...this.state 并且它有效：/ 我不知道如何

没关系你是对的

【参考方案1】：

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

var obj = name: '***'

var obj1 = ...obj

输出将是

obj1 = name : '***'

var obj2 = obj

输出将是

obj1 = obj: name : '***'

【讨论】：

另请注意，parentState=blah 中的外部 是 JSX 表达式分隔符，而不是 javascript。 <Child parentState=obj/> 确实不创建一个对象并给它一个obj 属性。

【参考方案2】：

假设您的第一个是这样的（带有 和）：

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

和的区别

<Child parentsState=this.state />

是在第一个中，创建了this.state 的浅拷贝，并将该副本传递给Child，但在第二个中，this.state 被传递给Child直接。

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

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

【参考方案3】：

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

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

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

【讨论】：

我的子组件是一个表单，该表单中的数据正在影响父组件中的另一个组件，因此我需要子组件依赖于父组件的状态结构

您的孩子很可能不需要整个父母的状态。仅传递必要的道具，或者，声明父状态，如 this.state = form: ... , unrelatedKey: '...', anotherUnrelatedKey: '...' 并仅将 form 传递给孩子，例如<Child form=this.state.form />

我可以在渲染和排除属性中声明变量，但是当我可以创建一个对象的副本并传递它时，为什么我应该只为两个属性这样做

使用嵌套状态并不是一个坏习惯。在你的情况下，这也是不可避免的。您不想将表单键与与表单无关的其他键混合。关于你的第二个问题 - 想象你的 Child 组件变大了，你想重用它另一个父母。通过仅查看 Child 组件，您无法判断它需要哪些道具。只有一个 - parentState，但它应该有什么键？要找出这一点，您需要阅读整个 Child 实现（至少）

我确实使用了嵌套状态，因为更新它对我来说变成了噩梦，我对 *** 进行了一些研究，每个人都建议不要在状态中使用嵌套对象检查这个：***.com/questions/43040721/…子组件我只将表单键作为变量而不是其他键，所以无论如何我也想检查子组件的内容，因为我不使用相同的键作为状态中的属性，而且这是唯一的子组件，它没有被重用，甚至如果是的话，我可以得到整个