点燃元素和反应之间的主要区别[关闭]

Question

查看 React 代码似乎更类似于“Lit-Element”代码，两者都可用于创建 Web 组件。如果有人能解释“React”和“Lit-element”之间的主要区别，会很有帮助吗？

Answer 1

框架创建 HTML，Web组件是 HTML

反应

（现在已经快十年了，由 Facebook 提供），关键特性是它的 虚拟 DOM。这意味着所有 DOM 元素都是在内存中创建的，而 React 负责将它们传递到（真实的）DOM。这也意味着您可以不自己进行任何 DOM 更新，或使用 W3C 标准事件系统。
中的一切（真实） DOM 由 React 处理。
当您必须防止成千上万的开发人员在同一个 DOM 中乱搞时，这真是太好了。 （没有慢 DOM，只有开发人员编写访问 DOM 的慢代码）

2022 年更新 React R18 仍然没有提及自定义元素/原生 Web 组件

W3C 网络组件

（来自：苹果、Mozilla、谷歌、微软）

由 3 种不同的技术组成：

• 自定义元素 API
• 模板：<template>
• shadowDOM

每个都可以单独使用！

您可以在常规 <div> 上附加 shadowDOM 以在类固醇上创建 DIV，而无需使用自定义元素或模板。

W3C Web Components 标准事实上由浏览器制造商 Apple、Google、Mozilla 和 Microsoft 开发。

所有人都必须同意，这会导致制定标准进展缓慢；但是曾经是一个标准，只要 JavaScript 可以在浏览器中运行，W3C 标准就会受到支持。

Web 组件历史记录：https://dev.to/this-is-learning/web-components-101-history-2p24

Microsoft 选择交换浏览器引擎并让 Edge（2020 年 1 月）在 Chromium 上运行，
现在所有现代浏览器都支持 Web 组件。

Chrome、Safari 和 FireFox 支持的 Web 组件（版本 V1）自 2018 年起。
一些浏览器（部分）支持现在已弃用的 V0 版本的时间更长。
所以在 Web Components 方面有丰富的经验。

自定义元素 API 是一个 API，仅此而已，仅此而已，（但功能强大）
将其与框架进行比较就像将 Set 和 Map 与 Redux 或 Vuex 进行比较。

模板很棒，但许多开发人员复制/粘贴博客示例，使用 javascript 代码创建 <template>，而不是在 HTML 中定义它们

shadowDOM（以及 SLOT 和 :parts）值得拥有自己的长篇章节，
许多开发人员不了解它是什么或如何使用它，但大多数人对此持坚定的看法。

点亮

（由谷歌提供）。是一个基于 W3C Web 组件技术构建于之上的库

在版本 2 之前称为 Lit-Element 和 Lit-HTML。
在 Lit 之前，Google 也有 Polymer

！！！你不需要 Lit 来开发 Web 组件！！！

Lit 是一个工具，它将加快开发过程。
当您首先学习 Lit 时，您学习的是一种工具，而不是 Web 组件技术

Lit 是 语法糖（有点像 jQuery）

（就像早期的 jQuery 时代一样）有 50 多种 Lit 替代品：

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

React 的未来？

有趣的部分是 React，由于它的 虚拟 DOM 实现，只支持 71% 的 W3C 自定义元素 API（参见 https://custom-elements-everywhere.com/）。
您需要为您要使用的每个 W3C 组件创建一个React 包装器。 （见：https://reactjs.org/docs/web-components.html）

React17 update（2020 年 10 月）甚至没有提到 Web 组件、自定义元素、shadowDOM 或模板这些词

[2021 年更新] 我不再阅读 React 更新。但 Benny Powers 做到了：https://dev.to/bennypowers/what-s-not-new-in-react-18-45c7

WHATWG

非常有趣的事实是 Facebook 没有浏览器，也不是 WHATWG 的核心成员。 自 2019 年起，WHATWG（阅读：Google、Apple、Microsoft、Mozilla）控制着浏览器中运行的内容：https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html

框架

所有其他框架（Angular、Vue、Svelte 等）确实100% 支持 W3C 标准并且可以创建 Web 组件

这创造了一个有趣的未来。

• Facebook 没有开发浏览器，几乎不参与浏览器的运行。

• WHATWG 是仅受邀请的； Google、Apple、Microsoft 和 Mozilla 会邀请 Facebook吗？

• 有人说 React 是新的 Flash (End Of Life: December 31, 2020)

• 有人说 FaceBook 将合并 Whatsapp、insTagram 和 Facebook，
  然后将提供一个新的浏览器每个人在世界上必须安装

关于框架和库

免责声明：我自己制造了摩托车

框架和库就像您在超市购买的罐头和包装原料。

当然，您可以在餐桌上用餐。
但是去买杂货，品尝香料，学习如何切、烘烤和烤，
你将成为一名厨师。

库/框架的一个问题是：当引入新功能时，新版本中总会有重大更改。或者当特性不再需要时，因为它们现在是本机的一部分，因此更快的标准（但语法不同）想想 jQuery 选择器和（后来实现的）.querySelector

绝不是一键升级。而且因为您很可能没有为所有这些新功能编写 TDD 测试，您必须再次检查和测试您的所有代码

或者更糟，比如 Angular 1 到 Angular 2 “升级”；您必须重写所有内容...

您可以选择专业您想成为什么样的前端开发人员