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

<div class={"container"}/>

В отличие от

<div class="container"/>

Я понимаю, что они работают точно так же, и что первый вариант не нужен, но мне просто любопытно, влияет ли это в большом масштабе (сильно) на производительность приложения.

jsx
0
Siya 31 Окт 2018 в 11:04

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 = & Assessment = false & fileSize = false & timeTravel = false & sourceType = module & lineWrap = true & presets = react% 2Cenv & prettier = false & target = & 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. Строковые литералы интерпретируются одинаково в обоих направлениях, что означает отсутствие разницы.

2
Johannes Reuter 3 Ноя 2018 в 09:04