反应组件与普通HTML:哪一个有更好的性能？

Question

为每一件事创建组件有帮助吗？例如，我使用引导程序创建布局，如下所示：

<div className="row">
  <div className="col">
    <h1 className="m-0 display-6">Retail Landscape</h1>
    <small className="text-muted">View location heatmaps</small>
  </div>
</div>

但是，有一个选项可以创建组件并执行如下操作：

<Row>
  <Col>
    <Header>Retail Landscape</Header>
    <Para>View location heatmaps</Para>
  </Col>
</Row>

--如果我不愿意对这些组件进行任何状态管理，那么创建这样的组件更明智吗?还是它只是膨胀了React.js？通过组件化每一件事物有任何真正的性能优势吗？

你的见解会有帮助的！谢谢。

Answer 1

如果我不愿意对这些组件进行任何状态管理，那么创建这样的组件更明智还是它只是膨胀了React.js？

这两个示例都在使用react (我可以在第一个例子中说，这是因为原始html中的className而不是class )，您可以在这两个示例中添加状态管理：

<div className="row">
  <div className="col">
    <h1 className="m-0 display-6">{title}</h1>
    <small className="text-muted">{subtitle}</small>
  </div>
</div>

因此，这里的状态/道具的使用不应该成为这两种方法之间的决定性因素。

通过组件化每一件事物有真正的性能优势吗？

你可以试着运行一个基准。react的性能影响大部分是由库的开销、与现有DOM的差异和协调、树的高度、呈现的数量等造成的。

两个给定的示例之间的差别很小，在一种情况下，React将创建直接映射到html的react元素，在第二个示例中，将有一个级别的间接表示这些元素的组件，即还有其他一些细微的差别。

因此，在理论上，示例1将稍微快一些(因为操作较少)，但在实践中可能没有观察到任何变化。

Answer 2

使用组件的主要原因之一是，我们不必多次写入相同的代码，这使得维护和扩展变得容易。

假设在您的项目中有20、30甚至100个带有.col类的组件，并且在更新之后类名从.col更改为.column。现在，您必须遍历每个组件并更新类名。但是，当我们使用Col组件时，我们可以在一个地方更新代码，并且它将在整个项目中被更新。这不仅可以节省时间，而且还可以消除一些地方漏掉这种变化的风险。

就性能而言，如果您有性能问题，首先要注意的不是使用组件或普通HTML。相反，请查看文件大小、不必要的重发程序、未使用的代码等。

Answer 3

我认为，如果您不愿意使用任何状态管理，那么普通的Html标记具有更好的性能，与经过React引擎然后转换为基本HTML的react组件相比性能更好。而HTML标签是最基本和最快速的，质量足以完成他们的工作。