为什么 es6 在对象和 React 组件之间传播行为会发生变化？答案

【问题标题】：Why does es6 spread behaviour change between objects and React components?为什么 es6 在对象和 React 组件之间传播行为会发生变化？
【发布时间】：2020-11-04 18:45:08
【问题描述】：

我试图理解为什么 es6 对象传播行为在对象之间是不同的，以及何时在 React 组件中使用它来传播道具。

以下内容对我来说很有意义：

const a = {
  a:1,
  b:2
}

const c = {...a}

现在变量 c 将具有与变量“a”相同的属性，键值对的格式为 a:1, b:2。

这没有意义：

<Mycomponent {...a} />

将道具变成"a={1} b={2}"。为什么它以这种方式运行，而不是通常的键值对a:1, b:2？

我想了解为什么会这样，以便更好地理解语言。

我看过解释传播在这两种情况下如何工作的教程和文章，但我没有找到答案为什么传播不同？

【问题讨论】：

因为这是两个不同的运算符在不同的对象上工作。两者都是“传播”，但它们不是相同的“传播”。考虑数字上的+ 运算符，然后考虑它对字符串的作用。
这能回答你的问题吗？ What do these three dots in React do?
谢谢@Sulthan 我认为理解它们不是同一类型的传播是我理解这一点的关键，我认为它们是相同的并且应该以相同的方式表现。
@jobe 还要注意 spread 如何作用于数组和函数参数。它仍然在传播一些东西，但每次都以不同的方式传播。
@Sulthan 在那些情况下它并没有让我感到困惑，因为数组是一种不同类型的对象，但在这种情况下，道具对象看起来像我在问题中描述的“a”的常规对象，所以我希望它们也会以同样的方式传播。

标签： reactjs ecmascript-6 spread

【解决方案1】：

将道具变成“a={1} b={2}”。为什么它以这种方式运行，而不是通常的键值对 a:1, b:2？

但它是在做 a:1 和 b:2 的键/值对。以下代码...

<Mycomponent a={1} b={2} />

... 告诉 react 创建一个类似于 { a: 1, b: 2 } 的 props 对象。当你使用扩展语法时，它也告诉 react 创建一个类似于 { a: 1, b: 2} 的 props 对象。

【讨论】：

我不明白你写的最后一部分，你给出的两个例子都是告诉 React 创建一个 props 对象？但是当您使用传播语法时，传播的道具对象如何变成 a={1} 而不是 a:1
道具总是一个对象。创建该对象的熟悉方法是使用 JSX 语法和“a={1} b={2}”。这可能看起来不像一个对象，但确实如此。这段代码告诉反应创建对象{ a: 1, b: 2}。 how is that props object being spread turned into a={1} 因为 "a={1}" 的意思是 "a: 1 的对象"，所以什么都不需要做。它已经是一个对象，而你只是在复制它。
自己尝试一下：在babeljs.io/repl 上，粘贴<Mycomponent a={1} b={2} />，看看它会被转换成什么。你会看到它创建了一个对象{ a: 1, b: 2 }
感谢您的澄清，我认为其他 cmets 之一通过解释它是一种不同类型的点差运算符帮助我理解了它，并且更清楚了。