Preact简介 #

一、什么是Preact #

Preact 是一个快速、轻量级的 JavaScript 库，用于构建用户界面。它提供了与 React 相同的现代 API，但体积仅有 3KB（gzip 压缩后），是 React 的理想替代方案。

1.1 核心定位 #

text 
Preact = React API + 极小体积 + 高性能

Preact 的核心设计理念：

  • 轻量：仅 3KB，加载速度极快
  • 兼容：提供与 React 相似的 API
  • 高效：更快的渲染和更低的内存占用
  • 标准：基于 Web 标准，易于理解

1.2 核心特点 #

特点 说明
极小体积 3KB gzip，React 的 1/10
高性能 更快的虚拟 DOM diff 算法
React 兼容 可使用大部分 React 生态库
标准 API 遵循 Web 标准，无魔法
TypeScript 开箱即用的类型支持
无依赖 零外部依赖

二、核心概念 #

2.1 虚拟DOM #

Preact 使用轻量级的虚拟 DOM 实现：

text 
┌─────────────┐
│   State     │  状态变化
└──────┬──────┘
       ↓
┌─────────────┐
│ Virtual DOM │  生成新的虚拟DOM树
└──────┬──────┘
       ↓ Diff算法
┌─────────────┐
│   Diffing   │  对比新旧虚拟DOM
└──────┬──────┘
       ↓ 最小更新
┌─────────────┐
│  Real DOM   │  只更新变化的部分
└─────────────┘

Preact 的虚拟 DOM 优势：

  • 更轻量的实现
  • 更快的 diff 算法
  • 更低的内存占用

2.2 组件化 #

Preact 应用由组件构成：

jsx 
function App() {
  return (
    <div>
      <Header />
      <Main>
        <Sidebar />
        <Content />
      </Main>
      <Footer />
    </div>
  );
}

组件特点：

  • 函数组件优先：推荐使用函数组件
  • Hooks 支持：完整的 Hooks API
  • 类组件支持：兼容 React 类组件写法

2.3 单向数据流 #

Preact 采用单向数据流：

text 
┌─────────────┐
│  父组件     │
│   Props     │
└──────┬──────┘
       ↓ 单向传递
┌─────────────┐
│  子组件     │
└─────────────┘

2.4 声明式编程 #

jsx 
// 命令式（传统方式）
const counter = document.getElementById('counter');
const button = document.getElementById('button');
button.addEventListener('click', () => {
  counter.textContent = parseInt(counter.textContent) + 1;
});

// 声明式（Preact风格）
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}

三、Preact vs React #

3.1 体积对比 #

text 
React 18.x
├── react           ~42KB (gzip ~12KB)
├── react-dom       ~130KB (gzip ~42KB)
└── 总计            ~172KB (gzip ~54KB)

Preact 10.x
├── preact          ~10KB (gzip ~3KB)
└── 总计            ~10KB (gzip ~3KB)

3.2 API 对比 #

方面 Preact React
核心导出 h, render, Component createElement, render, Component
Hooks 完整支持 完整支持
事件系统 原生事件 合成事件
类组件生命周期 简化版 完整版
合成事件 无 有

3.3 性能对比 #

javascript 
// Preact 更快的渲染
// 原因：
// 1. 更轻量的虚拟 DOM 实现
// 2. 更简单的 diff 算法
// 3. 无合成事件层开销

四、应用场景 #

4.1 移动端 Web 应用 #

text 
适合移动端场景
- 首屏加载速度要求高
- 移动网络带宽有限
- 用户对性能敏感

4.2 渐进式增强 #

html 
<!-- 在现有页面中嵌入 Preact 组件 -->
<div id="widget"></div>
<script type="module">
  import { render } from 'preact';
  import Widget from './Widget.js';
  
  render(<Widget />, document.getElementById('widget'));
</script>

4.3 轻量级单页应用 #

text 
适合中小型 SPA
- 企业内部工具
- 博客系统
- 个人项目
- 原型开发

4.4 微前端子应用 #

text 
微前端场景优势
- 独立部署
- 技术栈无关
- 体积小不影响主应用

五、Preact 生态系统 #

5.1 官方库 #

text 
Preact 官方生态
├── preact                    核心库
├── preact-router             路由
├── preact-render-to-string   SSR 渲染
├── preact-compat             React 兼容层
├── @preact/signals           响应式状态
└── preact-testing-library    测试工具

5.2 兼容 React 生态 #

javascript 
// 使用 preact/compat 兼容 React 库
import { render } from 'preact';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Main />
      </BrowserRouter>
    </Provider>
  );
}

六、技术栈概览 #

6.1 推荐技术栈 #

text 
┌──────────────────────────────────────┐
│              Preact 10               │
├──────────────────────────────────────┤
│  Preact Router │    Signals          │
│  (路由管理)    │    (响应式状态)      │
├──────────────────────────────────────┤
│  Vite          │    TypeScript       │
│  (构建工具)    │    (类型支持)        │
└──────────────────────────────────────┘

6.2 开发工具 #

  • Preact DevTools：浏览器开发者工具扩展
  • VS Code：推荐编辑器
  • Vite：推荐构建工具
  • TypeScript：类型支持

七、学习路线 #

text 
基础阶段
├── Preact基础语法
├── JSX与组件
├── Props与State
└── 事件处理

进阶阶段
├── Preact Hooks
├── 组件通信
├── Preact Router
└── Signals状态管理

高级阶段
├── 性能优化
├── 自定义Hooks
├── TypeScript集成
└── SSR服务端渲染

八、快速体验 #

8.1 在线体验 #

html 
<!DOCTYPE html>
<html>
<head>
  <title>Preact Demo</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { render, h } from 'https://esm.sh/preact';
    import { useState } from 'https://esm.sh/preact/hooks';
    
    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <h1>Hello Preact!</h1>
          <p>Count: {count}</p>
          <button onClick={() => setCount(c => c + 1)}>
            Click me
          </button>
        </div>
      );
    }
    
    render(<App />, document.getElementById('app'));
  </script>
</body>
</html>

8.2 创建项目 #

bash 
# 使用 Vite 创建
npm create vite@latest my-app -- --template preact

# 或使用官方 CLI
npx preact-cli create default my-app

九、总结 #

Preact 是一款优秀的轻量级 UI 库：

  • 轻量：仅 3KB，极致性能
  • 兼容：React API，平滑迁移
  • 高效：更快的渲染速度
  • 现代：完整的 Hooks 支持

选择 Preact 的理由：

  • 追求极致的加载性能
  • 需要轻量级解决方案
  • 熟悉 React 想要更小的包体积
  • 移动端或嵌入式场景
最后更新：2026-03-28