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

前言

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

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

真的从零开始吗?

其实并不是,我并没有重新把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源码学习开胃菜,速度上来说非常不错。

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

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

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

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

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

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

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

这个框架会有未来吗?

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

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

最后

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

    原文作者:小雅
    原文地址: https://segmentfault.com/a/1190000011594858
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞