JSX字符串文字

Question

是否存在与对这样的字符串文字使用JSX语法有关的性能问题

id

相对于

<div class={"container"}/>

我知道两者的工作原理完全相同，第一个选项是不必要的，但是我很好奇能否大规模（大量）地提高应用程序的性能。

Answer 1

没有区别-两者都编译成同一件事。您可以在这里尝试：https://babeljs.io/repl#?babili=false&browsers=%3E%202%25%2C%20ie%2011%2C%20safari%20%3E%209&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhjAvDAPAEwJYDcbADZwQSIBEoYUcGYApgE4kwD0AfANwBQ50MARkqkw58hYgG8y4StXokAvs3ZA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react%2Cenv&prettier=false&targets=&version=6.26.0&envVersion=1.6.2

const a = <div class="container" />;
const b = <div class={"container"} />;

成为

"use strict";

var a = React.createElement("div", { "class": "container" });
var b = React.createElement("div", { "class": "container" });

因此，性能没有差异。 "container"字符串周围的大括号只是从jsx语法切换回标准javascript语法。两种情况下，字符串文字的解释都是相同的，这意味着没有区别。