【译文】HTML 网页组件和 React 组件

我认为 “网络组件 “中的 “组件 “一词让很多人感到困惑–至少我是这样认为的。

“网络组件 “听起来就像是网络平台的 “React 组件”。JSX 有 <MyComponent>，而现在网络有 <my-component>。

但是，当你尝试用构建 React 组件的方式来构建 Web 组件时，很容易就会因为 Web 组件不像 React 组件那样工作而感到沮丧和放弃–我知道我放弃过几次。

React 组件的纹理（The grain）与网页组件的纹理不同。它们的设计优先考虑不同的功能和使用形式。如果你试图像使用其他组件一样使用其中一个，你就会违背它们的自然纹理方向。

网络组件有自己的纹理，它更倾向于增强而不是替代。我这样说是什么意思？

一个典型的 React 组件可能是这样的[1]：

<UserAvatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
/>

您也可以用同样的方法编写网络组件，例如

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

但网络组件（在浏览器中）的独特之处在于，它们可以在 JavaScript 之前渲染。而 React 组件却无法做到这一点。

网络组件的这一特性鼓励了可组合性设计。网络组件不是一个空洞的 “外壳组件”，它获取数据并（完全使用 JavaScript）呈现其全部内容，而是鼓励使用 HTML 组成核心内容，然后将其封装在一个自定义元素中，通过附加功能来增强其内容。

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

杰里米将这种特殊的组件化称为 “HTML 网络组件“：

如果您的自定义元素是空的，它就不是 HTML 网页组件。但如果您使用自定义元素来扩展现有标记，这就是 HTML 网页组件。

React 鼓励替换思维：”忘记浏览器能做什么；用 React 组件代替做所有事情，哪怕是重新发明轮子。

HTML 网页组件鼓励的是一种增强思维。

我喜欢 “HTML 网页组件 “这个词。它与 “JavaScript 网页组件 “形成鲜明对比，后者是一个空元素，其功能和内容完全依赖于 JavaScript。

按照我前面的例子，这就是 JavaScript 网页组件：

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

它完全依赖于 JavaScript 的存在，没有 JavaScript 对最终用户来说毫无意义。

而这将是一个 HTML 网页组件：

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

没有 JavaScript，它也有意义和内容，而有了 JavaScript，它的意义和内容更加丰富。

这种 “增强”/”强化 “而非 “替代 “的想法很有意思。

在web上，增强型方法长期有效

增强型方法在网络上最有效，因为：1）网络的纹理鼓励通过增强来提高适应能力；2）这确实是迭代改变像网络这样大的东西的最佳方式。

最终，所有与网络相邻的框架的最佳理念都会融入到平台中，以增强现有技术而非全面取代现有技术的方式发挥作用。

XHTML 想要取代 HTML4，但 HTML5 想要增强 HTML4。HTML5 赢了。

网络库希望取代 XMLHttpRequest，而他们的最佳想法最终被移植到了 fetch 标准中，如今该标准已不仅仅存在于浏览器中！

Sass 和 jQuery 的最佳创意被移植到了浏览器中。

Typescript 的最佳创意也将被移植到浏览器中，但其方式是为了增强而不是取代现有的功能。

对于网页组件，你甚至可以说 React 的组件模型正在被移植到浏览器中。但这种方式是为了增强网络的现有工作方式，而不是取而代之。

我的启示是：如果你想长盛不衰，那就选择增强和强化的技术方法，而不是替代。网络的纹理就是朝着这个方向排列的。

1.我认为 React 这几年的发展趋势是变得更像 HTML。Dan Abramov 指出，”2023 年要学习的顶级 react 技能 “是组件合成而非道具钻孔。甚至 React 文档也特别指出了 HTML 的可组合性，以及您可能希望如何在 JSX 中效仿 HTML。

本文文字及图片出自 HTML Web Components