Lit.js 简介

Lit 是 Google 提供的一组开源库，可帮助开发者构建快速、轻量且适用于任何框架的组件。借助 Lit，您可以构建可共享的组件、应用、设计系统等。

Lit 的核心概念和功能在很多方面与 React 类似，但 Lit 也与其存在一些重要的区别和差异：

Lit 非常小：经缩减大小和 gzip 压缩后可减至 5kb 左右，而 React + ReactDOM 的大小超过 40kb。

在对 Lit 的模板系统 lit-html 与 React 的 VDOM 进行对比的公开基准测试中，lit-html 在最糟糕的情况下比 React 快 8-10%，在比较常见的用例中快 50% 以上。

LitElement（Lit 的组件基类）给 lit-html 增加的开销极低，但在内存用量、交互时间和启动用时等组件特性的对比中却比 React 的性能高 16-30%。

借助新的浏览器功能（例如 ES 模块和带标记模板字面量），Lit 不需要编译即可运行。也就是说，您可以使用脚本标记、浏览器和服务器设置开发环境，然后 Lit 便可正常运行。

借助 ES 模块以及 Skypack 或 UNPKG 等现代 CDN，您甚至有可能无需 NPM 即可开始使用 Lit！

不过，如果您愿意，您仍可构建并优化 Lit 代码。近期围绕原生 ES 模块进行的开发者融合也对 Lit 颇有益处：Lit 就是常规 JavaScript，不需要框架专用的 CLI，也不需要构建处理。

Lit 的组件以一组名为 Web Components 的网页标准为基础构建。这意味着，在 Lit 中构建组件可确保在当前和未来的框架中都能正常工作。如果它支持 HTML 元素，那么它就支持 Web Components。

框架互操作性方面的唯一问题是有些框架对 DOM 的支持有限制。React 就是其中一种框架，不过它通过引用提供了解决办法，但 React 中的引用并不是让人愉快的开发者体验。

Lit 团队一直在进行一项名为 @lit-labs/react 的实验性项目，它会自动解析您的 Lit 组件并生成 React 封装容器，让您无需使用引用。

此外，您还可以在 Custom Elements Everywhere 网站了解哪些框架和库能与自定义元素良好配合！

虽然您可以使用 JavaScript 编写所有 Lit 代码，但 Lit 是使用 TypeScript 编写的，而且 Lit 团队也建议开发者使用 TypeScript！

Lit 团队一直与 Lit 社区合作来帮助维护项目，即使用 lit-analyzer 和 lit-plugin 在开发中和构建时实现 TypeScript 类型检查和 Lit 模板智能感知。

Lit 组件就是 DOM 中的 HTML 元素。这意味着，即使为了检查组件，您也不需要为浏览器安装任何工具或扩展程序。

只需打开开发者工具，选择某个元素，然后浏览其属性或状态即可。

Lit 2 在构建时考虑到了 SSR 支持。在编写此 Codelab 时，Lit 团队尚未发布稳定版 SSR 工具，但 Lit 团队已在各种 Google 产品上部署服务器端渲染的组件。Lit 团队预计很快就能在 GitHub 上对外发布这些工具。

在此期间，您可在此处跟进 Lit 团队的进度。

使用 Lit 不需要大量的投入！您可以在 Lit 中构建组件并将其添加到现有项目中。如果不喜欢这些组件，那么您不必立刻转换整个应用，因为网页组件可在其他框架中工作！

您是否已用 Lit 构建了整个应用，并想更改为别的框架？您可以将当前的 Lit 应用放到新框架内，然后将您需要的任何内容迁移到新框架的组件中。

此外，许多现代框架都支持在网页组件中输出，因此，这意味着此类框架本身通常可以纳入 Lit 元素中。