Scripts2026年4月11日·1 分钟阅读

Preact — Fast 3kB React Alternative with Same Modern API

Preact is a fast 3kB alternative to React with the same modern API. Virtual DOM, Components, Hooks — all in a tiny package. Drop-in compatible via preact/compat. Perfect for performance-critical apps and islands architecture.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

npm init preact
# Or manually
npm i preact
import { render } from "preact";
import { useState } from "preact/hooks";

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

render(<Counter />, document.getElementById("app")!);

Alias React → Preact for drop-in replacement:

// vite.config.ts
import preact from "@preact/preset-vite";
export default {
  plugins: [preact()],
  resolve: {
    alias: {
      "react": "preact/compat",
      "react-dom": "preact/compat",
    },
  },
};
介绍

Preact is a fast 3kB alternative to React with the same modern API. Created by Jason Miller, Preact trades some React internals (like SyntheticEvent pooling) for a tiny size. The compat layer (preact/compat) makes it a drop-in replacement for most React libraries.

What Preact Does

  • Same API as React — components, hooks, context, suspense
  • Virtual DOM — efficient diffing, smaller runtime
  • preact/compat — React drop-in replacement
  • preact/signals — fine-grained reactive primitives
  • preact/hooks — same hooks API as React
  • SSR — preact-render-to-string
  • Islands architecture — Astro + Preact is a common combo

Architecture

Core is a minimal virtual DOM differ. Components can be functional or class. No SyntheticEvent system (uses native events). Smaller runtime overhead means faster boot and smaller bundles.

Self-Hosting

Client library. Pairs with Vite, Astro, Next.js (via preact adapter).

Key Features

  • 3KB gzipped runtime
  • React-compatible API
  • Hooks, Context, Suspense
  • React compat mode
  • Signals (fine-grained reactivity)
  • SSR support
  • No legacy baggage
  • Tiny JSX runtime

Comparison

Library Size API React Ecosystem Reactivity
Preact 3KB React-like Compat layer VDOM
React 45KB Original Full VDOM
Inferno 8KB React-like Limited VDOM
Solid 8KB JSX Limited Fine-grained
Svelte Variable Own Own Compiled

常见问题 FAQ

Q: 完全兼容 React 吗？ A: 用 preact/compat 大部分 React 库可以直接用。某些依赖 React 内部（React Native、React Hook Form 某些版本）可能不兼容。

Q: 性能真的比 React 快？ A: 启动和初次渲染更快（小 runtime）。大型应用的 diff 性能差距不大。

Q: 什么场景用 Preact？ A: 对 bundle 大小敏感的场景：Landing page、Islands architecture（Astro）、嵌入式 widget、PWA。

来源与致谢 Sources

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Babylon.js — Powerful 3D Game and Rendering Engine

Babylon.js is a powerful, beautiful, simple, open 3D game and rendering engine for the web. WebGL + WebGPU, Playground IDE, Node Material Editor, GUI system, physics, and VR/AR support. Microsoft-backed with enterprise polish.

Script Depot

Alpine.js — Rugged Minimal JS Framework for Your Markup

Alpine.js is a rugged, minimal framework for composing JavaScript behavior directly in your HTML markup. Like jQuery for the modern web but declarative — reactive data, directives, and state with 15KB gzipped and zero build step.

Script Depot

PixiJS — The HTML5 Creation Engine with Fast 2D WebGL

PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Powers interactive ads, games, data viz, and rich media experiences. Used by Google, IKEA, Disney, and countless HTML5 games on Poki and CrazyGames.

Script Depot
◈首页🔍搜索👤我的