Preact #

Preact 是一个轻量级的 JavaScript 库，提供了与 React 相同的现代 API，但体积仅有 3KB。它是构建高性能 Web 应用的理想选择，特别适合对包体积敏感的项目。

为什么选择 Preact #

核心优势 #

适用场景 #

Preact 适用场景
├── 移动端 Web 应用      追求极致加载速度
├── 渐进式增强项目       嵌入现有页面
├── 轻量级单页应用       中小型项目
├── 性能敏感应用         对首屏时间要求高
└── 微前端子应用         独立部署的小型应用

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，学习 Preact 的核心概念和基本语法。

• Preact简介 - 了解 Preact 的特点和应用场景
• Preact安装 - 搭建 Preact 开发环境
• 第一个Preact应用 - 创建你的第一个 Preact 应用
• JSX语法 - 掌握 JSX 语法规则

第二阶段：组件基础 #

学习 Preact 组件化开发的核心概念。

• 组件基础 - 函数组件与类组件
• Props与State - 组件数据管理
• 组件生命周期 - 理解组件生命周期
• 事件处理 - 事件绑定与处理

第三阶段：Preact Hooks #

掌握 Preact Hooks，实现更优雅的状态管理。

• Hooks基础 - useState 与基础 Hooks
• useEffect详解 - 副作用处理
• useContext与useReducer - 高级状态管理
• 自定义Hooks - 封装可复用逻辑
• Hooks最佳实践 - Hooks 使用规范

第四阶段：高级特性 #

掌握 Preact 的高级功能。

• Ref与DOM操作 - DOM 引用与操作
• 高阶组件 - 组件增强模式
• Portals传送门 - 渲染到任意 DOM 节点
• 性能优化 - 性能优化技巧

第五阶段：路由管理 #

学习构建单页应用的必备技能。

• Preact Router基础 - 路由配置与导航
• 路由进阶 - 路由守卫与懒加载

第六阶段：状态管理 #

学习复杂应用的状态管理方案。

• Context API - Preact 内置状态管理
• Signals信号 - Preact 响应式状态
• 外部状态管理 - 集成第三方状态库

第七阶段：与 React 对比 #

了解 Preact 与 React 的差异，实现平滑迁移。

• 核心差异 - Preact 与 React 的主要区别
• 迁移指南 - 从 React 迁移到 Preact
• 兼容模式 - 使用 React 生态库

第八阶段：最佳实践 #

学习企业级开发规范和技巧。

• 项目结构 - 代码组织规范
• Preact与TypeScript - TypeScript 集成
• 测试Preact组件 - 组件测试方法

技术栈概览 #

Preact 技术栈
├── Preact 10          核心库 (3KB)
├── Preact Router       路由管理
├── Signals             响应式状态
├── Vite                构建工具
└── TypeScript          类型支持

前置知识 #

学习本指南前，建议具备以下基础：

• HTML/CSS 基础
• JavaScript ES6+ 语法
• 基本的命令行操作
• Node.js 基础知识

学习建议 #

1. 循序渐进：按照章节顺序学习，打好基础
2. 动手实践：每学完一章，动手编写代码
3. 对比学习：如果熟悉 React，对比两者的差异
4. 项目驱动：通过实际项目巩固知识

版本说明 #

本指南基于 Preact 10 编写，推荐使用最新稳定版本。

Preact vs React 快速对比 #

开始你的 Preact 学习之旅吧！