仅3kB的ReactJs替代方案

发表于 更新于 分类于

概述

这篇文章简要的介绍了一款开源的前端 js 框架——PreactJs，其特点是小巧且易用，仅 3kB 即可实现类似 React 的现代化前端 api，特别适用于存储空间有限的环境，比如嵌入式的 web 项目。

认识 PreactJs

官网: https://preactjs.com/

Github(star 34.6k): https://github.com/preactjs/preact

PreactJs 是 React 的轻量化、快速的替代方案，拥有与其相同的现代化 API，其优势在于：

  • 贴近实质：Preact 在 DOM 上提供了最薄的虚拟 DOM 抽象，在提供稳定的平台特性和注册事件处理程序的同时还确保其余其他库无缝兼容。Preact 无需转译即可在浏览器中直接使用。
  • 微小体积：Preact 体积小，意味着下载、解析、执行更少的 JavaScript，让开发人员专心构建用户体验，无需花更多时间在框架本身上。
  • 性能卓越：Preact 体积小，加载速度快，而且其基于树差异的简单、可预测而极快的虚拟 DOM 实现也提升了响应速度。
  • 即刻生产：Preact 轻量但不牺牲生产性，可以即刻部署到生产环境，甚至提供一些附加功能：
    • 将 props 、state 和 context 传递进 render()
    • 使用 class 和 for 一类的标准 HTML 属性
  • 生态兼容：Preact 的设计能够让您轻松、无缝的借用来自 React 生态中的许多组件。

快速开始

注：以下示例基于 preact 10.15.1 版本。

使用 script 标签直接引入 preact 的 js 包，引入之后，会自动在浏览器 window 对象上添加一个 preact 对象，里面包含了 preact 提供的函数，可以直接调用，如 preact.h('h1', null, 'hello world')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Preact 快速开始</title>
		<script src="preact.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		const app = preact.h('h1', null, 'hello world');
		preact.render(app, document.getElementById('app'));  
	</script>
</html>

示例：PreactJS 快速开始示例

总结

官网号称的 3kB 是有点夸张，最新的 PreactJs 10.11.3 中的压缩版 preac.min.js 是 9.95 KB，但跟其他前端框架动辄几兆大小相比确实是非常轻量了。