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

Question

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

<label htmlFor={dynamicId}/>

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

<label htmlFor="staticId"/>

但以下情况呢：

<label htmlFor={'staticId'}/>

最后一行是否有（尽管很小）性能开销（内部 React 缓存机制/每次渲染上的新字符串）？最后一行代码是一种不好的做法还是无关紧要？

Answer 1

它们完全等同。你可以使用Babel的playground来尝试一下：

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

转译为

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