哪种编写此代码的方法更好？

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

我的猜测是前者更快，这是我的推理：

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

案例表达式 TRUE：（无 - 差异）

两者必须串联

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

前一位刚刚评价

第一个连接并求值

但是这样做太珍贵了

Answer 3

我完全同意 @noob 前面回答中提到的可读性。

从数据方面让我配置以下内容：

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

从这个角度来看，我的建议是采用以下选项：

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

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

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

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

哪种编写此代码的方法更好？

Which is a better way of writing this code?

user-interface

frontend

styles

reactjs

material-ui