|
近期盘点了 2023年度热门前端框架的 npm 下载量，发掘 Preact 已然跻身前五名，年度下载量高达 1.23 亿。本文就来瞧瞧 Preact 是什么，它和 React 又有何区别！ 
Preact 是什么？
Preact 是一个轻量级的前端库，用于构建用户界面（UI），其功能和 React 类似，但体积更小，仅有大约 3 KB。Preact 拥有与 React 类似的现代 API，因此呢能够视为 React 的一个快速、轻量级的替代方法。Preact 的核心目的是高性能、轻量级和即时生产，其名叫作中的"P"表率 performance（性能）。  Preact并非 React 的翻版，两者之间存在明显差异。尽管其中许多差异看似微不足道，但经过preact/compat，能够实现与React的高度兼容。Preact 不追求包括 React 的所有功能，而是致力于保持其代码的简洁和专注。这种策略避免了不必要的繁杂性，使得 Preact 更加有效。Preact 的起源
Jason Miller，Preact 的创始人，长时间致力于为Web创造各样UI框架和模板引擎。然而，他发掘始终难以创建一个完全满足他所有需要的完美框架，尤其是在处理 DOM 时遇到许多挑战。直到他发掘了JSX和React，这两个工具完美满足了他对框架的所有期待和需要。为了更深入地理解React的工作原理，Jason决定亲手打造一个与React类似的项目，他坚信经过实践学习能取得更好的效果。  起初，Preact只是一个简单的Codepen文件，但Jason经过连续持续的优化和新功能的添加，使其逐步成长为能够像React同样渲染海量DOM元素的强大工具。当他在桌面和移动设备上对自己的项目进行速度测试时，结果令人惊喜：Preact的性能几乎与纯JavaScript相当，乃至在某些方面超越了React。受到这一鼓舞，Jason决定将Preact继续发展下去，并将其打导致为一个开源库。这个库旨在为哪些因React的高性能成本而犹豫不决的研发者供给一个替代选取。Preact不仅在功能上与React相近，况且更加轻量级和有效。该库于2015年11月13日首次在GitHub上发布（v2.0.0）。
自那时败兴，Preact社区持续发展壮大，吸引了越来越多的用户、贡献者和守护者。如今，Preact已作为一个备受推崇的前端库，为研发者供给了另一种构建有效、现代化用户界面的选取。
Preact vs React
体积
React 功能丰富，其生态系统中预置了众多的实现、功能和函数。然而，这种全面性的代价是相对很强的打包体积。针对哪些海量运用第三方库或依赖项的应用来讲，这可能会引起初始页面加载时间受到影响。
Preact 因其小巧的体积而备受叫作赞，从而在运行时供给了更低的资源占用。它聚焦于核心视图库，仅包括如事件处理和差异比较等基本实现。为了更好地优化性能和内存管理，Preact 完全摒弃了 React 中的调试功能和其他冗余特性。这种有针对性的设计策略使得打包后的体积大幅减少，同期保证了更有效的内存运用。
详细来讲，React 本身体积约 6KB，而 ReactDOM 体积约 130KB，压缩（Gzip）后的体积约为 42KB。而 Preact 的压缩后的体积仅为 4KB。
合成事件
Preact 与 React 在事件系统的实现上有明显差异：
React 为了实现更好的性能和更小的包体积，引入了合成事件系统。这一系统为所有事件供给了一个跨浏览器的抽象层，保证了事件对象在区别浏览器中的一致性。
相比之下，Preact则选取了更贴近浏览器原生行径的方式。它直接运用浏览器的标准 addEventListener 办法来注册事件函数。这寓意着在Preact中，事件名叫作和事件对象的行径与原生JavaScript/DOM中的行径完全一致。
性能
Preact 因其卓越的性能和精简的特性而备受赞誉。得益于其小巧的体积、简练的代码库以及轻量级的虚拟DOM，Preact 能够以比React更高的效率和速度更新组件。因为Preact的虚拟DOM设计得更为简洁，它大幅减少了更新操作所需的工作量，从而实现了更快的运行时性能。
React之因此在性能方面与Preact相比稍显逊色，是由于其虚拟DOM供给了更为全面和繁杂的特性，以满足繁杂应用所面临的挑战。然而，这种全面的特性集在必定程度上牺牲了性能。
版本兼容
Preact 旨在与 React 完全兼容，这使得现有的 React 应用能够无缝地迁移到 Preact，仅需最少的代码更改。
Preact 和 Preact/Compat 的版本兼容性是按照它们与 React 的当前版本和前一个重点版本的兼容性来衡量的。当 React 团队宣布新的功能或更新时，Preact 团队会评定这些新功能是不是符合 Preact 项目的目的。倘若新功能对 Preact 有道理且符合项目的方向，那样这些功能可能会被纳入 Preact 的核心代码中。Preact 团队会公开讨论这些决策，并鼓励社区成员经过问题、拉取请求等方式参与决策过程。
调试
React 供给了一系列丰富的调试工具，配备了适当的错误信息和调试功能。然而，将这些工具配置得完全适合项目可能拥有挑战性，需要仔细思虑和定制。虽然与 React 相比，Preact 供给的调试信息相对较少，但它保证研发人员能够有效地排除和诊断应用中的关键问题。
Preact 灵活的架构准许插件以任何想要的方式加强 Preact 体验。其中 preact/debug 插件添加了帮忙性的警告和错误信息且附加了Preact Developer Tools 浏览器插件。这些能帮忙研发者在研发 Preact 应用时更易发掘问题。
Hooks
Preact 引入了与 React 类似的 Hooks，为管理函数组件的状态和副功效供给了类似的功能。不外，Hooks 不是 Preact 核心的一部分。它们已被分离出来，以保持主包较小，因此呢需要单独导入。能够从 preact/hooks 或 preact/compat 中导入 Hook。 import { useState } from preact/hooks;const App = () => { const [number, setNumber] = useState(0); const increment = () => setNumber(count + 1); const decrement = () => setNumber((currentNumber) =>currentNumber- 1); return ( <div> <p>Number: {Number}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> )};
怎样选取？
在选取Preact和React时，需要思虑多个原因，包含项目需要、性能需求、研发体验、社区支持和生态系统等：
项目需要：倘若你的项目需要构建轻量级、高性能的应用，尤其是针对移动端或低带宽环境，Preact可能是一个更好的选取。Preact的体积更小，渲染性能更好，适用于这些场景。然而，倘若你的项目需要更丰富的功能和更大的社区支持，React可能更适合。
性能需求：Preact在性能方面一般优于React，尤其是在大型应用中。Preact的代码库较小，内存占用和执行时间更少，因此呢在某些状况下可能更快。倘若你对性能有严格需求，Preact可能是一个更好的选取。
研发体验：倘若你已然熟练React，那样运用Preact将非常容易，由于Preact与React的API在很大程度上是兼容的。这寓意着你能够利用你在React中学到的知识和经验来研发Preact应用。另外，Preact的社区正在稳定增长，显现了许多示例、文档和工具，这亦将加强你的研发体验。
社区支持和生态系统：React做为最受欢迎的JavaScript库之一，持有庞大的社区和丰富的生态系统。这寓意着你能够找到海量的教程、库、插件和社区支持来帮忙你处理问题。相比之下，Preact的社区虽然亦在增长，但相对较小。然而，Preact的社区仍然非常活跃，并且正在持续发展壮大。
往期举荐
盘点 2023 年前端大事件
Vue 3 将推出无虚拟DOM版，更快了！
Vue 发布十年了！你晓得我这十年是怎么过的吗？
相见恨晚的前端研发利器
这个浏览器，想必仅有研发者才会用吧？
2023年哪个前端框架用的最多?用数据述话
字节跳动 Rspack 家族再添一员，整家族一览！
React 19 即将推出的 4 个全新 Hooks，很实用！
都 2024 年了，该怎样搭建新的 React 项目？
| 
发表于 2024-10-10 05:11:58