可以多次渲染一个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方法中创建一个属性，则使用循环来迭代和创建图标，此代码会更好。