preact

大家好。很高兴再次见到你。我& # 34；前端高级& # 34；我会带大家关注前端前沿，深入前端底层技术。大家一起进步，欢迎大家关注，喜欢，收藏，转发！

前端‬进阶前端高级

前言React以其丰富的特性和功能在IT行业占据主导地位，改变了Web开发的方式。根据2021年Stackoverflow开发者调查，React在构建Web应用最需要的框架中获得了第一名。

不知道大家有没有听说过Preact的框架，就算没听说过Preact，也听说过react。PReact比React多一个p！这个P代表性能，React的高性能版本。

注:Preact本来是CodePen上的一个小项目，用最少的代码实现了react最基本的功能，类似于国内的“两百行实现一个Vue”，然后放到CodePen上供大家欣赏和学习。最后没想到火了，然后作者不断添加新功能。经过测试，我发现性能完全是反应式的。所以最后的名字叫高性能React，也就是性能React！

据说Preact是react构建Web应用程序的一个轻量级替代方案，它被广泛的网站使用，从开源项目到大型跨国公司，包括谷歌。本文将重点介绍PReact和React之间的差异，并阐明这两种技术的优缺点。

1.什么是 Preact？

Preact是一个JaScript库，被认为是react的轻量级替代品，大小只有3kb，支持与React相同的API和ECMAScript。

注:根据官方数据，Gzip压缩后的Preact应该是4.2Kb，而不是宣传的3KB。据说Preact采用向下舍入法。

Preact被设计成可以在带有DOM的浏览器中工作，这也是它如此小巧的原因。

此外，它比其他JaScript框架更快，并且实现了虚拟DOM。GitHub上已经有33K位明星，NPM上的周下载量超过2270934次，足以证明Preact的受欢迎程度。

2.为什么选择 Preact？

如果开发人员关心应用程序的性能、速度和大小，Preact是最佳选择。它主要用于构建渐进式网络应用程序。例如，优步已经将其PWA转换为Preact，以保持应用程序的超轻量级和高性能。

此外，Preact是一个非常小的库，不需要额外的学习成本。它与React的相似性和兼容性使它成为一个易于使用的库，可以与现有的React包一起使用，带有一些别名，即使用preact/compat。

3.Preact优缺点3.1 Preact的优点快速且轻量：Preact 大小仅为 3.5 kb，渲染速度非常快，使其成为构建高性能轻量级应用程序的最佳框架。React生态兼容：它与 React API 高度兼容，并支持相同的 ECMAScript，使其足够高效地与现有的 React 项目集成以增强性能。大型完善生态：生态完善，学习曲线简单。 Preact有一个由许多贡献者组成的大型社区。随时准备修复错误并提供问题的解决方案。专用 CLI：Preact 具有强大的 CLI，可帮助开发人员在几秒钟内构建 PWA，而无需配置 WebPack、babel、Terser 等。Preact/compat：它有一个名为 preact/compat 的包来提供 100% 的兼容性。 它允许开发人员将 React 库与 Preact 一起使用，以便在不对工作流和代码库进行任何更改的情况下编写 ReactDOM 代码。3.2 Preact 的缺点Mimics React：Preact 是作为 React 的轻量级替代品而开发的。 因此，通过该库进行的大部分开发都模仿了 React，而不是创新应用程序开发。使用附加库：使用 Preact 时，有必要使用附加库，如 preact/compat、preact/test-utils 等，以在 Preact 和基于 React 的 npm 包之间建立连接。 这使得项目变得庞大而缓慢。没有综合事件处理：Preact 基于浏览器 API，不支持综合事件处理，这会影响应用程序性能并在使用 React 进行开发和 Preact 进行生产时导致维护问题。4.Preact vs. React开发者数据？

Github数据显示，React的恒星达到了202K，而Preact是33K，相差一个数量级。但考虑到React项目已经成立11年，而Preact项目才成立7年，能有这样的热度实属不易！

从过去一年的下载数据来看，React和Preact都处于稳步上升的趋势，但总体来看并不明显。

从最近一周的下载数据来看，React达到了16359457，Preact达到了2270934。与star数据相比，React的性能是Preact的7.2倍。

不过开发者数据只能在一定程度上反映项目的受欢迎程度，但综合考虑项目时间、受欢迎程度等因素，Preact整体还是很不错的。如果您真的关心应用程序的性能、速度和大小，Preact是一个值得尝试的解决方案。

5.Preact使用函数组件

功能组件是接收props作为第一个参数的普通函数。函数名必须以大写字母开头，才能在JSX使用。

函数my component(props){ return & lt；div & gt我的名字是{props.name}。& lt/div & gt；；}//使用组件constapp =

类Clock扩展了组件{ constructor(){ super()；this . state = { time:date . now()}；}//生命周期:组件创建调用componentidmount(){//updatetimeeverysecond this。timer = setinterval(()= > { this . setstate({ time:date . now()})；}, 1000);}//生命周期:组件卸载调用componentwillunmount(){//不可渲染时停止clearinterval (this。定时器)；} render(){ let time = new Date(this . state . time)。toLocaleTimeString()；return & ltspan & gt{ time } & lt/span&gt。；}}Hooks使用functioncounter () {const [value，setvalue]= use state(0)；//use state const increment = use callback(()= & gt；{ setValue(值+1)；}，[值])；return(& lt；div & gt& ltp & gt计数器:{ value } & lt/p & gt；& ltbutton onClick = { increment } & gt增量& lt/button & gt；& lt/div & gt；);}Signal使用import { signal } from & # 34@ preact/signals & # 34；；常量计数=信号(0)；//通过访问读取信号的值。value:console . log(count . value)；// 0//更新一个信号的值:count . value+= 1；//信号& # 39；的值已更改:console . log(count . value)；//1 preact的用法和react基本类似，简单易用，成本低。这点你可以放心。更多用途请参考文末信息。

6.本文总结

本文主要介绍了react的轻量级优秀解决方案Preact，并实现了与React高度兼容的虚拟DOM。本文从四个维度入手:什么是Preact，为什么选择Preact，Preact的优缺点，Preact与react的开发者数据。同时给出了Preact学习的代码示例。

因为还没来得及在生产环境中部署和使用Preact，所以只是做了一个基本的介绍，但是文末的参考资料提供了很多学习的优秀文档，有兴趣的可以自己看一下。如果你有任何问题，请在评论区留言。

参考资料

https://hacker noon . com/major-differences-between-preact-and-react-你应该使用哪一个

https://preactjs.com/

https://juejin.cn/post/7163528906539008030

https://preactjs.com/guide/v10/signals

https://daily . dev/blog/preact-a-lightweight-alternative-to-react

https://blog . Seth worker . com/se-users-data-with-a light-alternative-to-react/