原文作者:HTM Team
译者:UC 国际研发 Jothy
写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。
HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。
你可直接使用 React/Preact 在浏览器中开发,然后将 HTM 编译为生产包。它使用标准 JavaScript 标签模板,适用于所有现代浏览器。
项目地址:https://github.com/developit/htm
HTM 的各项数据
直接在浏览器中使用时 < 700 bytes
️ 与 Preact 一起使用时 < 500 bytes(感谢 gzip )
使用 babel-plugin-htm 编译时 0 bytes
语法:类 JSX,但有所提升
- 使用 HTM 编写的语法无限接近 JSX :
- Spread props:
- 自关闭标签:
- 组件: <${Foo}> (其中 Foo 是组件引用)
- 布尔属性:
对 JSX 的改进
实际上 HTM 更深度采用了 JSX 风格的语法!
以下是 JSX 中不具备的符合人体工程学的功能:
无需编译器
- HTML 引号可选:
- 组件结束标记: <${Footer}>footer content/>
- 通过 lit-html VSCode 插件实现语法高亮和语言支持
HTM 2.0 发布啦!
我们使用全新的自定义 JSX 解析器,从头开始构建 HTM 的性能和大小。
这对你来说意味着什么?
- HTM 速度提升了 20 倍
- …体积缩小了 10%
- …随处运行(原生 SSR!)
- 语法无限接近 JSX
- 缓存速度提高20%
- 更优的输出
全新的 Babel 插件!
我们的 Babel 插件也进行了大幅修改! 它的速度提高了 1-2 个量级,不再需要 JSDOM,并且支持自定义输出。
此更新还修复了缓存、边缘情况和空白处理相关的多个问题。
还带来了新语法?
是的,但别慌。 现在写 HTM 基本上就是在写 JSX。你只需要记住两件事:
之类的组件写做 <${Foo}>
{a} 之类的字段写为 ${a}
其他一切与 JSX 相同。