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

我的猜测是排名靠前的是更快，这是我的推理：

两者都会有一个三元表达式-您在哪里使用它都不会改变它的速度，但是在表达式之后执行的命令将会使它更快，例如：

case expression TRUE ：（无-差异）

两者都必须串联

案例表达为假：（快上一位）

只需评估一次

一号瓶连接并评估

但是要做到这一点实在太多了。

Answer 3

我完全同意@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>
)

大多数时候，可读性都有帮助。

哪种更好的代码编写方式？

3 个答案: