Preact JSX 语法

在这一章节中，我们将深入探讨 Preact 的核心概念之一：JSX。JSX 是一种 JavaScript 的扩展语法，它允许我们以类似于 HTML 的方式来描述 UI 结构。尽管 JSX 看起来很像 HTML，但它实际上是一种 JavaScript 表达式，最终会被编译成纯 JavaScript。

JSX 的基本概念

什么是 JSX？

JSX 是一个 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的结构。这种扩展使得编写和理解 UI 成为可能，因为它将模板语言和编程逻辑结合在一起。

JSX 的优势

• 可读性：JSX 将 HTML 结构与 JavaScript 代码结合在一起，使得组件的结构更易于理解和维护。
• 性能：由于 JSX 被编译成高效的 JavaScript，因此使用 JSX 编写的代码通常比纯 JavaScript 更高效。
• 类型检查：通过 TypeScript 或 Flow 等类型系统，可以对 JSX 进行静态类型检查，从而提高代码质量。

JSX 的基本语法

创建元素

JSX 的最基本形式是创建一个元素。这可以通过以下方式实现：

const element = <div>Hello, world!</div>;

这里，<div> 是一个 JSX 元素，它表示一个 HTML <div> 标签。

使用属性

JSX 元素可以拥有属性，就像 HTML 标签一样。属性用于向元素传递数据或配置其行为：

const element = <img src="image.jpg" alt="Description" />;

在这个例子中，src 和 alt 是两个属性，它们分别设置了图片的源地址和替代文本。

嵌套元素

JSX 允许你嵌套元素，就像 HTML 一样。这使得你可以构建复杂的 UI 结构：

const element = (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

组件

在 Preact 中，你可以使用函数或类来定义组件。这些组件可以接受属性并返回 JSX：

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

const element = <Greeting name="Alice" />;

表达式

JSX 允许你在其中插入表达式。这些表达式必须被大括号 {} 包围：

const name = "Bob";
const element = <h1>Hello, {name.toUpperCase()}!</h1>;

条件渲染

你可以使用条件语句来控制何时渲染哪些元素。这可以通过三元运算符或逻辑运算符实现：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
  </div>
);

列表和循环

JSX 支持使用数组和循环来渲染列表。这通常通过 map() 方法实现：

const items = ["Apple", "Banana", "Cherry"];
const element = (
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
);

防止注入攻击

为了防止 XSS（跨站脚本攻击），你应该避免直接在 JSX 中插入用户输入的内容。相反，应该使用 Preact 提供的 h() 函数来创建元素：

const userInput = "<script>alert('XSS');</script>";
const safeElement = <div dangerouslySetInnerHTML={{ __html: userInput }} />;

虽然这种方法可以工作，但最好还是使用 Preact 的 API 来确保安全。

总结

JSX 是 Preact 中的核心概念之一，它使得创建和管理 UI 变得更加简单和直观。通过掌握 JSX 的基本语法和特性，你可以开始编写功能强大的 Preact 应用程序。

在接下来的部分中，我们将继续探索更多关于 Preact 的知识，包括组件生命周期、状态管理以及如何使用 Preact Hooks 来简化你的应用。