全书目录

第四十一篇：Qwik 完全指南 —— 可恢复瞬启城区宇宙

第四章：Qwik 的基础心智 —— 组件、信号、美元符号

1 分钟 261 字 第 796 / 962 个阅读单元

如果你有 React 背景，最先要切换的是心智，而不是 API 名字。

#1. 组件不是普通函数组件，而是 component$

tsx
import { component$ } from '@builder.io/qwik';

export const Greeting = component$(() => {
  return <h1>欢迎来到可恢复瞬启城区</h1>;
});

#2. 局部状态常用 useSignal

tsx
import { component$, useSignal } from '@builder.io/qwik';

export const TemperatureBoard = component$(() => {
  const temperature = useSignal(26);

  return (
    <section>
      <p>城区温度：{temperature.value}°C</p>
      <button onClick$={() => temperature.value++}>升温</button>
    </section>
  );
});

useSignal() 很像一个单值响应式盒子：

  • 读：temperature.value
  • 改：temperature.value = 27

#3. $ 后缀不是装饰品

在 Qwik 里，$ 往往意味着：

  • 这段逻辑会被优化器识别
  • 它可能被拆成独立 symbol
  • 它具备按需恢复、按需加载的前提

所以不要把它看成“语法怪癖”，它其实是 Qwik 架构的一部分。