閱讀React16源碼有感

自從React的內部實現改成Fiber以後，源碼就變得至關晦澀，啃了一個月以後，稍微總結的了一點經驗、閱讀時的誤區、以及爲何不少次看不下的緣由，可是我相信，這些經驗能夠成爲我未來閱讀源碼的過程當中最大的武器。我相信閱讀源碼並從中提煉知識是最好的學習方式。

1. 模塊化閱讀，不能在某個分支下越走越深，丟失全局觀

這一點尤爲是對React16而言，由於整個調用棧會很是的深，深到超過你的記憶和理解能力。你須要去先了解React16的設計，用法，而後利用函數名、文件名、模塊劃分，去理解當前這個函數屬於整個流程的那個階段。 就React而言，從初始話建立ReactElement、ReactRoot、FiberRoot、rootFiber這些過程，再到scheduler各類任務的過程、再到經過fiber進行的reconciler的過程，最後到commit，環環相扣，若是你一開始的閱讀是從頭看到尾，你可能會暈頭轉向、而後說這坑爹啊。 這些流程、設計理念每每在官方文檔中會涉及、或者上網看一些大牛的文章，先了解整個模塊劃分、流程是很是有意義的，這個年代了，大把的知識分享沒理由很差好利用對吧。

2. 從官方contribution文檔中得到幫助

咱們生產開發的版本和框架開發者的設計是不同的，咱們用的每每是打包以後的結果，不信你能夠試試從React的master分支clone一個倉庫下來看看。 contribution文檔最大的做用是，框架開發者們告訴你怎麼測試、調試、打包這個框架。他們會告訴怎麼打包有sourceMap、怎麼打包最快、測試哪一個功能能夠用哪一個demo，這無疑會讓我省下大量精力去熟悉項目配置、寫demo測試等等。甚至會有閱讀指導？

3. 若是能夠的話，從模塊開始突破

這一點在webpack源碼中就很是的明顯了，webpack的plugin機制基於Tapable， 而Tapable整個模塊都是基於事件的，若是你不瞭解Tapable，你只會發現webpack的源碼在莫名其妙的跳轉。 當你從React中找到獨立的模塊時，別想了，猛攻就是。

4. 本身給本身提問

有時候，咱們會在閱讀的過程之中丟失閱讀的意義，爲了閱讀而閱讀，不只消磨耐心和鬥志，也會讓你毫無收穫。 提問題有幾種方式

1. 閱讀以前給本身提個問題，而後根據這個問題去調試、閱讀。或者能夠在網上搜相關的面試題、而後在源碼中本身找到答案。
2. 閱讀的時候要多問本身，爲何做者會這樣寫，舉個例子，嘗試從性能角度考慮，由於做爲框架、不少細微的性能優化都會考慮

5. 作好長期戰鬥的過程，由於會遇到不少不熟悉的知識

由於框架開發和應用層開發不同，這會讓你遇到不少不熟悉的領域，須要你去另外研究，再回來一遍。 在React中看到的位運算、鏈表操做在前端常規開發中都比較少遇到，若是你發現了你是由於不熟悉某些知識而看不懂，那麼恭喜你了，你發現本身的知識盲區了，趕忙去補一補。

6. 不要依賴全局搜索

我一貫喜歡研究提高開發效率的工具，webstorm的各類功能固然也用得溜，可是對於一個新項目，太過依賴全局搜索，每每會丟失對模塊的認識，有時候手動找找文件，多看看目錄名和文件名、熟悉一下函數位置，都能提升你對項目的熟悉度。

7. 學會猜想

若是讓我總結，我會以爲閱讀源碼就是一個猜想與驗證的過程。 咱們能夠從變量名、模塊名中猜想這個模塊/函數的功能。猜是很是重要的，帶着咱們預測的思路去看代碼，哪怕是錯的思路，這也能夠集中本身的注意力，而後在發現錯誤的時候更深入的理解。

8. 你要很是熟悉這個庫

這一點可能老生常談了。但的確很是重要。 若是是一個比較小型的庫，你大能夠先寫個demo，瞭解功能，而後開始閱讀源碼，順便利用demo斷點調試一下。可是對於稍大一點的庫，我建議仍是先從api、設計理念、這個庫想解決的問題這幾點入手。並且要熟讀官方文檔。 固然，與其主動熟悉某個倉庫，還不如直接從平時生產中經常使用的工具庫中選一個來閱讀，既能提升生產和debug的效率，又能提升知識的深度，何樂而不爲。

9. 倉庫與代碼註釋、流程圖

當準備閱讀源碼就是一場持久戰，在閱讀的過程當中，可能會有大量重複或者不理解的地方，若是不理解大能夠標記個TODO避免死磕細節。每次看懂的地方也須要註釋，由於頗有可能看到後面忘了前面，註釋不怕囉嗦，就怕不寫。 個人建議是從框架github fork一份，註釋也能夠推送本身的fork倉庫。 此外，當某個模塊看完，或者看得累，建議及時輸出一份流程圖，既能夠用於幫助理解，也能夠用於未來複習。

10. 寫文章輸出

這一點可能不止是在閱讀源碼中須要用到，在任何技術知識的學習，輸出文章用因而最好的學習方法，當你試圖講清一個知識，你會發現本身對知識的漏洞，而且組織文章過程能夠系統規劃整理整個知識脈絡。並且能夠增強印象便於未來複習，看本身文章複習會比上網查一篇來回顧效率高得很是多。 不少知識是須要回顧複習的，你能夠想一想你剛畢業的時候學的理論知識，如今還可否瞭然於胸？