司徒正美：为什么类 React 框架层出不穷？

点击上方“程序员黑叔”，选择“置顶或者星标”

你的关注意义重大！

文/司徒正美

来源：知乎

阅读本文需要 3分钟

前言

一、讲述

这其实涉及一个难度问题，在angular里面自带了一个HTML parser与JS parser。 而在React里面， JSX parser已经被babel 插件外置了。因此少了最难的parser部分。

其次是 先行者的研究，我们可以做大量的裁减。

虽然React的库很大，但是它一半的代码都在事件系统中，而我们可以一个简单的事件系统（不用支持旧式IE，就不用管focus, blur, select,mouseenter,mouserleave, wheel,input这些令人头痛的兼容问题）。代码量变成1.2~1.5万行了。

然后我们发现React还有四分之一是各种友好的错误提示，删掉这些用于生产环境的代码后，大概不到1万行。

React仓库把每个模块划分得很细，因此这些我们不想用的东西可以轻松忽略掉。然后我们看它最核心的虚拟DOM diff算法，打从最开始的virtual-dom库开始，人们就发现更快的diff优化方案，原来官方做的东西是不最优的（fb方面其实更关注于其平台覆盖度，让它可以在各种平台上运行，而不是DOM环境 ）。于是大家在virtual-dom上面的改动才会更来劲。diff算法基本上把字符串算法那套挪过来了，比如最短编辑长度距离，最长上升序列。。。

现在市面上有上百个虚拟DOM库，我当时集中研究其中前十名：

包含后来vue2有diff算法，也只是从这上百个虚拟DOM库中挑一个不怎么起眼的snabbdom  vue2.0，或者能对接起来比较轻松的（事实上vue作者也没有对snabbdom 大改动）。snabbdom  只是上面的kivi的一个改进版。

这些迷你虚拟DOM库体积很少，大家想抄袭也轻松。

难点是将context， 生命周期， 真实DOM的最小化更新策略糅入虚拟DOM库中。

这个也有先行者，国外是preact,  国内是react-lite与我的anu。目前能紧跟React16步伐的也只有我的anu吧。这些库体积都很少， 一些迷你react 也基本在这几个库做一些删减，不过那就是连玩具也不如的库了，他们基本上只支持HTML，不支持SVG，没有批量更新，一些生命周期钩子的内部优化都略掉了，许多第三方React也用不了。

不过这些作者也从中学到一些东西，可以做些一些简单的状态管理库周边，路由器周边，或UI库周边。我们可以基本上认为，他们的库能跑得通 迷你React, 也能跑得了官方React。 

由于有了迷你React，我们才可以在小程序拮据的体积限制上塞下『React』，迷你vue的情况也一样。小程序是迷你库的天堂。在移动端，PC端，大家没有什么理由不用官方的。但小程序给了他们存在意义，并且有业务驱动他们在不断进化。

二、总结

1.React有bable神器，将最复杂的jsx parser外置了

2.React的虚拟DOM算法吹得太神，被人打脸后，许多人喜极而狂地推出自己的虚拟DOM库， 这直接导致了 inferno(性能最快的虚拟DOM库)的作者进入React团队。国内也有了许多抄袭的目标。

3.功能完整的迷你React， 也有几个极顶的标目可以供大家学习，不用埋头看复杂无比的官方React，抄了那几个就可以推出『自己的迷你React库』

4.面试上相关原理问得多，培训班就会有老师推出相关的视频，教大家写『自己的迷你React库』。

三、答疑解惑(必读)

亲，点这涨工资