javascript - React - 双花括号与一个大括号之间的区别枚举属性

Question

所以我创建了 fiddle :https://jsfiddle.net/4ex7uh8g/
问题是我不理解该 fiddle 特定代码行的语法差异。
查看 JavaScript 选项卡中的 24 行。这里它使用这样的语法:<div style={{...spanStyle}}>我也尝试使用这样的语法:<div style={spanStyle}>它也可以正常工作，当我检查样式属性时注入(inject)相同，所以对我来说，看起来一切都一样，只是语法不同，但我不太确定，我是否会遗漏某些东西或误解选择一个而不是另一个？
我也读过这个帖子:What do these three dots in React do?
它解释了关于三点运算符的一些事情，我对这个扩展运算符非常熟悉，但在我提供的示例中，我仍然看不到扩展运算符有什么区别，它没有分隔属性和值，它的工作原理与{spanStyle}，所以对我来说 {{...spanStyle}} 和 {spanStyle} 行为相同？
如果您能指出差异(如果有的话)以及何时以及为什么我应该使用一种语法而不是另一种语法，将不胜感激。

Answer 1

当使用一对大括号时，你基本上告诉 JSX 你要嵌入一个 JS 表达式。当您在第一对中有第二对时，您正在创建一个内联对象文字(因为您已经在 J​​S 上下文中)。当您通过 style 指定样式时JSX 中的属性，您必须提供一个对象，因此需要双括号。

{{...spanStyle}}

只需创建一个新的对象字面量并从 spanStyle 获取所有属性使用扩展运算符( ... )，因此您已经注意到，您将得到与简单执行 {spanstyle} 完全相同的结果但有创建对象克隆的开销。