看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目錄下一些重要代碼的理解。