查看: 627|回复: 0

[HTML代码] Luy 1.0 :一个React-like轮子的诞生

发表于 2017-10-29 09:25:22
太阳http代理AD
前言

在过去的一个多月中,为了能够更深入的学习,使用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算法最难的地方。对应的实际场景就是如下:
  1. <ReactComponent>
  2. <div key='1'></div>
  3. <div key='2'></div>
  4. <div key='3'></div>
  5. <div key='4'></div>
  6. <div key='5'></div>
  7. <div key='6'></div>
  8. ....
  9. </ReactComponent>
复制代码

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

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

而Luy使用的算法是:vue2源码学习开胃菜,速度上来说非常不错。

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

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

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

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

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

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

@司徒正美 的anujs:一款了不起的mini 化react方案,支持到IE6。代码及其好懂和老练,框架如其签名:javascript魔法师。如果阅读过anujs的朋友,一定也会发现Luy部分代码很像anujs,没错,有很多代码我都直接抄的,因为 @司徒正美 的代码写的真的很好。RubyLouvre/anu,是世界上最接近react官方的产品了。 Inferno.js:另外一款出名的react lite框架,Vdom的速度是最高的,一系列的优化方案非常值得学习 developit/preact:大名鼎鼎的preact,速度快,体积小而著称。gzip完只有3k,不过对react官方的支持其实非常的差。比较搞笑的是,当你支持react的轮子的时候,使用compact功能时,其性能大大下降!(哈哈哈哈哈哈哈哈哈笑死我了) @胡子大哈 :他写的React.js 小书,非常的棒,给予了我造react的最基本知识。 40 行代码内实现一个 React.js: @胡子大哈 实现的作品 snabbdom/snabbdom:其实就是vue的vdom了 preact源码学习(1) - 个人文章 - SegmentFault preact源码学习(2) - 个人文章 - SegmentFault preact源码学习(3) - 个人文章 - SegmentFault preact源码学习(4) - 个人文章 - SegmentFault:这几片文章的作者都是 @司徒正美 ,全面的解析和官方的对比。牛x到了极点。 Build your own React.js · GitBook:一篇外国的文章,看完你基本可以造出一个可以setState的react了 Build Your Own React:第一次渲染:本文也很重要,介绍了react component的几种模式 @程墨Morgan :《深入浅出react和redux》一书非常的实在,我也推荐过很多次了,对我理解react和redux很有帮助.

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

这个框架会有未来吗?

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

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

最后

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



太阳http代理AD
回复

使用道具 举报