搭建你的第一个 Astro 岛屿

使用一个 Preact 组件来随机选择欢迎消息来欢迎访问者！

准备好…

在你的 Astro 项目中添加 Preact
在主页上包含 Astro 岛屿（Preact .jsx 组件）
使用 client: 指令使岛屿可交互

在你的 Astro 项目中添加 Preact

如果运行着 Astro 开发服务器，请退出以便使用终端（快捷键：Ctrl + C）。
通过以下单个命令，为你的 Astro 项目添加使用 Preact 组件的能力：
- npm
- pnpm
- Yarn
Terminal window
npx astro add preact
Terminal window
pnpm astro add preact
Terminal window
yarn astro add preact
按照命令行提示的说明来确认添加 Preact 到你的项目。

添加一个 Preact 欢迎横幅

这个组件将接受一个欢迎消息的数组作为属性，并随机选择其中一条消息作为欢迎消息展示给用户。用户可以点击按钮获取新的随机消息。

在 src/components/ 目录下创建一个名为 Greeting.jsx 的新文件。

注意 .jsx 文件扩展名。这个文件将使用 Preact 编写，而不是 Astro。

将以下代码添加到 Greeting.jsx 文件中：

import { useState } from 'preact/hooks';

export default function Greeting({messages}) {

  const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];

  const [greeting, setGreeting] = useState(messages[0]);

  return (
    <div>
      <h3>{greeting}! Thank you for visiting!</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        New Greeting
      </button>
    </div>
  );
}

在你的主页 index.astro 中导入并使用这个组件。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "首页";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
</BaseLayout>

在浏览器中预览：你应该看到一个随机的问候，但按钮不起作用！

添加第二个 <Greeting /> 组件，并加上 client:load 指令。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "首页";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

查看你的页面并比较这两个组件。第二个按钮可工作，因为 client:load 指令告诉 Astro 在页面加载时将其 JavaScript 发送并重新运行到客户端上，使组件可交互。这称为 被 Hydrate 的 组件。

一旦明确区别后，删除未被 Hydrate 的 Greeting 组件。

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "首页";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
  <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

分析代码

还有其他的 client: 指令可以探索。每个指令在不同的时间将 JavaScript 发送到客户端。例如，client:visible 只会在组件在页面上可见时发送其 JavaScript。

考虑一个带有以下代码的 Astro 组件：

---
import BaseLayout from '../layouts/BaseLayout.astro';
import AstroBanner from '../components/AstroBanner.astro';
import PreactBanner from '../components/PreactBanner';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<BaseLayout>
  <AstroBanner />
  <PreactBanner />
  <PreactBanner client:load />
  <SvelteCounter />
  <SvelteCounter client:visible />
</BaseLayout>

五个组件中哪些将成为被 Hydrate 的岛屿，将其 JavaScript 发送到客户端？

<PreactBanner client:load /> 和 <SvelteCounter client:visible /> 将成为被 Hydrate 的岛屿。
两个 <PreactBanner /> 组件在哪些方面相同？在哪些方面不同？

相同：它们都显示相同的 HTML 元素，并且初始外观相同。不同：具有 client:load 指令的组件会在页面加载后重新渲染，并且任何交互元素都将起作用。
假设 SvelteCounter 组件显示一个数字，并带有一个增加数字的按钮。如果你无法看到网站的代码，只能看到发布后的页面，你如何判断哪个 <SvelteCounter /> 组件使用了 client:visible？

尝试点击按钮，看看哪个是可交互的。如果它对你的输入有响应，那么它肯定使用了 client: 指令。

检验你的知识

对于以下每个组件，确定将发送到浏览器的内容：

<ReactCounter client:load />
1. 仅 HTML 和 CSS
2. HTML、CSS 和 JavaScript
<SvelteCard />
1. 仅 HTML 和 CSS
2. HTML、CSS 和 JavaScript

任务清单

我可以安装 Astro 集成。
我可以用它们各自的语言编写 UI 框架组件。
我可以在 UI 框架组件上使用 client: 指令进行 hydrate。