Preact：3KB 的 React 替代品，性能炸裂的前端新宠？-51CTO.COM

今天要给大家介绍一个特别有趣的前端库——Preact。如果你觉得React太重了，或者对性能有极致追求，那Preact绝对是一个值得尝试的选择。它就像是React的“小老弟”，体积小巧但功能强大，完美继承了React的核心特性，同时在某些方面甚至更胜一筹。让我们一起来探索这个迷你但强大的框架吧！

初识Preact：小身材大能量

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

来看看最基本的Hello World示例：

import { h, render } from 'preact';

const app = h('h1', null, 'Hello, World!');
render(app, document.body);1.
2.
3.
4.

小贴士：Preact使用h()函数来创建虚拟DOM，这就相当于React中的createElement()。不过别担心，我们通常会用JSX来写，看起来会更直观！

JSX魔法：写HTML更简单

使用JSX，我们可以用更直观的方式写组件。看看这个计数器组件：

import { h, Component } from'preact';

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

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

  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.increment}>点我加1</button>
      </div>
    );
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

注意事项：虽然语法和React几乎一模一样，但Preact的setState是同步的，这点和React不太一样哦！

Hooks：现代化的状态管理

和React一样，Preact也支持Hooks！来看个使用Hooks的例子：

import { h } from'preact';
import { useState, useEffect } from'preact/hooks';

function Timer(
) {
const [time, setTime] = useState(newDate());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(newDate());
    }, 1000);

    return() => clearInterval(timer);
  }, []);

return<h1>当前时间：{time.toLocaleTimeString()}</h1>;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

小技巧：Preact的Hooks和React的Hooks几乎完全一致，所以你可以无缝迁移！

性能优势：小而快

Preact的核心优势之一就是性能。由于它的体积小，加载速度更快，尤其是在移动端和低带宽环境下表现尤为突出。此外，Preact的虚拟DOM算法经过优化，更新速度更快，适合对性能要求较高的场景。

兼容性：平滑迁移

Preact提供了preact/compat层，允许你继续使用React生态系统中的组件和工具。这意味着你可以逐步将现有React项目迁移到Preact，而无需大规模重写代码。

适用场景

移动端开发：由于体积小、性能高，Preact非常适合移动端应用。
小型项目：对于不需要React所有高级特性的项目，Preact是一个轻量级的选择。
性能敏感场景：如果你的项目对性能有严格要求，Preact是一个理想的解决方案。

总结

Preact作为一个轻量级React替代品，凭借其小巧的体积、高性能和与React的高度兼容性，成为了前端开发中的“小而美”之选。如果你正在寻找一个更轻、更快的框架，或者想优化现有React项目的性能，Preact绝对值得一试！