Javascript React组件与普通HTML：哪一个性能更好？

为每件事创建组件是否有帮助？例如，我使用bootstrap创建了很多布局，如：

零售业景观
查看位置热图

但是，可以选择创建组件并执行以下操作：

零售业景观
查看位置热图

如果我不愿意对这些组件进行任何状态管理，那么创建这样的组件是更明智的做法还是只会膨胀React.js？组件化每件事是否有真正的性能优势？

---

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

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

使用组件的主要原因之一是，我们不必多次写入同一代码，从而易于维护和扩展

假设您的项目中有20个、30个甚至100个组件具有

.col

类，并且在更新后，类名从

.col

更改为

.column

。现在您必须检查每个组件并更新类名。但是当我们使用

Col

组件时，我们可以在一个地方更新代码，并且它将在整个项目中更新。这不仅可以节省时间，还可以消除在某些地方错过更改的风险

至于性能，如果您有性能问题，您首先应该考虑的不是组件或普通HTML的使用。相反，请查看文件大小、不必要的重新加载项、未使用的代码等

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

您的两个示例都使用react（我可以在第一个示例中这样说，因为原始html中的

className

而不是

class

），您可以将状态管理添加到这两个示例中：

{title}
{副标题}

因此，此处是否使用状态/道具不应成为这两种方法之间的决定因素

组件化每一件事情是否有真正的性能优势

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

在给定的两个示例之间，差别很小，在一个示例中，React将创建直接映射到html的React元素，在第二个示例中，将有一个间接级别的组件来呈现这些相同的元素

---

因此，从理论上讲，示例1的速度会稍快一些（操作更少），但实际上可能没有观察到任何变化。

它可能会影响Javascript的执行，但会避免布局混乱（或回流）。但这并不意味着你不应该关心性能。