Luy 1.0 :一个React-like轮子的诞生

Luy 1.0 :一个React-like轮子的诞生

方正方正

前言

在过去的一个多月中,为了能够更深入的学习,使用React,了解React内部算法,数据结构,我自己,从零开始写了一个玩具框架。


截止今日,终于可以发布第一个版本,因为就在昨天,我跑通了之前的一个小项目。

预览地址:动态简历luy版本

仓库地址:喜欢的给点星星哦~


框架地址:Luy


真的从零开始吗?

其实并不是,我并没有重新把jsx解析器进行造轮子,我用上了官方的解析器去帮助我解析jsx。


在正式开始写Luy的时候,还是比较盲目和恐惧的,原因如下

  • 虽然都知道React是基于虚拟DOM来渲染的,但是虚拟DOM到底是什么?怎么运作的
  • React的setState是异步的,这个我们都知道。但是他的异步和setTimeOut的异步是一样的吗?内部是不是用setTimeOut实现的?
  • react的事件合成系统。在react官方中,几万行代码,有差不多40%左右是用于模拟事件的。这部分内容是如何实现的?为什么这么做呢?
  • React列表中的key为什么那么重要?虚拟DOM的优化策略又是什么?


带着这些疑问,我要么是去读源码,要么去找文章,但是真正弄懂这些知识,可能还得动手自己实践一次我才会感到安心。


制造这个玩具框架碰到了很多问题吗?

虽然说现在React-like的框架一大堆,大家都想做出自己的mini 化方案,但是制造一个React-like框架还是超级困难的,可想而知,当初FB工程师们在没有React的情况下,是如何造出React的,天才。


  • 源码解析不多,而且不完备:很多号称解析React源码的文章其实只是非常浅层次的读一读,基本上的套路就是,看到哪里的代码,网上一帖就成了一篇文章了,很多知识点还是得亲自去打断电调试React官方版本才能知道。
  • 好的文章往往只专研了一两个点,知识点需要慢慢拼凑:网上不乏好文章的,但是好的文章不可能面面俱到。比如有些人研究setState,有些人研究生命周期函数,有些人还研究了ref,甚至有些人研究了Vdom。这些知识点很散乱,非常难以拼凑在一起,基本要花一两天才能搞懂一个知识点。
  • 虚拟dom算法:我说实话,虚拟DOM的算法其实并不难,也就是树的递归遍历,在遍历的同时创建和比对。但是奇妙的就是,市面上有一堆虚拟DOM产品,虽然大致相同,但是在处理某些地方的时候不一样,后文会讲。
  • 列表的key:虚拟DOM算法最难的地方。对应的实际场景就是如下:
<ReactComponent>
  <div key='1'></div>
  <div key='2'></div>
  <div key='3'></div>
  <div key='4'></div>
  <div key='5'></div>
  <div key='6'></div>
  ....
</ReactComponent>

这一个部分难就难在「更新」上,这也是每一款虚拟DOM最不一样的地方。


为什么inferno.js这么快?这个回答里,其实给出了答案。


而Luy使用的算法是:vue2源码学习开胃菜--snabbdom源码学习(二) - stein's前端之路 - SegmentFault,速度上来说非常不错。

可以看到,官方的React出奇的反应迟钝,哈哈哈


当然我不是吹嘘自己的框架有多牛逼,只是实现了这个算法还是非常开心的。


这部分内容给想学习React源码的朋友们

首先,阅读React代码是最直接的方案,但是因为react源码实在太多了,我们必须另寻出路。有两个办法

  1. 阅读react代码最初版本(非常的老了...
  2. 阅读市面上比较成熟的react-mini框架的代码

我选择了第二种方式,可能会有人说哎呀,你水平不够。我承认,我水平确实不行,读react源码头有点痛。


我的方法就是先把东西做出来,然后有了基本思路,再看React源码你就知道它在干什么了。一定要注意的是:框架里任何一行代码都是为了解决某一个或者多个问题而存在的,当你脑海中不能将这些问题和代码联系在一起的时候,你他吗根本就是在读天书。所以,选择一个代码较少的先读着,理解react的套路。



当然,还有很多知识点是通过google得到的,一切来之不易。在读源码的过程中,痛苦但是快乐。



这个框架会有未来吗?

这个项目其实最初的想法只是学习react的内部原理,但是一路走来我的想法也改变了,会尽自己最大的所能,维护下去,并且跟进react官方的变化(说实话createPortal Luy也是支持的!)


毕竟,学习其实就是模仿,创造永远在模仿的前提下。最近公司准备上一个新的小项目,也是我第一个全权负责的项目,所以我决定上一把我的Luy进行试点(好就好在,Luy更换react其实是无痛的,实在有什么问题,直接换react上,哈哈哈



最后

代码在这里,框架地址:Luy,总共加起来目前只有1100+行,不多,可以作为「react套路学习版本」


@vczh 说过一些让我震撼的话:


对于一个喜欢编程的年轻人来说,这三点必须铭记于心

文章被以下专栏收录
9 条评论