React中存在重复代码时，数组map渲染和手动编写标记哪种方式更优？

针对你提到的仅5个结构一致、仅name属性不同的子组件渲染场景，更推荐使用数组map的实现方式，二者的优劣势对比如下：

优先选map的核心原因 #

• 可维护性更高：如果后续需要修改子组件的公共属性、类名、绑定事件，只需要修改map回调里的一处代码即可，不需要挨个修改5个重复的JSX节点，完全避免漏改、错改的问题。
• 代码更简洁：避免冗余的重复代码，渲染用的数据源和视图逻辑分离，结构更清晰，后续如果需要调整渲染项的顺序、增减内容，只需要修改数组即可，不需要调整JSX结构。
• 性能差异可忽略：仅5个节点的场景下，两种写法的渲染性能差可以完全忽略，map带来的开发效率收益远大于几乎感知不到的性能开销。

使用map时注意要给每一项渲染的节点添加唯一的key属性，优先用业务唯一值（比如你这里的name，只要不存在重复就可以用），不要默认用数组下标当key，避免diff阶段出现意料之外的渲染问题。
你给出的示例代码可以修正为更规范的写法：

function SampleComponent(){
  // 字符串要加引号，key要唯一
  const data = ['Hello', 'World'];
  return (
    <div>
      { data.map(x => <ChildComponent key={x} name={x} />) }
    </div>
  )
}

// 子组件要接收props参数
function ChildComponent({ name }){
  return <h1>{name}</h1>
}

什么时候适合手动写全部标记 #

如果你的5个渲染项后续大概率会出现差异化调整（比如某一项要加特殊样式、绑定独有的点击事件、结构和其他项不一致），这种场景下手动写JSX灵活性更高，不需要在map里加大量的判断逻辑，代码可读性更好。

内容的提问来源于stack exchange，提问作者Ashwin Babu