前言
不知大家有没有听过Preact这个框架，就算没听过Preact那也应该听过React吧？
一字之差，preact比react多了个p！（听起来咋不像啥好话呢）
这个P代表的是 Performance，高性能版React的意思。Preact一开始是CodePen上的一个小项目，有点类似于咱们国内常见的《三百行代码带你实现个React》这类文章，用最少的代码实现了React的最基本功能，然后放到CodePen上供大家敬仰学习。
当然这是很多年前的事了，那时候这种东西很容易火，想想N年前你看过的第一篇《三百行实现个Vue》、《三百行实现个React》之类的文章是不是竞争对手很少、很容易引发大量的关注度。不过现在不行了，太卷！这类文章隔三差五的就能看到一篇，同质化严重，导致大家都有点审美疲劳了。
但在那个年代Preact就是这么火起来的，三百行实现了个React引发大量关注度之后，作者觉得自己做的这玩意好像还挺不错的哈！于是开始继续完善，完善后拿去一测试：性能简直完爆React呀！我这玩意不仅体积比你小、性能还比你高。就这样作者开始有些膨胀了、开始飘了！
那我就给这个框架起个名叫
Preact吧！
Performance版的React！
Preact 简介
打开Preact官网，映入眼帘的便是它的最大卖点：
只有3KB大小、并且与React拥有相同的API。真的只有3KB么？虚拟DOM、Diff算法、类组件、Hooks… 这些就算实现的再怎么巧妙也需要很多代码才行吧？我们直接用Vite来创建一个Preact项目来试下：
npm create vite
如果屏幕前的你用的是VSCode这个编辑器的话，可以安装一下Import Cost这个插件：
安装好之后我们来看一下主文件(main.jsx)：
卧槽？gizpped真的只有3.几K！不过这算法有点鸡贼啊，来了个向下取整：
这让我想起了最近非常火的Turbopack比Vite快十倍的宣传口号，遭尤大怒怼：1k 组件的案例下有数字的四舍五入问题，Turbopack 的 15ms 被向下取整为 0.01s，而到了 Vite 这里 87ms 被向上取整为 0.09s。这把本来接近 6 倍的差距扩大到了 10 倍。
不过即使这样，3.8K依然是一个很惊人的成就。是不是只是render这个函数就占了3.8K啊？我们再引点东西试试：
难以置信！引了这么多hooks居然只多加了0.1K！我还是不太相信用0.1K的代码就能实现出React Hooks来，肯定是用了什么特殊的算法专门针对了这一场景做了优化，我们按照官网的写法来重新引一下：
这回体积明显增大了不少：
不过咋感觉自己跟个杠精似的呢