是否真的有必要制作和使用新的自定义元素和web组件(HTML标记)？

Question

我目前正在学习前端web开发，以及Vanilla JavaScript、框架和库(例如React)之间的区别。现在我已经熟悉了制作新的自定义HTML标记的web组件。正如我所知，React是为了同样的目的而做的，但是当我访问Instagram网站(我想到的第一个使用React的网站)并查看HTML代码时，我没有发现任何定制的HTML元素，事实上，大多数元素都是由“div”标签组成的。如果像Instagram这样复杂的社交网站不是由定制元素组成的，那么谁会使用它们，为什么呢？

Answer 1

“反应”是一种完全不同的动物，可以追溯到近十年前。它是由Facebook开发的，因为太多的团队在同一个DOM中做了太多的更新。因此，他们提出了一个虚拟 DOM，在写入浏览器 DOM 之前，所有所需的DOM更新都被合并。

对Facebook很有用。新的技术，如自定义元素API和Svelte (编译，不要Transpile)已经证明它不再是最好的解决方案。

过时的技术现在在上的分数只有71%的在https://custom-elements-everywhere.com/上

React和W3C自定义元素不是朋友

因为绿色DOM元素不是由React跟踪的。

如果你想要混合绿色和黄色，你必须重新编写/包装每个组件的反应语法。因为DOM元素不仅会导致不同的，而且DOM事件也会改变。

​

​

未来

这是一个有趣的未来：反应，而W3C标准正在分化。

而W3C标准实际上是由浏览器供应商设定的，

不是W3C，我们从从未实现的ECMAScript 4传奇(1999-2008年)中学到了这一点。

所以它

苹果(Safari) + Mozilla (FireFox) +谷歌/微软(Chredge/Chredge) 对比 Facebook (没有浏览器！)

W3C的“‘problem”是所有成员都必须商定的标准，这就是为什么定制元素API需要多年才能成熟的原因.反应有先发制人

Facebook现在“拥有”60%的开发商市场.

但是嘿，

微软拥有90%的浏览器市场.曾经，

几乎所有的device....once都安装了Flash

自定义元素API 只要ECMAScript在浏览器中运行就会存在

它不是一个框架或库！它是一种语言结构。

不学习自定义元素就像说：

我不是在学习集合或地图，我可以用数组做任何事情

年长的咆哮者：Web组件- Services / non组件

或者相信2020年的前端调查：

​

​

Answer 2

正如您所说，instagram使用的是react，它不对web组件进行传输

react不是唯一不使用web组件的基于库的组件，还有：vue.js、Polymer。

但是其他一些基于lib的组件确实使用web组件作为它们的基础：slim.js、stencil。

所有这些库都可以与how组件一起使用，有些甚至告诉我们如何做：反应、呜呜。

！此部分可视为基于意见！

AFAIK --选择不使用webcomponents的库--是在webcomponents最后确定之前创建的，使用它们重写的成本太大。

！这部分是基于意见的！

大多数人使用lib是因为web组件没有提供相同的轻松双向绑定。

在相反的情况下，webcomponents似乎更多地控制组件何时重新加载以及绑定是如何完成的，但是它需要编码，这是额外的工作。

以https://stackoverflow.com/a/34321926/10153945在每个库的主页上返回的自定义元素列表为基础

Answer 3

在反应上是不一样的。在使用React时，您正在使用JSX。这只是标记语法，它既不是字符串也不是HTML。在此基础上，将此语法转换为通常的JavaScript(使用巴贝尔)。您可以阅读更多关于它的这里。