С React JSX, накладывает ли статическая величина пропеллер в фигурные скобки какие-либо накладные расходы?

Question

Я знаю, что мы можем передавать динамически изменяющиеся реквизиты в элемент JSX, например, так:

<label htmlFor={dynamicId}/>

И мы можем передавать статические значения следующим образом:

<label htmlFor="staticId"/>

Но как насчет следующего:

<label htmlFor={'staticId'}/>

Есть ли (хотя и незначительные) издержки производительности в последней строке (внутренний механизм кэширования React / новая строка при каждом рендеринге)?Последняя строка кода плохая практика или это просто не имеет значения?

Answer 1

Они точно эквивалентны.Вы можете использовать игровую площадку Бабеля , чтобы испытать ее:

[
  <label htmlFor="staticId"/>,
  <label htmlFor={'staticId'}/>
]

превращается в

[
  React.createElement("label", { htmlFor: "staticId" }),
  React.createElement("label", { htmlFor: "staticId" })
];

Answer 2

Нет.Это не так.Производительность React очень быстрая.

Используя фигурные скобки, вы советуете React попытаться оценить его и найти строку.Вы просто делаете шаг дольше.

В конце результат будет таким же.

Хотя я бы порекомендовал вам использовать без фигурной скобки, если это просто строка ине переменная.