前言
在过去的一个多月中，为了能够更深入的学习，使用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源码你就知道它在干什么了。一定要注意的是：框架里任何一行代码都是为了解决某一个或者多个问题而存在的，当你脑海中不能将这些问题和代码联系在一起的时候，你他吗根本就是在读天书。所以，选择一个代码较少的先读着，理解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套路学习版本」
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
