Какой лучший способ написания этого кода?

Question

Опция 1:

className={
          data.msg.length > 48
            ? `${classes.message} ${classes.longMessage}`
            : `${classes.message}`
        }

Опция 2:

className={`${classes.message} ${
  data.msg.length > 48 ? classes.longMessage : ""
}`}

Есть ли разница в производительности? Спасибо.

Answer 1

Они практически одинаковы, и выбор одного из них не окажет заметного влияния на производительность вашего приложения. Единственное, что вы захотите рассмотреть в этом случае, - это удобочитаемость, и в этом случае я бы сказал, что первый пример предпочтительнее, но это совершенно субъективно.

Answer 2

Я полностью согласен с удобочитаемостью, о которой @noob упоминал в ответе ранее.

Со стороны данных позвольте мне настроить следующее:

// I assume you are getting this from an API or somewhere else
const data = {
   msg: 'Testing text for stackoverflow'
};

С этой точки зрения мое предложение будетбыть со следующей опцией:

let messageClassName = `${classes.message}`;

if (data.msg.length > 48) {
   messageClassName = `${classes.message} ${classes.longMessage}`;
}

return (
   <div className={messageClassName}>
      {data.msg}
   </div>
)

Большую часть времени помогает удобочитаемость.

Answer 3

Я думаю, что верхняя часть быстрее, вот мои рассуждения:

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

Выражение падежа TRUE: (без разницы)

Обе придется объединять

Выражение падежа FALSE: (Верхний быстрее))

Лучшие из них просто оцените

Сложите один конкатенируйте и оцените

Но сделать это слишком сложно.