Qwik开发使用入门

export default component$(() => {
  const dadJokeSignal = useDadJoke();
  const favoriteJokeAction = useJokeVoteAction();
  return (
    <section class="section bright">
      <p>{dadJokeSignal.value.joke}</p>
      <Form action={favoriteJokeAction}>
        <input type="hidden" name="jokeID" value={dadJokeSignal.value.id} />
        <button name="vote" value="up">👍</button>
        <button name="vote" value="down">👎</button>
      </Form>
    </section>
  );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

现在，在 http://localhost:5173/joke/ 上显示按钮，如果点击按钮，其值就会记录到控制台。

代码解释：

• routeAction$ 接收数据。
• 每当张贴表单时，服务器就会调用传递给 routeAction$ 的函数。
• routeAction$ 返回一个使用挂钩，即 useJokeVoteAction，你可以在组件中使用它来发布表单数据。
• Form 是一个方便的组件，它封装了浏览器的本地 元素。

需要注意的事项：

• 有关验证，请参阅 zod validation
• 即使禁用了 JavaScript，routeAction$ 也能正常工作。
• 如果启用了 JavaScript，Form 组件将阻止浏览器发布表单，而是使用 JavaScript 发布数据，并在不完全刷新的情况下模拟浏览器的本地表单行为。

4 修改状态

跟踪状态和更新用户界面是应用程序的核心工作。Qwik 提供了一个 useSignal 钩子来跟踪应用程序的状态。要了解更多信息，请参阅状态管理。

从 qwik 引入 useSignal

import { component$, useSignal } from "@builder.io/qwik";
1

使用 useSignal() 声明组件的状态

const isFavoriteSignal = useSignal(false);
1

为组件添加一个按钮，以修改状态

<button
 onClick$={() => {
   isFavoriteSignal.value = !isFavoriteSignal.value;
 }}>
  {isFavoriteSignal.value ? '❤️' : '🤍'}
</button>
1
2
3
4
5
6

5 任务和调用服务器代码

在 Qwik 中，任务是指当状态发生变化时需要进行的工作（类似于其他框架中的 effect）。在本例中，我们使用任务来调用服务器上的代码。

从 qwik 引入 useTask$

import { component$, useSignal, useTask$ } from "@builder.io/qwik";
1

创建跟踪 isFavoriteSignal 状态的新任务

useTask$(({ track }) => {});
1

添加 track 调用，以便在 isFavoriteSignal 状态改变时重新执行任务。

useTask$(({ track }) => {
  track(() => isFavoriteSignal.value);
});
1
2
3

添加要在状态变化时执行的工作

useTask$(({ track }) => {
  track(() => isFavoriteSignal.value);
  console.log('FAVORITE (isomorphic)', isFavoriteSignal.value);
});
1
2
3
4

如果只想让工作在服务器上进行，则用 server$() 进行封装

useTask$(({ track }) => {
  track(() => isFavoriteSignal.value);
  console.log('FAVORITE (isomorphic)', isFavoriteSignal.value);
  server$(() => {
    console.log('FAVORITE (server)', isFavoriteSignal.value);
  })();
});
1
2
3
4
5
6
7

注意：

• useTask$ 的主体在服务器和客户端上都会执行（同构）。
• 在 SSR 上，服务器会打印 FAVORITE (isomorphic) false 和 FAVORITE (server) false。
• 当用户与 favorite 交互时，客户端会打印 FAVORITE (isomorphic) true，服务器会打印 FAVORITE (server) true。

6 样式

样式是任何应用程序的重要组成部分。Qwik 提供了一种将样式与组件关联起来并设定其范围的方法。

创建文件 src/routes/joke/index.css

p {
  font-weight: bold;
}
form {
  float: right;
}
1
2
3
4
5
6

在文件 src/routes/joke/index.tsx 中引入样式文件

import styles from "./index.css?inline";
1

从 qwik 导入 useStylesScoped$

import { component$, useSignal, useStylesScoped$, useTask$ } from "@builder.io/qwik";
1

告诉组件加载样式

useStylesScoped$(styles);
1

代码解释：

• ?inline 参数告诉 Vite 将样式内联到组件中。
• useStylesScoped$ 调用告诉 Qwik 仅将样式与组件关联（范围）。
• 只有当样式尚未作为 SSR 的一部分内联时，才会被加载，而且只针对第一个组件。

本节的完整代码片段如下，以供参考：

import { component$, useSignal, useStylesScoped$, useTask$ } from '@builder.io/qwik';
import { routeLoader$, Form, routeAction$, server$ } from '@builder.io/qwik-city';
import styles from './index.css?inline';
 
export const useDadJoke = routeLoader$(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  return (await response.json()) as {
    id: string;
    status: number;
    joke: string;
  };
});
 
export const useJokeVoteAction = routeAction$((props) => {
  console.log('VOTE', props);
});
 
export default component$(() => {
  useStylesScoped$(styles);
  const isFavoriteSignal = useSignal(false);
  // Calling our `useDadJoke` hook, will return a reactive signal to the loaded data.
  const dadJokeSignal = useDadJoke();
  const favoriteJokeAction = useJokeVoteAction();
  useTask$(({ track }) => {
    track(() => isFavoriteSignal.value);
    console.log('FAVORITE (isomorphic)', isFavoriteSignal.value);
    server$(() => {
      console.log('FAVORITE (server)', isFavoriteSignal.value);
    })();
  });
  return (
    <section class="section bright">
      <p>{dadJokeSignal.value.joke}</p>
      <Form action={favoriteJokeAction}>
        <input type="hidden" name="jokeID" value={dadJokeSignal.value.id} />
        <button name="vote" value="up">👍</button>
        <button name="vote" value="down">👎</button>
      </Form>
      <button
        onClick$={() => (isFavoriteSignal.value = !isFavoriteSignal.value)}
      >
        {isFavoriteSignal.value ? '❤️' : '🤍'}
      </button>
    </section>
  );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

7 预览

我们创建了一个最小的应用程序，让您对 Qwik 的关键概念和 API 有一个大致的了解。该应用程序运行在开发模式下，使用热模块重载（HMR）在更改代码的同时持续更新应用程序。

在开发模式下：

• 每个文件都是单独加载的，这可能会导致网络选项卡中出现瀑布流。
• 捆绑包没有投机加载，因此第一次交互时可能会有延迟。

让我们创建一个能消除这些问题的生产构建。

创建预览版

运行 npm run preview 创建生产构建。

注意：

• 您的应用程序现在应已完成生产构建，并在不同的端口上运行。
• 如果您现在与应用程序交互，开发工具的网络选项卡应显示捆绑包已从 ServiceWorker 缓存中即时交付。

总结

恭喜！你已经完成了 Qwik 的基础入门教学！希望这篇文章对你有所帮助，更多的 Qwik 知识，需要在实战中学习掌握。

下面是 Qwik 中各个 API 功能列表和解释：

1. component$ —— 每个组件导出时，必须使用这个函数
2. routeLoader$ —— 任何组件渲染之前在服务器上紧急调用，并负责加载数据。并返回一个挂钩函数，可在组件中用于检索服务器数据。
3. routeAction$ —— 将数据从客户端发回服务器。routeAction$ 是向服务器发送数据的首选方式，因为它使用的是浏览器本地表单 API，即使禁用 JavaScript 也能正常工作。
4. useSignal —— 跟踪应用程序的状态。
5. useTask$ —— 类似 effect。当状态发生变化时需要执行某些工作时，可以使用该 API，并且该 API 还提供了：状态变化时，服务器执行某些动作的功能（配合 server$ 使用）。
6. useStylesScoped$ —— 引入样式文件时使用

参考链接：
qwik 官方教程：https://qwik.builder.io/docs/getting-started/

文章首发地址：
Qwik开发使用入门 - Cikayo