Web Components 与 React这不是 Web Components 与 React 的问题

你经常听到工程师们将 Web Components 与 React 进行比较。以下是我的看法。

Web 组件是有规范的。你的 Web 框架则不是。

使用 Web Components 无需 JavaScript 框架，这是一个巨大的优势。Web Components 规范中自定义元素 v1、模板、插槽和 ShadowDOM 的部分均可在浏览器中运行。这意味着无需任何依赖项即可开始编写 Web Components 代码！

您不需要大量的 JavaScript 来渲染 UI。Web 组件在加载大量依赖项会阻碍用户交互的情况下非常有用，例如在移动设备的情况下。但它的作用远不止于此。事实证明，Web 组件的静态站点生成只需要极少量的工具。HTML 模块将使处理模板部分的人体工程学更加出色。今年，Chrome 团队宣布HTML 模块规范即将推出！虽然您可能需要一个 JavaScript 框架来构建复杂的 Web 应用程序，但静态站点仅使用规范即可完美构建。考虑到 Web 中有多少内容是静态的，这是一个巨大的进步。对不起，React 和 Gatsby。

Web 组件是包容性的。

JavaScript 生态系统非常碎片化。Web 组件为所有人提供了一个使用同一种语言的机会。React 的支持者很快指出，“没有一个单一的‘Web 组件社区’，但事实是，社区是我们所有人的共同体。JavaScript 框架是排他性的。你必须成为其中的一员。但自定义元素 v1 并非如此。初学者可以开始编写它们，而无需费力学习 JavaScript 库。

Web 组件解决了不同的问题。

React 解决了 UI 开发中状态缺失的问题。自定义元素是无状态的。你需要为自定义元素引入状态机。JavaScript 框架永远有发展空间。Web Components 提供了一个机会来简化这种近几年流行的组件范式，以便每个人都可以使用相同的 UI 组件。Web Components 本质上解决了在扩展我们日常使用的基础元素时出现的人体工程学问题。React文档中甚至也提到了这一点。React和 Web Components 解决的是不同的问题。

Web 组件是可互操作的。但你的 JavaScript 框架很可能不支持。

在框架中使用自定义元素不仅是可能的，而且应该被视为 2020 年的最佳实践。Javascript 框架应该能够处理自定义元素，就像它们必须处理 DOM 一样。让 Web 组件与 JavaScript 框架协同工作有很多怪癖。React 存在一些问题，但是 React 团队表示他们会考虑与规范紧密集成。Angular 不支持部分自定义内置元素的规范。Angular 提供了对自主自定义元素的支持，甚至使用 Angular Elements 将其编译为它们。Vue 与自定义元素具有相当的互操作性，但是使用 Vue 编码的人如果遇到问题，请在这里留言。有一些解决方法可以解决集成 Web 组件时出现的问题，但是 JavaScript 框架还需要做一些工作才能确保完整的自定义元素 v1 规范正常工作。

Web 组件是 a11y。

自定义内置元素允许您扩展原生元素（例如按钮、输入框和选择框）并实现您自己的功能。通过扩展具有无障碍特性的元素，您可以免费获得这些功能。通常，在使用 JavaScript 框架构建 UI 组件时，您必须复制无障碍特性。

教育和网络工程存在问题。

在过去十年中，一些流行的代码学院常常忽略了规范的阐述，直接跳到 JavaScript 框架上。即使是入门级课程，也可能包含 React 的介绍。对于那些只想让我们“使用平台”的 JavaScript 框架来说，这很有利，但却留下了一个空白：初级工程师缺乏对 HTML、CSS 和 JavaScript 这些我们常用的平台的了解。Web Components 通过提供人人皆可学习和使用的规范，解决了这个问题。

我们就不能和睦相处吗？

即使对于初学者来说，学习 HTML 规范也很容易。但让所有浏览器和库都同意并支持规范却很难。HTML 是一个动态文档，并且会随着时间的推移不断变化。苹果拒绝在 Safari 中实现自定义内置元素规范。自从微软在 Edge 浏览器中迁移到 Chromium 以来，所有最流行的常青浏览器都已实现了自定义元素 v1。我们只需要更好地协作，Web 组件就能为 2020 年代 UI 组件的实现提供一个可持续的范例。

这并不意味着您现在就不能开始使用 Web Components。即使浏览器不支持该规范，也存在相应的 Polyfill 。

我们应该携手合作，确保 Web 组件融入开发流程。从前端 Web 开发入门到最复杂的 Web 应用程序，Web 组件都有潜力简化 UI 组件开发，提供开箱即用的无障碍功能，甚至减少构建 UI 所需的代码量。现在是时候释放这种潜力了，而不是争论哪个 JS 框架更擅长提供组件范式。JavaScript 框架将继续擅长于它们最擅长的领域：状态管理、提供架构模式和便捷的工具。Web 组件将继续存在。我们可以携手合作，让 Web 变得更美好。