不知道大家有没有听过Preact框架，就算没听过Preact，也应该听过React吧？就一字之差，preact比react多了一个p！（听起来不是什么好词）这个P代表Performance，意思是React的高性能版本。Preact最初是CodePen上的一个小项目。有点类似于国内常见的《三百行代码带你实现个React》之类的文章。它用最少的代码实现了React最基本的功能，然后放到CodePen上供大家学习。当然，这是很多年前的事了。在那个时候，这种东西很容易火起来。想想你N年前读的第一篇文章。真的是竞争者少而且少之又少吗？很容易引起很多人的注意。企业文化但是现在不行，太麻烦了！这种文章时不时就可以看到，同质化严重，让大家有点审美疲劳。但是在那个时代，Preact变得如此流行。在300行实现React引起了很多关注之后，笔者觉得自己做的东西好像还不错！于是开始继续改进，改进后拿来测试：性能简直是惊人的React！我的小工具不仅比你的小，而且它的性能也比你的高。就这样，作者开始膨胀漂浮了！那我就把这个框架命名为Preact吧！响应性能！Preact简介打开Preact的官网，你会看到它最大的卖点：它只有3KB大小，并且拥有与React相同的API。真的只有3KB吗？VirtualDOM、Diffalgorithm、classcomponents、Hooks……这些实现的再巧妙，也需要大量的代码吧？我们直接使用Vite创建一个Preact项目来试试：npmcreatevite如果你使用的是屏幕前的VSCode编辑器，可以安装ImportCost插件：安装完成后，我们来看一下主文件（main.jsx）：该死的？gizpped真的只有3.几K！但是这个算法有点流氓，所以来个四舍五入：这让我想起了最近很火的一句Turbopack比Vite快十倍的广告语，气死我了：在1k组件的情况下，有数字rounded问题是Turbopack的15ms向下取整为0.01s，而Vite的87ms向上取整为0.09s。这将差距从接近6倍扩大到10倍。但即便如此，3.8K仍然是一个了不起的成就。难道只是render函数占用了3.8K？让我们尝试更多：难以置信！引用了那么多hook其实只加了0.1K！我仍然不太相信ReactHooks可以用0.1K的代码实现。一定是用了一些特殊的算法来优化这个场景。我们按照官网背诵一下：这次音量明显增加了很多：但是为什么我感觉自己像个野蛮人？
