Node.js React：将列表呈现为硬编码与循环的性能

假设我正在构建一个有3个静态链接的导航组件。硬编码链路或在阵列上循环在性能方面是否存在差异？我认为，虽然后者是更干净的代码（更少的重复），但前者在处理方面更便宜

硬编码：

const Nav = () => (
  <ul>
    <li>First link</li>
    <li>Second link</li>
    <li>Third link</li>
  </ul>
)

const Nav=（）=>(

第一环节
第二环节
第三环节

)

循环：

const链接=[
"第一环",，
"第二环",，
“第三环节”
]
常量导航=（）=>(

{
LINKS.map（link=>
{link}
）
}

)

这是一个简单的例子，但我也很好奇更复杂的结构会受到怎样的影响（例如：基于配置文件呈现的完整网站）。

有区别吗

• 是的，硬编码更快。（只是执行已经解析的JSX，而不是动态构造JSX，然后执行）

这种差异明显吗？除非：

您有许多元素（数千？）是从该配置创建的

这是一个经常重新渲染的组件

如果进程中断了某些记忆（例如，使某个已记忆的组件道具每次具有不同的值，而不是相同的值），这将导致更多的子组件重新渲染

---

最好的方法是剖析/测量实际的差异

只是为了清楚起见，JSX在构建时被解析并转换为函数调用。主要区别在于预填充的

子数组和在渲染时构造的数组之间。是的，感谢您的澄清，我指的是JSX，它在浏览器中变成了什么。（编译步骤不影响运行时性能）它在加载时由浏览器JS引擎解析，然后在渲染时不发生任何其他事情，只进行函数调用，而不是先运行循环。
const LINKS = [
  'First link',
  'Second link',
  'Third link'
]

const Nav = () => (
  <ul>
    {
      LINKS.map(link => <li key={link}>{link}</li>)
    }
  </ul>
)