可以多次渲染React元素吗？

Question

假设我有一个功能组件渲染5个图标。

这可以这样做：

export default const Icons = () =>
    <div>
        <Icon/>
        <Icon/>
        <Icon/>
        <Icon/>
        <Icon/>
    </div>;

但它也可以这样做：

const icon = <Icon/>;

export default const Icons = () =>
    <div>
        {icon}
        {icon}
        {icon}
        {icon}
        {icon}
    <div/>;

区别在于，在第二种情况下，使用React.createElement只创建一个React元素。

---

不鼓励多次渲染React元素？

如果是这样，为什么呢？如果没有，通过多次渲染React元素是否有任何性能或大小优势？

Answer 1

你的想法是错误的。两者都是一样的。它们之间没有区别。在第二种情况下，你只是分配给组件<Icon />，每次调用{icon}时，实际上都会调用组件<Icon />。

我宁愿选择先使用。因为，我不需要不必要地分配哪个组件调用。

以下是使用第二种情况时会发生的情况：

1. 寻找{icon}
2. 寻找指定的组件<Icon />
3. 渲染<Icon />组件

以下是使用第一种情况时会发生的情况：

1. 寻找<Icon />
2. 渲染<Icon />组件

Answer 2

没关系。您还可以映射一些数据，您可以使用这些数据作为道具传递给组件。

const altTags = ['me', 'dog', 'cat'];
const icon = <Icon/>;    
export default const Icons = () =>
        <div>
           {this.altTags.map(tag => <Icon alt={tag} />)}
        </div>;

Answer 3

没关系，但从架构的角度来看并不是很有效。如果我们遵循SOLID开发的原则，这就打破了一些规则。从可维护性和可重用性的角度来看，这可以得到改进。如果在组件中创建一个属性，指定所需的图标数量，并在render方法中使用循环来迭代并创建图标，则此代码将更好。