哪个是编写此代码的更好方法？答案

【问题标题】：Which is a better way of writing this code?哪个是编写此代码的更好方法？
【发布时间】：2020-01-29 19:46:35
【问题描述】：

选项 1：

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

选项 2：

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

也有任何性能差异吗？谢谢。

【问题讨论】：

标签： reactjs user-interface styles frontend material-ui

【解决方案1】：

它们几乎相同，选择其中之一不会明显影响您应用的性能。在这种情况下，您唯一需要考虑的是可读性——在这种情况下，我认为第一个示例更可取，但这完全是主观的。

【讨论】：

【解决方案2】：

我的猜测是顶级的更快，这是我的推理：

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

案例表达式为真：（无差异）

两者都必须连接

案例表达式FALSE：（前一快）

排名第一的只是评估

底部一连接和评估

但是这样做太过分了。

【讨论】：

【解决方案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>
)

大部分时间可读性都有帮助。

【讨论】：