我应该将反应组件渲染为组件数组吗

Question

我有一个简单的反应组件，直接呈现几个孩子：

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>
);

Answer 1

为什么要渲染为数组？ 我看没有任何好处。 缺点是阅读起来比较混乱，最好在需要引入 JS 之前尽量保持接近 HTML 语法。

Answer 2

我不建议使用这样的数组，因为它会对可读性产生负面影响，而且据我所知，它没有任何好处。

我只看到有人以编程方式生成组件时使用此方法，例如当您在对象数组上使用Array.prototype.map()以创建一个新的组件数组时，其中的道具从对象数组中填充。

Answer 3

您不应该为此使用数组。 如果您可以为内部的任何内容创建更小的组件，则对可红色性更有利

Answer 4

如果您从性能方面考虑，如果考虑到用于生成元素列表的代码，可能会有一些轻微的缺点。

但我认为这不会引起太大的关注，在这种情况下，真正困扰我的是可读性，因为您可以编写相同的代码而无需括号和花括号，从而使该部分成为组件列表，它是只是更难阅读，并且可能会使在同一代码库中工作的其他人感到困惑。

作为替代方案，我可以想到 atm，如果您需要将 JSX 从渲染函数中隐藏，您可以将其提取到组件中。