看react原始碼的基本思路

摘要： 每次都信誓旦旦的給自己立下要好好學習react原始碼的flag，結果都是因為某個地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個flag-堅持看完react 原始碼。為了敦促自己，特開設這樣一個專欄來記錄自己的學習歷程，這意味著這個專欄的文章質量並不高，你可以拿來參考參考，...

每次都信誓旦旦的給自己立下要好好學習react原始碼的flag，結果都是因為某個地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個flag-堅持看完react 原始碼。為了敦促自己，特開設這樣一個專欄來記錄自己的學習歷程，這意味著這個專欄的文章質量並不高，你可以拿來參考參考，切莫全信，我不想誤人子弟，後面要是學有所成再考慮產出些好點的文章。 要是發現文章中有什麼不當之處，歡迎批評交流。我看的原始碼版本是16.8.2 。

為了看react原始碼，我查找了不少資料，這裡推薦兩個參考資料，個人覺得寫得不錯。

1. 慕課網一個課的電子書 ，他有個原始碼解析的視訊教程，應該不錯，不過我沒買。
2. 一個知乎專欄 ，寫得很清晰，只不過是15.6.2 的, 在react16 裡面一些方法找不到了。

最初開啟原始碼看我是非常迷茫的，不知道該從哪裡看起，不知道如何看，後來經過一番折騰終於找到了自己看react原始碼的思路，分享出來供參考。

一般看一個開源專案，我會在package.json 中找到main 欄位，從而找到入口，再順藤摸瓜去看，但是react 的原始碼的package.json 中並沒有main 欄位。所以通過這樣找入口的方式行不通。

既然找不到入口那就從熟悉的看，開啟packages 目錄，發現其中有個react 目錄和react-dom目錄是自己比較熟悉的，猜想平時所用的import React from 'react' 以及import ReactDOM from 'react-dom' 應該就是分別匯入的這兩個目錄下邊的東西。初看程式碼發現確實是這樣的，在react 目錄可以找到PureComponent ，Component ，createRef 等常用的東西，在react-dom 中也找到了render 方法。

找到了該看什麼接下來是確定如何看，我嘗試過去用專案裡邊配好的單元測試工具jest 去跑程式碼打斷點，但是後來發現並沒有這種必要，一方面效率不高，另一方面只要分析的沒有太大問題都會按預期走，沒有必要都驗證。所以後面都是直接看程式碼不去跑程式碼驗證了。

總結下看react原始碼的思路。

1. 從熟悉的看，熟悉的往往也是比較重要的。
2. 不必跑程式碼驗證，跑程式碼會打斷思路，而且效率比較低。
3. 挑重要的看，比如Component ，ReactElement ，render 方法等，比較新的像hooks 就可以先不看。
4. 不必糾結細節，有些看不懂的地方可以先跳過。

下一篇文章將介紹我對react目錄下一些重要程式碼的理解。