编写此代码的更好方法是什么?

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：(顶部更快(

顶部只是评估

波顿一连接并评估

但这样做太珍贵了。