Preact：轻量级 JavaScript 库，React 的高性能替代方案

Preact 是一个轻量级的 JavaScript 库，旨在提供与 React 相似的 API 和开发体验，但体积更小（约 3-4KB，gzip 后）。它由 Jason Miller 创建，专注于高性能和低资源消耗，特别适合对性能敏感或需要快速加载的 Web 应用（如移动端、PWA 等）。

Preact 的核心特性

1. 轻量级

   • Preact 的核心代码仅有 3-4KB（React + ReactDOM 约 40KB），显著减少加载时间。
   • 适合嵌入式场景或对包大小敏感的项目。

2. 兼容 React API

   • 支持 React 的核心功能：组件、Hooks、Context、Fragments、Portals 等。
   • 提供 preact/compat 模块，兼容大多数 React 生态库（如 React Router、Redux）。

3. 高性能

   • 虚拟 DOM 算法优化，减少不必要的渲染。
   • 默认启用了 requestIdleCallback（若可用），优化渲染时机。

4. 灵活的生态系统

   • 官方支持路由（preact-router）、状态管理（如 signals）、SSR（preact-render-to-string）等。
   • 可直接使用 React 工具链（如 CRA、Vite、Next.js 的 Preact 插件）。

Preact 与 React 的区别

虽然 API 高度兼容，但需注意以下差异：

快速上手 Preact

1. 安装与初始化

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

# 或手动安装
npm install preact

2. 组件开发

import { useState } from 'preact/hooks';

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

3. 状态管理

Preact 推荐使用轻量级方案：

• Signals（官方推荐）：

  import { signal } from "@preact/signals";
  const count = signal(0);
  // 使用：<div>{count}</div>（自动追踪依赖）
  

• Redux（通过 preact/compat 兼容）。

4. 路由

使用 preact-router：

import { Router, Route } from 'preact-router';
import Home from './routes/Home';
import About from './routes/About';

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

高级用法

1. 兼容 React 生态

通过 preact/compat 实现：

// webpack.config.js 中添加别名
{
  resolve: {
    alias: {
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",
    }
  }
}

2. 服务器端渲染（SSR）

import { renderToString } from 'preact-render-to-string';
import { h } from 'preact';
import App from './App';

const html = renderToString(<App />);

3. 性能优化

• 使用 memo 和 useMemo：避免不必要的渲染。
• 启用 Preact DevTools：浏览器插件支持调试。
• 代码分割：配合动态导入（import()）减少首屏体积。

适用场景

1. 性能敏感型应用：如移动端页面、低端设备。
2. 微前端架构：子应用需轻量级框架。
3. 替代 React 的轻量方案：功能需求简单，无需复杂生态。

总结

Preact 通过极小的体积和高度兼容的 API，为开发者提供了 React 的替代选择。它在性能优化和包大小控制上表现出色，适合追求高效加载与渲染的场景。若项目依赖复杂的 React 生态库（如 React Native），需谨慎评估兼容性；否则，Preact 是一个值得尝试的高性价比方案。