Lit vs React

Web Component

用Lit， React， 原生Javascript写web component，他们之间的区别

	Javascript	Lit	React	Note
使用
使用方式	<awc-dropdown></awc-dropdown>	<awc-dropdown></awc-dropdown>	<awc-dropdown></awc-dropdown>	都可以按照普通标签的形式使用
修改样式	class, style	class, style	class, style	同普通标签一样，可用class，style修改样式
事件绑定	<awc-dropdown οnchange=“onChange(event)”></awc-dropdown>	<awc-dropdown οnchange=“onChange(event)”></awc-dropdown>	<awc-dropdown οnchange=“onChange(event)”></awc-dropdown>	都支持普通事件如click和自定义事件的绑定
使用难度	简单	简单	简单	都是按照普通标签使用
开发
html, css, js 文件分离	html, css, js文件可分离，需要写额外的函数支持，如FetchHTML函数	不可分离，js, html, css写在同一个文件，引入sass后，可将css从文件分离	css文件可分离，html与js不可分离
开发难度	需要自己写原生js	需要自己配置打包	需要拥有react开发知识
是否需要编译	否， 可直接引入	需要打包，build后才能引入使用	需要打包，转换，build 后才能引入使用
开发难度	只需掌握原生js相关知识	不仅需要js相关知识，还需要build知识	需要jsx，js知识，和打包，编译等知识	这里包括遇到问题搜索文档，和开发所需掌握的知识
浏览器兼容性处理	使用最新浏览器支持的方法函数等	集成webcomponentjs	导入react-web-component，其集成了webcomponentjs
浏览器加载渲染
浏览器直接渲染DOM结果	图browser_js	图browser_lit	图browser_react	在纯html中，他们的属性和事件在浏览器中渲染是一样的
浏览器加载字节数	60.1 kB transferred 58.8 kB resources	261 kB transferred 259 kB resources	13.1 MB transferred 13.1 MB resources	React 体量最大，原生js写component体量最小
浏览器首次加载速度	DOMContentLoaded: 1.22 s Load: 1.28 s	DOMContentLoaded: 3.59s Load: 3.60 s	DOMContentLoaded: 11.73s Load: 11.74s	React加载速度最慢，因为它体量最大，原生js最快
浏览器重新加载速度	DOMContentLoaded: 497 ms Load: 504ms	DOMContentLoaded: 1.63s Load: 1.64s	DOMContentLoaded: 854ms Load: 892ms	当浏览器缓存一定资源后，原生重加载时间最短，Lit 时间最长
开发维护与学习使用
开发时间	1 day	1.5 day	2 day	Lit 社区少，解决问题调研时间长；React 遇到问题社区多，但是问题不好调试
维护成本	1 day	2 day	2 day	包括遇到bug， 搜索资料，解决问题，新增功能，修改样式等
学习曲线	1 day	2 day	3 day	包括遇到bug， 搜索资料，解决问题，新增功能，修改样式等
调试framework 兼容性所需时间	0.5 day	2 day	1 day	Lit 开发的component在其他framework不一定兼容； React目前使用没有遇到问题

图 browser_js

图browser_lit

图browser_react

Project

用react和Lit 分别作dashboard 页面，对比如下

	React	Lit	Note
功能
web component库	@awc	@awc	@awc在react项目中有额外的bug，如icon显示不出来，MDCDrawer:closed 这种类型事件名称不支持
router	react-router	@vaadin/router	React有自己的生态包， Lit 没有
store	react-redux	redux	React有自己的生态包， Lit 没有
http	es6 - Promise	es6 - Promise	React支持axios，Lit 不支持es6 modules，如果想支持，需要自己配置babel
sass	sass-loader	sass	React 和Lit 如果想支持sass，都需要引入第三包才能支持
TypeScript	支持jsx 和 typescript	支持typescript	都支持typescript
开发启动，打包，热更新
启动，打包	React 项目自带功能	需要引入第三方包@rollup 或者配置webpack	自己配置打包，花费了开发大量的时间研究
热更新内容	App目录下的文件，包括css	Lit只支持js文件，不包括后来自己配置的sass	Lit自己配置，花费了开发大量的时间研究
热更新级别	React 只会更新更改的js	修改某处后，Lit 所有文件都重新加载一次	在开发过程中，React更新快，所以更节省开发时间
兼容性	react-app-polyfill	webcomponents/webcomponentsjs	webcomponentsjs不同的版本兼容浏览器版本不同; React 安装不同polyfill控制兼容浏览器版本如react-app-polyfill/ie9
开发
文件分离	默认css和js可分离，es6 import语法	css 分离需要额外的配置	自己配置，花费了开发大量的时间研究
开发难度	React < Lit	React < Lit	React 相关配置与第三方包都有自己的生态，Lit 没有，需要调研哪个第三方包可用，并且与当前package里的包兼容
花费时间	7 day	15 day	由于Lit项目现开发，组件一些逻辑可供用，所以React 时间为大约估计时间
维护成本	3 day	5 day	包括第三方包升级和包之间的兼容性等
学习曲线	2 day	7 day	Lit 需要自己搭建项目，学习第三方包语法，解决包版本之间的兼容性，支持es6等，而且遇到问题可搜索到的有效信息很少；React遇到问题搜索到结果很多，能快速解决，而且React有自己的生态包，包版本之间的兼容性不用我们自己搭配，所以学习简单
浏览器渲染
打包后初次加载时间	DOMContentLoaded: 2.03s， Load:2.46s	DOMContentLoaded: 1.50s， Load:2s	打包部署后， React加载时间 稍微比Lit要慢一些
打包后初次加载JS文件大小	456 kB transferred 452 kB resources	1.2 MB transferred 1.2 MB resources	打包部署后， React 体量要比Lit体量大得多，但是加载速度相差不多
开发过程中初次加载时间	DOMContentLoaded: 347ms， Load:433ms	DOMContentLoaded: 479ms， Load:676ms
开发过程中初次加载js大小	1.2 MB transferred 3.9 MB resources	1.1 MB transferred 1.1 MB resources	React体量大，但是加载所需时间少
重加载时间	2.7KB 2ms	32.5KB DOMContentLoaded: 445 ms Load: 638 ms	React 只会更新更改的js，Lit 所有文件都重新加载一次

图react_package

图Lit_package

Javascript - web component - browser

Lit - web component - browser
React - web component - browser

Lit - application - browser

React - application - browser