前言

在过去的一个多月中，为了能够更深入的学习，使用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源码学习开胃菜，速度上来说非常不错。

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

这部分内容给想学习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套路学习版本」

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!