React源碼解析-從頭寫一個React的難點與思路

MayReact發佈了~看看這是否是你想作的重寫React~

https://github.com/sven36/MayReact

---------------------------------------------------------------------------------------------------------------------

2017-12-6更新：

這麼長時間居然有好多人看過，還有幾個小夥伴給個人github幾個start，心中甚是惶恐，擔憂誤人子弟，便再更新本身的一些見解。

 

言歸正傳：其實當時個人水準應當還算能夠~畢竟看了不少不少書~  不過對React的理解仍是有些勉強了，當時寫這個LittleReact算是照貓畫虎吧，跟着斷點一點一點寫下來了的，因此只是描摹了一些，不少地方都沒有思考過；

雖然努力不會白費，但這樣寫一遍下來對React的理解我估計撐死也就三成；

 

若是你工做比較穩定，沒那麼着急~那就這麼來：真正的本身實現一個React，先學會karma  rollup這兩個工具karma是用來作單元測試的，rollup是用來打包代碼的；把preact(迷你版react),react,anu(司徒正美先生寫的一個類react框架很棒的),下載到本身本地，react的單元測試是用的facebook本身的jest先不用管~，先看preact這個庫比較簡單，而後本身一點點寫，寫一部分而後就跑跑單元測試（單元測試這個三個框架都有，本身一點一點寫類似的單元測試）；過程當中必定要本身寫，把React對應的api當成黑盒子本身

實現本身的邏輯，實在不知道怎麼寫再看看別人怎麼寫的，這個過程會比較漫長，不過你確定會收穫滿滿~我如今就在這麼作~在這給你安利下個人  MayReact    https://github.com/sven36/MayReact

最後的效果就是你會寫一個能在生產環境使用的React~由於你最終會把全部的單元測試都跑一遍~ 再以後就是一樣的思路寫寫react-redux,react-router,那時再使用React  如烹小鮮爾~（我目前還在寫React之中，這些都完成以後我打算寫寫webpack和babel了~）

路漫漫其修遠兮~願你我都能孜孜以求~

 

 

----------------------------------------------------------------------------------------------------------------------------2333的分割線~~如下爲原文就不修改了算是對本身的中二一種記念吧~---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前言：最近一直在看React源碼，看了幾天總有霧裏觀花之感；便想着本身從頭寫一遍，這幾天基本上寫了個大概了；

React的VirtualDOM,DOM diff,生命週期管理，單向數據流動等等都具有了；

固然也省略了很是多的細節和檢查，事件系統和CallBackQuenue,PoolClass等都沒有~（暫時DOM diff不太全，我再想一想怎麼寫更好）；

不過這樣足夠理解React了，並且React剩下的部分看看就基本知道做用了；

代碼我已經上傳到GitHub，地址是：https://github.com/sven36/LittleReact

 

 

 

那麼言歸正傳：說一說我我的感受其中比較可貴地方和一些思路；（我使用的是React15.3版本）

首先：React如今已經很是龐大了，我當初本想多寫幾篇一點一點介紹的，不過我發現即便寫了光看的話確定看不明白的，最好的方法只能是本身寫一遍；

第二點：必需要首先弄懂Transition事務模塊；

Transition模塊：如今React絕大部分模塊都須要Transition觸發的，這個是一個包裹函數，構造函數需原型繼承Transaction，或原型方法逐個賦值。且getTransactionWrappers方法用於添加前置鉤子與後置鉤子；reinitializeTransaction方法在初始化時調用，用於清空前、後置鉤子；perform方法實際執行method函數、及先後鉤子。（看不懂能夠去跑一跑個人Git上的示例）

第三點：ReactElement以及ReactComponent；傳入的參數先轉化爲ReactElement，而後根據不一樣的node類型轉換爲不一樣的ReactComponent;

第四點:ReactComponent的遞歸渲染和ReactClass的原型混入傳入的參數，在遞歸渲染時原型調用（這個我有些說不明白），我是調試React的運行過程，看了十來遍看明白的~~

第五點：紙上得來終覺淺，絕知此事要躬行~~

 

如圖：絕大部分代碼都加上註釋了，想本身寫一寫的能夠參照一下；

最後附上個人參照資料，也深深感謝這兩位做者：

http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_two/

http://schifred.iteye.com/category/368891