Qwik框架指南
核心概念
Resumability
无需水化，状态序列化到HTML，按需恢复
Lazy Loading
每个事件处理器和组件都是懒加载，O(1)启动
Signals
细粒度响应式，只重新渲染变化的部分
Server Functions
server$() 实现客户端和服务端的类型安全 RPC
快速入门
npm create qwik@latest
cd my-app && npm install && npm start
组件示例
import { component$, useSignal } from '@builder.io/qwik';
export const Counter = component$(() => {
const count = useSignal(0);
return (
<div>
<p>Count: {count.value}</p>
<button onClick$={() => count.value++}>+1</button>
</div>
);
});
服务端函数（RPC）
import { server$ } from '@builder.io/qwik-city';
const getUsers = server$(async () => {
// 仅在服务端运行
const db = await connectDB();
return db.query('SELECT * FROM users');
});
export const MyComp = component$(() => {
const users = useSignal<User[]>([]);
return (
<button onClick$={async () => {
users.value = await getUsers();
}}>
Load Users
</button>
);
});
Qwik vs React 对比
| 特性 | React | Qwik |
|---|---|---|
| 水化 | 完全水化 | 可恢复（无水化） |
| 客户端 JS 量 | 所有组件代码 | 交互时懒加载 |
| 状态 | useState, hooks | useSignal, useStore |
| 响应性 | 虚拟DOM比较 | 基于Signal |