JSX String Literal

Question

Есть ли проблемы с производительностью, связанные с использованием синтаксиса JSX для строковых литералов, например

<div class={"container"}/>

в отличие от

<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. Строковые литералы интерпретируются одинаково в обоих направлениях, что означает, что разницы нет.