第一次使用Preact就是这么爽，轻量级替代React的选择

天涯学馆
2,715 阅读4分钟

Preact是一个轻量级的JavaScript库，它提供了与React相似的API，但体积更小，性能更优。Preact的核心理念是尽可能地保持与React的兼容性，同时去除不必要的部分，使其成为一个理想的替代品，尤其是在对性能和包大小有严格要求的场景中。

Preact简介

Preact由Jason Miller在2016年创建，其设计目标是提供一个与React API一致的框架，但体积更小，运行速度更快。Preact的核心库大小仅为3KB（gzip压缩后），而React的大小约为25KB（gzip压缩后）。尽管体积小，Preact仍然提供了React的大部分功能，包括虚拟DOM、组件化、状态管理和生命周期方法。

1. 轻量级与高性能

Preact 的核心库非常小，只有大约 3KB（gzip 压缩后）。这意味着加载时间更快，这对于移动设备尤其重要。尽管体积小巧，但它依然提供了类似于 React 的虚拟 DOM 和组件化的 API，这使得我们可以轻松地构建出高性能的应用。

2. 易于上手

如果你之前有 React 的开发经验，那么转向 Preact 几乎不需要任何额外的学习成本。Preact 的 API 设计与 React 非常相似，因此迁移起来非常容易。即使你是新手，Preact 的文档也非常清晰，很容易上手。

3. 灵活性

Preact 不像某些框架那样强加了一整套解决方案。相反，它允许开发者选择自己想要使用的工具和库。这种灵活性意味着可以根据项目的具体需求来选择最佳的技术栈。

4. 社区支持

虽然 Preact 的社区可能没有 React 社区那么庞大，但它仍然拥有一个活跃且热情的支持者群体。GitHub 上的 Preact 项目经常更新，社区成员也会积极地回应问题和支持请求。此外，Preact 也得到了许多知名公司的支持，这增加了它的可信度。

Preact基础

安装Preact

首先，确保你已经安装了Node.js和npm。然后，使用npm安装Preact和Preact的DOM适配器：

npm install preact preact-render-to-string

创建第一个Preact应用

创建一个HTML文件，引入Preact和Preact的DOM适配器，编写一个简单的组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preact App</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/preact/preset.js"></script>
  <script>
    function Hello({ name }) {
      return <h1>Hello, {name}!</h1>;
    }

    preact.render(<Hello name="World" />, document.getElementById('root'));
  </script>
</body>
</html>

Preact组件

函数组件

在Preact中，函数组件是最常用的组件类型，它接收props作为参数，返回一个或多个虚拟DOM节点：

const Greeting = props => <h1>Hello, {props.name}!</h1>;

preact.render(<Greeting name="John Doe" />, document.getElementById('root'));

类组件

类组件继承自preact.Component，可以使用state和生命周期方法：

import { Component } from 'preact';

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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

preact.render(<Counter />, document.getElementById('root'));

状态与Props

Props

组件可以通过props属性接收外部传递的数据：

const Profile = ({ name, age }) => (
  <div>
    <h1>Name: {name}</h1>
    <p>Age: {age}</p>
  </div>
);

preact.render(<Profile name="Alice" age={25} />, document.getElementById('root'));

State

组件内部的状态通过setState方法更新，这将触发组件重新渲染：

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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

生命周期方法

Preact的类组件支持生命周期方法，但命名略有不同：

  • componentWillLoad()：组件即将加载时调用。
  • componentDidLoad()：组件加载完成后调用。
  • componentWillUpdate()：组件即将更新时调用。
  • componentDidUpdate()：组件更新完成后调用。
  • componentWillUnmount()：组件即将卸载时调用。
class LifecycleDemo extends Component {
  state = { count: 0 };

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Hooks

Preact支持React Hooks，包括useState、useEffect等：

import { useState } from 'preact/hooks';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

虚拟DOM与Diff算法

Preact使用虚拟DOM来提高性能，它通过比较前后两次渲染的虚拟DOM树，仅更新有变化的部分，而不是重绘整个页面。

事件处理

Preact的事件处理与React类似，使用驼峰式命名，如onClick：

const Button = ({ onClick }) => <button onClick={onClick}>Click me</button>;

preact.render(<Button onClick={() => alert('Clicked!')} />, document.getElementById('root'));

条件渲染与列表渲染

Preact支持使用三元运算符或逻辑与运算符进行条件渲染，使用map函数进行列表渲染：

const UserList = ({ users }) => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

Context API

Preact的Context API用于跨组件传递数据，避免了props drilling：

import { createContext, useContext } from 'preact/hooks';

const ThemeContext = createContext('light');

const ThemeProvider = ({ children }) => (
  <ThemeContext.Provider value="dark">
    {children}
  </ThemeContext.Provider>
);

const App = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme is {theme}</div>;
};

preact.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Preact CLI与构建工具

Preact CLI是一个脚手架工具，用于快速创建和配置Preact项目。它提供了与Create React App类似的功能，包括代码拆分、热模块替换和生产构建等功能。

# 创建新项目
npx create-preact-app my-app
cd my-app
npm start
avatar
文章
阅读
粉丝