React/JSX braces w/string vs大括号

Question

文档说，带有字符串的JSX属性与带大括号的属性相同.

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

我想我读到的东西说，只有在需要的时候才使用大括号，因为字符串更有表现力，但我现在找不到引用。牙套有评估费用吗？

Answer 1

牙套有评估费用吗？

是的，正如您所看到的，{}内部的任何内容都将被视为javascript代码，因此，如果您只想分配字符串，那么只需使用attr='val'而不是attr={'val'}即可执行。

但是，如果基于赋值条件，则可以使用attr={'val'}

喜欢

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

我希望这能澄清你的想法。

欲知更多详情：

https://reactjs.org/docs/jsx-in-depth.html

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

https://koukia.ca/string-interpolation-vs-string-format-string-concat-and-string-builder-performance-benchmarks-c1dad38032a

Answer 2

不，没有表现上的差别。查看由每种样式生成的代码：

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

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

更好的避免不必要的支撑。

Answer 3

JSX实际上是将其解析为JS对象，所以它要么是解析器的字符串创建开销，要么是组件中的字符串创建开销。不管是哪种方式都是微不足道的。但是，对于字符串文字，代码中的文字只是视觉上的噪音。只有当val是变量或表达式时，它才真正起作用。

但是，模板引擎中有一种性能成功，例如新的插值字符串所使用的性能。例如：

`It is a ${'cat'}`

将慢于：

`It is a dog`

这应该比简单的文字慢得多：

'It is a dog'

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