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

时间 2019-11-08

标签 luy 1.0 一个 react 轮子诞生栏目 React 繁體版

原文原文链接

前言

在过去的一个多月中，为了可以更深刻的学习，使用React，了解React内部算法，数据结构，我本身，从零开始写了一个玩具框架。javascript

截止今日，终于能够发布第一个版本，由于就在昨天，我跑通了以前的一个小项目。html

预览地址：动态简历luy版本
仓库地址：喜欢的给点星星哦～
框架地址：Luy

真的从零开始吗？

其实并非，我并无从新把jsx解析器进行造轮子，我用上了官方的解析器去帮助我解析jsx。vue

在正式开始写Luy的时候，仍是比较盲目和恐惧的，缘由以下java

虽然都知道React是基于虚拟DOM来渲染的，可是虚拟DOM究竟是什么？怎么运做的
React的setState是异步的，这个咱们都知道。可是他的异步和setTimeOut的异步是同样的吗？内部是否是用setTimeOut实现的？
react的事件合成系统。在react官方中，几万行代码，有差很少40%左右是用于模拟事件的。这部份内容是如何实现的？为何这么作呢？
React列表中的key为何那么重要？虚拟DOM的优化策略又是什么？

带着这些疑问，我要么是去读源码，要么去找文章，可是真正弄懂这些知识，可能还得动手本身实践一次我才会感到安心。react

制造这个玩具框架碰到了不少问题吗？

虽说如今React-like的框架一大堆，你们都想作出本身的mini 化方案，可是制造一个React-like框架仍是超级困难的，可想而知，当初FB工程师们在没有React的状况下，是如何造出React的，天才。git

源码解析很少，并且不完备：不少号称解析React源码的文章其实只是很是浅层次的读一读，基本上的套路就是，看到哪里的代码，网上一帖就成了一篇文章了，不少知识点仍是得亲自去打断电调试React官方版本才能知道。github

好的文章每每只专研了一两个点，知识点须要慢慢拼凑：网上不乏好文章的，可是好的文章不可能面面俱到。好比有些人研究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最不同的地方。redux

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

而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套路学习版本」