React组件两种渲染方式：直接子元素与组件数组的优劣对比

原始写法（直接渲染子元素） #

return (
  <header>
    <img src={logo}/>
    <h1>My Site</h1>
    <nav>...</nav>
  </header>
);

数组形式渲染写法 #

return (
  <header>
    {[
      <img key="1" src={logo}/>,
      <h1  key="2">My Site</h1>,
      <nav key="3">...</nav>
    ]}
  </header>
);

数组形式渲染的优点 #

• 动态控制更灵活：如果需要根据条件增删子元素，用数组配合filter、map这类方法比写一堆条件判断包裹JSX要方便得多，逻辑更清晰。
• 便于复用组合：可以把这组元素抽成单独变量，甚至放到工具函数里复用，还能和其他元素数组拼接，比平铺JSX的复用性更强。
• 批量处理更高效：如果子元素需要统一加属性、做相同处理，数组可以通过map批量操作，不用逐个修改每个JSX标签。

数组形式渲染的缺点 #

• 多了冗余的key：必须给每个元素加唯一key，静态场景下这纯属额外代码；要是动态生成数组，选不好key（比如用索引）还会引发重渲染的性能问题。
• 可读性降低：静态元素用数组嵌套写，比直接平铺JSX多了一层语法包裹，看起来更绕，元素越多越不如原始写法直观。
• 调试稍显麻烦：在React DevTools里，数组渲染的元素会被归在数组节点下，排查问题时需要多展开一层，结构不如直接渲染的清晰。

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