Preact 轻量级毕设方案入门

背景

Preact 是 React 的 3KB 替代品。如果你的毕设需要 React 的组件化开发体验，但又担心打包体积太大（尤其是移动端 H5 场景），Preact 是完美的折中方案。API 几乎相同，生态兼容，体积仅 React 的 1/10。

---

核心概念

Preact vs React

特性	React	Preact
体积	~40KB	~3KB
虚拟 DOM	有	有（更快）
Hooks	✅	✅
合成事件	有	无（原生事件）
Class 组件	✅	✅
createElement	有	有（自动转换）

关键差异

// React：合成事件
<input onChange={(e) => setValue(e.target.value)} />

// Preact：原生事件（也可以用 onInput）
<input onInput={(e) => setValue(e.target.value)} />

---

分步操作

第一步：创建项目

npm create vite@latest my-app -- --template preact
cd my-app
npm install
npm run dev

第二步：理解项目结构

my-app/
├── index.html
├── src/
│   ├── main.jsx      # 入口：render(<App/>, ...)
│   ├── app.jsx       # 根组件
│   ├── app.css
│   └── components/   # 自定义组件
└── vite.config.js

第三步：编写组件

import { useState } from 'preact/hooks';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

第四步：兼容 React 生态

npm install preact-compat

// vite.config.js
export default {
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
    },
  },
};

---

毕设推荐场景

移动端 H5

Preact 3KB 体积 = 秒级加载，适合扫码即用的毕设展示。

嵌入到现有页面

不需要整个 SPA，Preact 可以渲染到指定 DOM：

render(<Widget />, document.getElementById('widget-root'));

组件库开发

用 Preact 开发可复用组件，体积小、依赖少。

---

思考题

1. Preact 去除合成事件系统的优劣分别是什么？
2. 在 Vite 中配置 alias 后，import from 'react' 实际加载的是什么？
3. 什么时候应该用 Preact 而不是 React？

---

小结

Preact = React 语法 + 3KB 体积。如果你的毕设需要组件化开发但对体积敏感（移动端、嵌入式），Preact 是最佳选择。它也能作为理解 React 原理的极佳学习材料。