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算法最难的地方。对应的实际场景就是如下：

  

  

  

  

  

  

  ....

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

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

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

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

首先，阅读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套路学习版本」