问题
I have learned and worked with "Lit-element" with some projects. But I have no experiences with working "React" before. Looking into React code it seems more similar to "Lit-Element". It is very helpful if someone can explain the main differences between the "React" and "Lit-element"?
回答1:
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 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-Element
(by Google). Is a library built on top of the W3C Web Components technologies
!!! You do NOT need Lit to develop Web Components !!!
Lit is a tool
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
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.
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
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.
It is your choice what professional Front-End Developer you want to be
来源：https://stackoverflow.com/questions/64304353/main-differences-between-lit-element-react