反应，内联或const

Question

我有一个React应用，列表中有很多项目。

我只是想知道这两种方法是否存在性能差异：

-1-具有const className的列表：

{items.map(item => {
    const trClassname = item.type === 1 ? "red" : "green";
    return (
        <tr className={trClassname}>{item.name + " - " + item.type}</tr>
    );
})}

-2-具有内联className的列表：

{items.map(item => {
    return (
    <tr className={item.type === 1 ? "red" : "green"}>
        {item.name + " - " + item.type}
    </tr>
    );
})}

您可以在此处复制：https://codesandbox.io/s/mjl43x38j9

Answer 1

按原样编写，应该表现完全相同，如果我们谈论渲染性能，是因为对每个元素重复相同的操作（情况1和2）相同的次数。