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
Lit vs React相关推荐
- 基于Vite+React构建在线Excel
Vite是随着Vue3一起发布的一款新型前端构建工具,能够显著的提升前端开发体验,它主要由两部分组成: (1)一个开发服务器,它基于**原生ES模块提供了丰富的内建功能,如速度快到惊人的 模块热更新( ...
- Web组件构建库-Lit
大厂技术 坚持周更 精选好文 认识Lit 抽象与封装 在<你真的了解Web Component吗[1]>的分享中,我们在介绍web组件前,从理解框架和职责范围的出发点与角度,探究了框架 ...
- React VR 快速入门完全教程
React VR 快速入门 什么是React React是一个开放源代码的JavaScript库,为HTML呈现的数据提供了视图渲染.React视图通常使用指定的像HTML标签一样的组件来进行UI渲染 ...
- 用vite命令搭个react移动端项目，实现canvas碰撞效果（按需导入antd-mobile，pxtorem适配）
前言 最近看见大家都在卷react源码,突然就心慌了.但是自己的操作水平还有待提高,现在看源码也需要循序渐进的,打算还是从写代码慢慢理解功能再去看源码.所以就尝试使用vite这个构建工具进行尝试构建一 ...
- react非常适合入门者学习使用的后台管理框架
项目简介 该项目提供一个非常简洁的后台管理ui界面,非常适合初学者学习使用.项目结构: 项目地址:GitHub项目地址 技术栈 - react - antd - react-router-dom - ...
- 在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'
- 在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法 首先引入 import { useHistory } from ' ...
- 在react hook里使用mobx(配置mobx依赖)
在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的) npm i mobx mobx-react --save save是下载到"de ...
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
最新文章
- EasyMock 使用方法与原理剖析--转载
- 比特币早期投资家：没有人能够阻止其发展 TechWeb 09-27 09:10 凤凰科技讯 据CNBC网站北京时间9月27日报道，风险投资家、“Social+Capital”基金创始人Chamath
- 访问图像中每个像素的值
- anaconda3下opencv安装
- 接口自动化实现图片上传（selenium/RF）
- reactjs antd（ant-design）安装、基本使用及css样式的按需引入
- 【若依(ruoyi)】表格实现tooltip
- 修改XMAPP中MYSQL的字符编码
- Mentor许可不够
- linux gz是什么文件,gz是什么
- [实用代码] 基于CH554电容触摸屏IIC转USB转IIC方案代码分享
- python图像缺陷检测_python OpenCV 实现缺陷检测
- ⑲云上场景：超级减肥王，基于OSS的高效存储实践
- java POI创建Excel示例（xslx和xsl区别 ）
- 暴风集团入多个被执行人名单-千氪
- Drupal8的详细建站教程
- vmware workstation 9 安装Ubuntu 12.04 WIN7 64 位 出现问题及解决办法
- 麦咖啡杀毒软件会阻止发送自己用程序写的邮件
- 如何关闭office软件中字符的下划线和波浪线
- 从BIO到NIO、AIO和零拷贝