Preact 开源项目教程

最新推荐文章于 2025-02-24 09:29:48 发布

原创最新推荐文章于 2025-02-24 09:29:48 发布 · 316 阅读

10 ·

CC 4.0 BY-SA版权

Preact 开源项目教程

preact项目地址:https://gitcode.com/gh_mirrors/pre/preact

项目介绍

Preact 是一个轻量级的 JavaScript 库，用于构建用户界面。它作为 React 的替代方案，提供了相同的现代 API，但体积更小（仅 3KB），性能更高。Preact 的核心优势在于其简洁性和高效性，使得开发者可以快速构建高性能的 Web 应用。

项目快速启动

安装 Preact

首先，通过 npm 安装 Preact：

npm install preact

创建一个简单的 Preact 应用

以下是一个简单的 Preact 应用示例：

import { h, render, Component } from 'preact';

class App extends Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h1>计数器: {this.state.count}</h1>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

render(<App />, document.body);

将上述代码保存为 index.js，并在 HTML 文件中引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preact 示例</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>