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算法最難的地方。對應的實際場景就是以下：

<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套路學習版本」