React/JSX attrs w/strings vs 大括号答案

【问题标题】：React/JSX attrs w/strings vs bracesReact/JSX attrs w/strings vs 大括号
【发布时间】：2018-04-26 21:07:12
【问题描述】：

docs 表示带有字符串的 JSX 属性与带有大括号的属性相同...

<Thing attr='val' /> === <Thing attr={'val'} />

我以为我读过一些内容，说只在需要时使用大括号，因为字符串的性能更高，但我现在找不到参考。牙套有评估费用吗？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

不，没有性能差异。查看每种样式生成的代码：

<div first="abc" second={"def"}/>

// Compiles to:
React.createElement("div", { first: "abc", second: "def" });

更好地避免不必要的大括号。

【讨论】：

【解决方案2】：

JSX 实际上是把它解析成一个 JS 对象，所以它要么是解析器的字符串创建开销，要么是组件中的字符串创建开销。无论哪种方式都是微不足道的。但是，对于字符串文字，它在代码中只是视觉上很嘈杂。只有当val 是变量或表达式时，它才真正发挥作用。

但是，模板引擎中的性能会受到影响，例如新的插值字符串所采用的性能。例如：

`It is a ${'cat'}`

会慢于：

`It is a dog`

这应该比单纯的文字要慢：

'It is a dog'

我将把它作为练习留给读者在 JSX 引擎中找到插值部分。 ;) https://github.com/jsx/JSX/tree/master/src

【讨论】：

【解决方案3】：

大括号是否有评估费用

是的，正如您所看到的，{} 中的任何内容都将被视为 javascript 代码，因此将被执行，如果您只想分配字符串然后只需简单地使用attr='val' 而不是attr={'val'}

但是如果你有基于分配条件的，那么你可以使用attr={'val'}

喜欢

attr={ (condition) ? 'val1' : 'val2'}

我希望，这会清除你的想法。

在这里你可以阅读字符串插值和速度性能的幕后花絮：

【讨论】：

谢谢维韦克。你知道有什么参考资料可以支持吗？
@ari，很抱歉没有找到你
“{}里面的任何东西都会被认为是javascript代码”，表示评估，表示性能命中；这也是我的想法。但是在某处是否有提到这一点的文档/参考？或者也许我可以在某个地方对差异进行基准测试。我很欣赏字符串插值参考，但不是我要找的。再次感谢。