JSX文字

Question

是否存在与对字符串文本使用JSX语法相关的性能问题，如

<div class={"container"}/>

而不是

<div class="container"/>

我理解这两种工作完全相同，而且第一种选择是不必要的，但我只是好奇，是否大规模(大量)地这样做对应用程序的性能有帮助。

Answer 1

没有什么区别--两者都编译成相同的东西。你可以在这里试试：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语法。字符串文字在这两种方式中都是相同的，这意味着没有区别。