摘要：司徒正美的一款了不起的化方案，支持到。行代碼內(nèi)實(shí)現(xiàn)一個(gè)胡子大哈實(shí)現(xiàn)的作品其實(shí)就是的了源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章這幾片文章的作者都是司徒正美，全面的解析和官方的對(duì)比。

在過去的一個(gè)多月中，為了能夠更深入的學(xué)習(xí)，使用React，了解React內(nèi)部算法，數(shù)據(jù)結(jié)構(gòu)，我自己，從零開始寫了一個(gè)玩具框架。

截止今日，終于可以發(fā)布第一個(gè)版本，因?yàn)榫驮谧蛱?，我跑通了之前的一個(gè)小項(xiàng)目。

預(yù)覽地址：動(dòng)態(tài)簡(jiǎn)歷luy版本

倉庫地址：喜歡的給點(diǎn)星星哦～

框架地址：Luy

其實(shí)并不是，我并沒有重新把jsx解析器進(jìn)行造輪子，我用上了官方的解析器去幫助我解析jsx。

在正式開始寫Luy的時(shí)候，還是比較盲目和恐懼的，原因如下

雖然都知道React是基于虛擬DOM來渲染的，但是虛擬DOM到底是什么？怎么運(yùn)作的
React的setState是異步的，這個(gè)我們都知道。但是他的異步和setTimeOut的異步是一樣的嗎？?jī)?nèi)部是不是用setTimeOut實(shí)現(xiàn)的？

react的事件合成系統(tǒng)。在react官方中，幾萬行代碼，有差不多40%左右是用于模擬事件的。這部分內(nèi)容是如何實(shí)現(xiàn)的？為什么這么做呢？

React列表中的key為什么那么重要？虛擬DOM的優(yōu)化策略又是什么？

帶著這些疑問，我要么是去讀源碼，要么去找文章，但是真正弄懂這些知識(shí)，可能還得動(dòng)手自己實(shí)踐一次我才會(huì)感到安心。

雖然說現(xiàn)在React-like的框架一大堆，大家都想做出自己的mini 化方案，但是制造一個(gè)React-like框架還是超級(jí)困難的，可想而知，當(dāng)初FB工程師們?cè)跊]有React的情況下，是如何造出React的，天才。

源碼解析不多，而且不完備：很多號(hào)稱解析React源碼的文章其實(shí)只是非常淺層次的讀一讀，基本上的套路就是，看到哪里的代碼，網(wǎng)上一帖就成了一篇文章了，很多知識(shí)點(diǎn)還是得親自去打斷電調(diào)試React官方版本才能知道。

好的文章往往只專研了一兩個(gè)點(diǎn)，知識(shí)點(diǎn)需要慢慢拼湊：網(wǎng)上不乏好文章的，但是好的文章不可能面面俱到。比如有些人研究setState，有些人研究生命周期函數(shù)，有些人還研究了ref，甚至有些人研究了Vdom。這些知識(shí)點(diǎn)很散亂，非常難以拼湊在一起，基本要花一兩天才能搞懂一個(gè)知識(shí)點(diǎn)。

虛擬dom算法：我說實(shí)話，虛擬DOM的算法其實(shí)并不難，也就是樹的遞歸遍歷，在遍歷的同時(shí)創(chuàng)建和比對(duì)。但是奇妙的就是，市面上有一堆虛擬DOM產(chǎn)品，雖然大致相同，但是在處理某些地方的時(shí)候不一樣，后文會(huì)講。

列表的key：虛擬DOM算法最難的地方。對(duì)應(yīng)的實(shí)際場(chǎng)景就是如下：

  

  

  

  

  

  

  ....

這一個(gè)部分難就難在「更新」上，這也是每一款虛擬DOM最不一樣的地方。

為什么inferno.js這么快？這個(gè)回答里，其實(shí)給出了答案。

而Luy使用的算法是：vue2源碼學(xué)習(xí)開胃菜，速度上來說非常不錯(cuò)。

當(dāng)然我不是吹噓自己的框架有多牛逼，只是實(shí)現(xiàn)了這個(gè)算法還是非常開心的。

首先，閱讀React代碼是最直接的方案，但是因?yàn)閞eact源碼實(shí)在太多了，我們必須另尋出路。有兩個(gè)辦法

閱讀react代碼最初版本（非常的老了...

閱讀市面上比較成熟的react-mini框架的代碼

我選擇了第二種方式，可能會(huì)有人說哎呀，你水平不夠。我承認(rèn)，我水平確實(shí)不行，讀react源碼頭有點(diǎn)痛。

我的方法就是先把東西做出來，然后有了基本思路，再看React源碼你就知道它在干什么了。一定要注意的是：框架里任何一行代碼都是為了解決某一個(gè)或者多個(gè)問題而存在的，當(dāng)你腦海中不能將這些問題和代碼聯(lián)系在一起的時(shí)候，你他嗎根本就是在讀天書。所以，選擇一個(gè)代碼較少的先讀著，理解react的套路。

@司徒正美 的anujs：一款了不起的mini 化react方案，支持到IE6。代碼及其好懂和老練，框架如其簽名：javascript魔法師。如果閱讀過anujs的朋友，一定也會(huì)發(fā)現(xiàn)Luy部分代碼很像anujs，沒錯(cuò)，有很多代碼我都直接抄的，因?yàn)?@司徒正美 的代碼寫的真的很好。RubyLouvre/anu，是世界上最接近react官方的產(chǎn)品了。

Inferno.js：另外一款出名的react lite框架，Vdom的速度是最高的，一系列的優(yōu)化方案非常值得學(xué)習(xí)

developit/preact：大名鼎鼎的preact，速度快，體積小而著稱。gzip完只有3k，不過對(duì)react官方的支持其實(shí)非常的差。比較搞笑的是，當(dāng)你支持react的輪子的時(shí)候，使用compact功能時(shí)，其性能大大下降?。üλ牢伊耍?/p>

@胡子大哈 ：他寫的React.js 小書，非常的棒，給予了我造react的最基本知識(shí)。

40 行代碼內(nèi)實(shí)現(xiàn)一個(gè) React.js： @胡子大哈 實(shí)現(xiàn)的作品

snabbdom/snabbdom：其實(shí)就是vue的vdom了

preact源碼學(xué)習(xí)（1） - 個(gè)人文章 - SegmentFault

preact源碼學(xué)習(xí)（2） - 個(gè)人文章 - SegmentFault

preact源碼學(xué)習(xí)（3） - 個(gè)人文章 - SegmentFault

preact源碼學(xué)習(xí)（4） - 個(gè)人文章 - SegmentFault：這幾片文章的作者都是 @司徒正美 ，全面的解析和官方的對(duì)比。牛x到了極點(diǎn)。

Build your own React.js · GitBook：一篇外國(guó)的文章，看完你基本可以造出一個(gè)可以setState的react了

Build Your Own React：第一次渲染：本文也很重要，介紹了react component的幾種模式

@程墨Morgan ：《深入淺出react和redux》一書非常的實(shí)在，我也推薦過很多次了，對(duì)我理解react和redux很有幫助.

當(dāng)然，還有很多知識(shí)點(diǎn)是通過google得到的，一切來之不易。在讀源碼的過程中，痛苦但是快樂。

這個(gè)項(xiàng)目其實(shí)最初的想法只是學(xué)習(xí)react的內(nèi)部原理，但是一路走來我的想法也改變了，會(huì)盡自己最大的所能，維護(hù)下去，并且跟進(jìn)react官方的變化（說實(shí)話createPortal Luy也是支持的?。?/p>

畢竟，學(xué)習(xí)其實(shí)就是模仿，創(chuàng)造永遠(yuǎn)在模仿的前提下。最近公司準(zhǔn)備上一個(gè)新的小項(xiàng)目，也是我第一個(gè)全權(quán)負(fù)責(zé)的項(xiàng)目，所以我決定上一把我的Luy進(jìn)行試點(diǎn)（好就好在，Luy更換react其實(shí)是無痛的，實(shí)在有什么問題，直接換react上，哈哈哈

代碼在這里，框架地址：Luy，總共加起來目前只有1100+行，不多，可以作為「react套路學(xué)習(xí)版本」