1.62亿 (超1.2亿下载量！揭秘2023年前端框架的不凡魅力)

最近清点了2023年度抢手前端框架的npm下载量，发现Preact曾经跻身前五名，年度下载量高达1.23亿。本文就来看看Preact是什么，它和React又有何区别！

Preact是什么？

Preact是一个轻量级的前端库，用于构建用户界面（UI），其性能和React相似，但体积更小，只要大概3KB。Preact具备与React相似的现代API，因此可以视为React的一个极速、轻量级的代替打算。Preact的外围指标是高性能、轻量级和即时消费，其称号中的”P”代表performance（性能）。

Preact并非React的翻版，两者之间存在清楚差异。虽然其中许多差异看似微无余道，但经过preact/compat，可以成功与React的高度兼容。Preact不谋求蕴含React的一切性能，而是努力于坚持其代码的繁复和专一。这种战略防止了不用要的复杂性，使得Preact愈加高效。

Preact的来源

JasonMiller，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已成为一个备受推崇的前端库，为开发者提供了另一种构建高效、现代化用户界面的选用。

PreactvsReact

大小

React性能丰盛，其生态系统中预置了泛滥的成功、性能和函数。但是，这种片面性的代价是相对较大的打包体积。关于那些少量经常使用第三方库或依赖项的运行来说，这或者会造成初始页面加载期间遭到影响。

Preact因其小巧的体积而备受美化，从而在运转时提供了更低的资源占用。它聚焦于外围视图库，仅蕴含如事情处置和差异比拟等基础成功。为了更好地优化性能和内存治理，Preact齐全摒弃了React中的调试性能和其余冗余个性。这种有针对性的设计谋略使得打包后的体积大幅缩小，同时确保了更高效的内存经常使用。

详细来说，React自身大小约6KB，而ReactDOM大小约130KB，紧缩（Gzip）后的大小约为42KB。而Preact的紧缩后的大小仅为4KB。

分解事情

Preact与React在事情系统的成功上有清楚差异：

性能

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运行时更容易发现疑问。

Preact引入了与React相似的Hooks，为治理函数组件的形态和反作用提供了相似的性能。不过，Hooks不是Preact外围的一局部。它们已被分别进去，以坚持主包较小，因此须要独自导入。可以从preact/hooks或preact/compat中导入Hook。

import{useState}from'preact/hooks';constApp=()=>{const[number,setNumber]=useState(0);constincrement=()=>setNumber(count+1);constdecrement=()=>setNumber((currentNumber)=>currentNumber-1);return(<div><p>Number:{Number}</p><buttononClick={increment}>Increment</button><buttononClick={decrement}>Decrement</button></div>)};

如何选用？

在选用Preact和React时，须要思考多个起因，包括名目需求、性能要求、开发体验、社区支持和生态系统等：