Preact 教程入门

Preact 是一个轻量级的 JavaScript 库，用于构建用户界面。它与 React 具有高度的兼容性，同时提供了极小的体积和高性能。Preact 的核心理念是“轻量级且高效”，因此非常适合那些对性能有较高要求的应用场景。

为什么选择 Preact？

轻量级

Preact 的体积非常小，压缩后的文件大小通常只有几 KB。这意味着它加载更快，传输成本更低，特别适合移动设备或带宽受限的环境。

高性能

尽管体积小，Preact 却提供了令人惊讶的高性能。它的虚拟 DOM 实现经过优化，使得应用渲染速度快、响应迅速。

React 兼容性

Preact 与 React 的 API 非常相似，这使得开发者可以轻松地将现有的 React 代码迁移到 Preact 上。同时，由于其小巧的体积，使用 Preact 可以显著减少项目的依赖包数量，提高构建速度。

Preact 的核心概念

组件

组件是 Preact 应用的基本构建块。每个组件都可以看作是一个独立的功能单元，负责生成部分用户界面。组件可以嵌套组合，从而构建出复杂的 UI 结构。

函数组件

函数组件是最简单的组件形式，它们通过函数来定义。函数组件接收属性（props）作为输入，并返回一个描述 UI 的 JSX 代码。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

类组件通过继承自 Component 类来实现。它们可以拥有状态（state）、生命周期方法以及更多的功能。

// www.javascriptcn.com code example
import { Component } from "preact";

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name };
  }

  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

JSX

JSX 是一种类似 HTML 的语法扩展，允许你在 JavaScript 中直接书写 UI 结构。JSX 会被编译成普通的 JavaScript 函数调用，使得代码更加直观易懂。

// 编译后的结果
React.createElement("h1", null, "Hello, ", props.name);

状态管理

状态是组件内部的数据源，它决定了组件的输出。状态可以通过 useState 钩子进行管理。

// www.javascriptcn.com code example
import { useState } from "preact/hooks";

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

事件处理

Preact 使用标准的 DOM 事件模型来处理用户交互。事件处理器通常绑定到元素上，并在触发时执行相应的逻辑。

function Button() {
  function handleClick(event) {
    console.log("Button clicked!");
  }

  return <button onClick={handleClick}>Click me!</button>;
}

总结

通过以上介绍，你应该对 Preact 有了基本的认识。接下来的章节将会深入探讨如何使用 Preact 构建复杂的应用程序，包括路由、状态管理和最佳实践等。希望你能通过本教程掌握 Preact 的精髓，并在实际项目中运用自如。