使用React JSX，在花括号中放置静态值prop会产生任何开销吗？

Question

我知道我们可以在JSX元素中传递动态变化的道具，如下所示：

<label htmlFor={dynamicId}/>

我们可以像这样传递静态值：

<label htmlFor="staticId"/>

但是以下内容如何：

<label htmlFor={'staticId'}/>

最后一行是否存在（虽然是次要的）性能开销（内部React缓存机制/每个渲染上的新字符串）？最后一行代码是不好的做法还是无所谓？

Answer 1

  

没有。它没有。反应性能非常快。

使用大括号，你告诉React尝试评估它并找到一个字符串。你只是更进一步。

最后，结果将是相同的。

但是，如果它只是一个字符串而不是一个变量，我建议你不要使用大括号。

Answer 2

他们完全相同。您可以使用Babel's playground进行试用：

[
  <label htmlFor="staticId"/>,
  <label htmlFor={'staticId'}/>
]

转化为

[
  React.createElement("label", { htmlFor: "staticId" }),
  React.createElement("label", { htmlFor: "staticId" })
];