lit-element & 之间的主要区别反应 [英] Main differences between lit-element & React
问题描述
查看 React 代码，它似乎更类似于Lit-Element"；代码，两者都可用于创建 Web 组件.如果有人可以解释React"和React"之间的主要区别，这将非常有帮助.和点亮元素"?
React
(现在已近十年，由 Facebook 推出)，关键特性是它的虚拟 DOM.这意味着所有 DOM 元素都在内存中创建，React 负责将它们传送到(真实的)DOM.这也意味着您可以不自己进行任何 DOM 更新，或使用 W3C 标准事件系统.
(真实)DOM 中的所有内容都由 React 处理.
当像 Facebook 一样，你必须防止成千上万的开发人员在同一个 DOM 中乱搞时，这很好.(没有慢 DOM，只有开发者编写访问 DOM 的慢代码)
W3C 网络组件
(作者:Apple、Mozilla、Google、Microsoft)
由 3 种不同的技术组成:
- 自定义元素 API
- 模板:
- shadowDOM
每个都可以单独使用！
您可以在常规
W3C Web Components 标准是事实上由浏览器构建者 Apple、Google、Mozilla 和微软.
所有人都必须同意，这导致制定标准的进展缓慢；但是一旦成为标准，只要 JavaScript 可以在浏览器中运行，W3C 标准就会得到支持.
微软选择交换浏览器引擎并使 Edge(2020 年 1 月)在 Chromium 上运行，
现在所有现代浏览器都支持 Web 组件.
Chrome、Safari 和FireFox 支持 Web 组件(版本 V1)自 2018 年.
并且一些浏览器(部分)更长时间地支持现已弃用的 V0 版本.
所以在 Web 组件方面有很多经验.
自定义元素 API 是一种 API，仅此而已(但功能强大)
将其与框架进行比较就像将 Set 和 Map 与 Redux 或 Vuex 进行比较.
模板很棒，但许多开发人员复制/粘贴博客示例，使用 javascript 代码创建 <template> 而不是在 HTML 中定义它们
shadowDOM(以及 SLOT 和 :parts)应该有自己的长篇章，
许多开发人员不了解它是什么或如何使用它，但大多数人对它有坚定的看法.
点亮
(由 Google 提供).是一个建立在 W3C Web 组件技术之上的库
称为Lit-Element &版本 2 之前的 Lit-HTML.
在 Lit 之前，Google 也有Polymer
<强>！！！你不需要 Lit 来开发 Web 组件！！！
Lit 是一个工具，它将加快开发过程.
当您第一次学习 Lit 时，您学习的是一种工具，而不是 Web 组件技术
Lit 是语法糖(有点像 jQuery)
(就像早期的 jQuery 时代一样)有很多选择:
- https://github.com/WebReflection/hyperHTML
- https://github.com/hybridsjs/hybrids
- https://github.com/ionic-team/stencil
- https://github.com/Polight/lego
- 还有更多
React 的未来?
有趣的部分是 React，由于其虚拟 DOM 实现，仅支持 71% 的 W3C 自定义元素 API(请参阅https://custom-elements-everywhere.com/).
您需要为每个要使用的 W3C 组件创建一个 React 包装器.
React17 更新(2020 年 10 月)没有甚至提到 Web 组件、自定义元素、shadowDOM 或模板这些词
WHATWG
非常有趣的事实是 Facebook 没有浏览器，也不是 WHATWG 的核心成员.自 2019 年起，WHATWG(阅读:Google、Apple、Microsoft、Mozilla)控制着浏览器中运行的内容:https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html
框架
所有其他框架(Angular、Vue、Svelte 等)确实支持 W3C 标准 100% 并且可以创建 网络组件
这是一个有趣的未来.
Facebook 不开发浏览器，几乎与浏览器运行的内容无关.
WHATWG 仅限邀请；谷歌、苹果、微软和 Mozilla 会邀请 Facebook吗?
有人说 React 是新的 Flash (生命终结:2020 年 12 月 31 日)
有人说FaceBook将合并Whatsapp、insTagram和Facebook，
然后将提供一个新的浏览器每个人必须安装
关于框架和库
<块引用>免责声明:我制造了自己的摩托车
框架和库就像你在超市买的罐头和包装原料.
当然，你在桌子上吃饭.
但是去买杂货，品尝香料，学习如何切割、烘烤和烧烤，
你将成为一名厨师.
库/框架的一个问题是:当引入新功能时，新版本中总会有重大更改.或者当特性不再需要时，因为它们现在是本机的一部分，因此更快的标准(但语法不同)想想 jQuery 选择器和(后来实现的).querySelector
从来都不是一键升级.而且因为您很可能没有为所有这些新功能编写 TDD 测试，您必须再次检查和测试您的所有代码
或者更糟，就像 Angular 1 到 Angular 2 的升级"；你必须重写一切......
您可以选择专业前端开发人员
Looking into React code it seems more similar to "Lit-Element" code, Both can be used to create web components. It is very helpful if someone can explain the main differences between the "React" and "Lit-element"?
React
(almost a decade old now, by Facebook), key feature is its virtual DOM. That means all DOM elements are created in memory and React is in charge of delivering them to the (real)DOM. That also means you can NOT do any DOM updates yourself, or use the W3C standard Events system.
everything in the (real)DOM is handled by React.
Great when, like Facebook, you have to prevent thousands of developers messing around in the same DOM. (There is no slow DOM, only developers writing slow code accessing the DOM)
W3C Web Components
(by: Apple, Mozilla, Google, Microsoft)
Are made up of 3 distinct technologies:
- Custom Elements API
- Templates:
<template> - shadowDOM
each can be used without the other!
You can attach shadowDOM on a regular <div> to create a DIV on steroids, without using Custom Elements or Templates.
The W3C Web Components standard is defacto developed by Browser builders Apple, Google, Mozilla & Microsoft.
All of them having to agree, makes for slow progress in setting a standard; but once a standard, W3C standards are supported for as long as JavaScript will run in the browser.
Microsoft chose to swap Browser-engines and made Edge (january 2020) run on Chromium,
Web Components are supported in all modern Browsers now.
Chrome, Safari & FireFox supported Web Components (version V1) since 2018.
And some browsers (partially) supported the now deprecated V0 version for longer.
So there is plenty of experience with Web Components.
The Custom Elements API is an API, nothing more, nothing less, (but a powerful one)
Comparing it to a Framework is like comparing Set and Map to Redux or Vuex.
Templates are great, yet many developers copy/paste blog examples creating a <template> with javascript code instead of defining them in HTML
shadowDOM (and SLOTs and :parts) deserve its own long chapter,
many developers do not understand what it is or how to use it, yet most have a firm opinion on it.
Lit
(by Google). Is a library built on top of the W3C Web Components technologies
called Lit-Element & Lit-HTML prior to version 2.
Before Lit, Google also had Polymer
!!! You do NOT need Lit to develop Web Components !!!
Lit is a tool It will speed up the development process.
When you learn Lit first, you are learning a tool not the Web Components technology
Lit is syntactic sugar (kinda like jQuery was)
(Just like in early jQuery days) There are many alternatives:
- https://github.com/WebReflection/hyperHTML
- https://github.com/hybridsjs/hybrids
- https://github.com/ionic-team/stencil
- https://github.com/Polight/lego
- and more
A Future for React?
The interesting part is React, due to its virtual DOM implementation, only supports the W3C Custom Elements API for 71% (see https://custom-elements-everywhere.com/).
You need to create a React wrapper for each and every W3C component you want to use.
The React17 update (october 2020) doesn't even mention the words Web Components, Custom Elements, shadowDOM or Templates
WHATWG
The very interesting truth is Facebook has no Browser, and isn't a core member of the WHATWG. And since 2019, the WHATWG (read: Google, Apple, Microsoft , Mozilla) are in control of what runs in the Browser: https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html
Frameworks
All other Frameworks (Angular, Vue, Svelte etc.) do support the W3C standard 100% and can create Web Components
This makes for an interesting future.
Facebook, not developing a Browser, hardly has a stake in what Browsers run.
The WHATWG is by-invitation-only; will Google, Apple, Microsoft and Mozilla invite Facebook?
Some say React is the new Flash (End Of Life: December 31, 2020)
Some say FaceBook will merge Whatsapp, insTagram and Facebook,
then will provide a new Browser everyone in the world must install
On Frameworks and Libraries
Disclaimer: I built my own motorbikes
Frameworks and libraries are like the canned and packed ingredients you buy in the supermarket.
Sure, you get a meal on the table.
But go buy groceries, taste spices, learn how to cut, bake and grill,
and you will become a Chef.
One problem with Libraries/Frameworks is: there will always be breaking changes in new versions when new features are introduced. OR when features are no longer required because they are now part of the native and thus faster standard (but a different syntax) Think jQuery selectors and the (later implemented) .querySelector
It is never a one-click upgrade. And because you most-likely did not write TDD tests for all these new features, you have to check and test ALL your code again
Or worse, like with the Angular 1 to Angular 2 "upgrade"; you have to rewrite everything...
It is your choice what professional Front-End Developer you want to be
这篇关于lit-element & 之间的主要区别反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
