Performance 在React ES6中，使用只包含一个元素标记的导入组件和一个类有什么好处吗？

在我的应用程序中，我有许多实例：

<div className="node">
    // various types of other elements
</div>

//各种类型的其他元素

---

创建包含此标记的组件并导入和使用它，而不仅仅是将标记本身写入其他组件中，是否有任何好处（例如更好的性能）？

由于额外的

render

调用，我希望将其放入单独组件中的性能会稍差一些。我也希望这种差异不会被注意到。此外，至少在网页包中，还有其他模块

最大的优点是，在将公共代码拉入函数或类时，您可以获得以下优点：

• 您可以为该功能命名，以使代码更具自文档性
• 您可以减少代码中的重复，并引入一个地方来进行将来的更改。现在这是次要的，因为唯一的重复是

  节点

  类名，但您可能会发现将来需要进行更改，然后使用单独的组件可能会有所帮助

---

因为在重复标记中实际上没有做任何与类相关的事情，所以可以只做

const Node = (
    <div className="node" >
        // various other elements
    </div>
 );

const节点=(
//其他各种因素
);

然后在需要的地方使用

。

---

这应该是最有效的。

这也是我的想法，我确实记得看到过关于Webpack和Browserify中开销的链接（或类似链接）。最多，以后，我可能会添加传入其他类的功能，甚至可能是一个ID，但在大多数情况下，它只是

{children}

。我再次提出我的原始问题，因为在许多示例和教程中，我看到诸如

之类的东西没有太多实际的JSX标记，我无法想象这些东西本身包含很多元素。@spunge-再仔细想想，我想我可能会根据我想要的语义做出决定。如果我在做语义HTML，我会发现只做HTML标记更清晰。如果我想添加React行为或使用React来管理样式，我会开始考虑使用组件来代替。同样，我同意你的看法。在我的特定示例中，该元素仅用于它的类，用于同一元素的多个相邻实例之间的间距，例如

.node+.node{padding top:30px；}

。