点击上方“程序员黑叔”,选择“置顶或者星标”
你的关注意义重大!
文/司徒正美
来源:知乎
阅读本文需要 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库』。
三、答疑解惑(必读)
亲,点这涨工资