reactjs - lit-element 和 React 之间的主要区别

Question

关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

11 个月前关闭。




Improve this question




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

Answer 1

react
(现在已经快十年了，由 Facebook 提供)，主要功能是它的 虚拟 DOM。这意味着所有 DOM 元素都在内存中创建，React 负责将它们传递给(真实的) DOM .这也意味着您可以 不是 做 任何 DOM 自行更新，或使用 W3C 标准事件系统。
中的一切(真实) DOM 由 React 处理。
当像 Facebook 一样，你必须防止成千上万的开发人员在同一个 DOM 中乱搞时，这很好。 (没有慢 DOM，只有开发人员编写访问 DOM 的慢代码)
W3C 网页组件
(作者:苹果、Mozilla、谷歌、微软)
由 3 种不同的技术组成:

自定义元素 API

模板:<template>

shadowDOM

每个都可以在没有另一个的情况下使用!
您可以在常规 <div> 上附加 shadowDOM在类固醇上创建 DIV，而不使用自定义元素或模板。
W3C Web Components 标准实际上是由浏览器构建者 Apple、Google、Mozilla 和 Microsoft 开发的。
他们所有人都必须同意，这导致制定标准的进展缓慢；但是 一次 一个标准，只要 JavaScript 将在浏览器中运行，就支持 W3C 标准。
微软选择交换浏览器引擎并使 Edge(2020 年 1 月)在 Chromium 上运行，
支持 Web 组件现在所有现代浏览器 .
Chrome、Safari 和 FireFox 支持的 Web 组件(版本 V1) 自 2018 年起 .
并且一些浏览器(部分)更长时间地支持现已弃用的 V0 版本。
所以在 Web Components 方面有很多经验。
自定义元素 API 是 API ，不多也不少，(但是一个强大的)
将其与框架进行比较就像将 Set 和 Map 与 Redux 或 Vuex 进行比较。
模板很棒，但许多开发人员复制/粘贴博客示例创建 <template>使用 javascript 代码而不是在 HTML 中定义它们
shadowDOM (以及 SLOT 和 :parts)应该有自己的长篇章，
许多开发人员不了解它是什么或如何使用它，但大多数人对它有坚定的看法。
点亮
(由谷歌)。是图书馆建的 顶部 W3C Web Components 技术
在版本 2 之前称为 Lit-Element & Lit-HTML。
之前 Lit，Google 也有 Polymer
!!!你不需要 Lit 来开发 Web 组件!!!
点亮的是 工具它将加快开发过程。
当您第一次学习 Lit 时，您正在学习 工具不是 Web 组件 技术
点亮是 语法糖 (有点像 jQuery)
(就像早期的 jQuery 时代一样)有很多选择:

https://github.com/WebReflection/hyperHTML

https://github.com/hybridsjs/hybrids

https://github.com/ionic-team/stencil

https://github.com/Polight/lego

更多

React 的 future ？
有趣的部分是 React，因为它的 虚拟 DOM 实现，仅支持 W3C 自定义元素 API 71% (见 https://custom-elements-everywhere.com/)。
您需要创建一个 React 包装器 每一个您要使用的 W3C 组件。
React17 update (2020 年 10 月)甚至没有提到 Web 组件、自定义元素、shadowDOM 或模板这些词
什么工作组
非常有趣的事实是 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 组件
这创造了一个有趣的 future 。

Facebook 不开发浏览器，几乎与浏览器运行的内容无关。

WHATWG 仅接受邀请；谷歌、苹果、微软和 Mozilla 邀请 Facebook？

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

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

关于框架和库

Disclaimer: I built my own motorbikes

框架和库就像您在超市购买的 jar 头和包装原料。
当然，你在 table 上吃饭。
但是去买杂货，品尝香料，学习如何切割、烘烤和烧烤，
你将成为一名厨师。
库/框架的一个问题是:总会有 重大变化 在新版本中引入新功能时。或者当不再需要功能时，因为它们现在是 native 的一部分，因此更快的标准(但语法不同)想想 jQuery 选择器和(后来实现的) .querySelector它从来都不是一键式升级。因为您很可能没有为所有这些新功能编写 TDD 测试， 您必须再次检查和测试所有代码
或者更糟，就像 Angular 1 到 Angular 2 的“升级”一样；你必须重写一切......
你想成为什么样的专业前端开发人员是你的选择