資訊專欄INFORMATION COLUMN
摘要：最初打開源碼看我是非常迷茫的，不知道該從哪里看起，不知道如何看，后來經(jīng)過一番折騰終于找到了自己看源碼的思路，分享出來供參考。總結(jié)下看源碼的思路。不必跑代碼驗(yàn)證，跑代碼會(huì)打斷思路，而且效率比較低。
每次都信誓旦旦的給自己立下要好好學(xué)習(xí)react源碼的flag，結(jié)果都是因?yàn)槟硞€(gè)地方卡住了，或是其他原因沒看多少就放棄了。這次又給自己立個(gè)flag-堅(jiān)持看完react源碼。為了敦促自己，特開設(shè)這樣一個(gè)專欄來記錄自己的學(xué)習(xí)歷程，這意味著這個(gè)專欄的文章質(zhì)量并不高，你可以拿來參考參考，切莫全信，我不想誤人子弟，后面要是學(xué)有所成再考慮產(chǎn)出些好點(diǎn)的文章。 要是發(fā)現(xiàn)文章中有什么不當(dāng)之處，歡迎批評交流。我看的源碼版本是16.8.2。
為了看react源碼，我查找了不少資料，這里推薦兩個(gè)參考資料，個(gè)人覺得寫得不錯(cuò)。
慕課網(wǎng)一個(gè)課的電子書，他有個(gè)源碼解析的視頻教程，應(yīng)該不錯(cuò)，不過我沒買。
一個(gè)知乎專欄，寫得很清晰，只不過是15.6.2的, 在react16里面一些方法找不到了。
最初打開源碼看我是非常迷茫的，不知道該從哪里看起，不知道如何看，后來經(jīng)過一番折騰終于找到了自己看react源碼的思路，分享出來供參考。
一般看一個(gè)開源項(xiàng)目，我會(huì)在package.json中找到main字段，從而找到入口，再順藤摸瓜去看，但是react的源碼的package.json中并沒有main字段。所以通過這樣找入口的方式行不通。
既然找不到入口那就從熟悉的看，打開packages目錄，發(fā)現(xiàn)其中有個(gè)react目錄和react-dom目錄是自己比較熟悉的，猜想平時(shí)所用的import React from "react"以及import ReactDOM from "react-dom"應(yīng)該就是分別導(dǎo)入的這兩個(gè)目錄下邊的東西。初看代碼發(fā)現(xiàn)確實(shí)是這樣的，在react目錄可以找到PureComponent，Component，createRef等常用的東西，在react-dom中也找到了render方法。
找到了該看什么接下來是確定如何看，我嘗試過去用項(xiàng)目里邊配好的單元測試工具jest去跑代碼打斷點(diǎn)，但是后來發(fā)現(xiàn)并沒有這種必要，一方面效率不高，另一方面只要分析的沒有太大問題都會(huì)按預(yù)期走，沒有必要都驗(yàn)證。所以后面都是直接看代碼不去跑代碼驗(yàn)證了。
總結(jié)下看react源碼的思路。
從熟悉的看，熟悉的往往也是比較重要的。
不必跑代碼驗(yàn)證，跑代碼會(huì)打斷思路，而且效率比較低。
挑重要的看，比如Component，ReactElement，render方法等，比較新的像hooks就可以先不看。
不必糾結(jié)細(xì)節(jié)，有些看不懂的地方可以先跳過。
下一篇文章將介紹我對react目錄下一些重要代碼的理解。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103287.html
摘要：精讀原文介紹了學(xué)習(xí)源碼的兩個(gè)技巧，并利用實(shí)例說明了源碼學(xué)習(xí)過程中可以學(xué)到許多周邊知識(shí)，都讓我們受益匪淺。討論地址是精讀源碼學(xué)習(xí)如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。 1. 引言 javascript-knowledge-reading-source-code 這篇文章介紹了閱讀源碼的重要性，精讀系列也已有八期源碼系列文章，分別是： 精讀《Immer.js》源...
摘要：下面我們介紹一種全新的處理思路，這種思路在小程序運(yùn)行期間和真正的幾無區(qū)別，不會(huì)改變?nèi)魏未a語義，表達(dá)式只會(huì)被處理為方法調(diào)用，實(shí)際運(yùn)行的時(shí)候就是普通對象，最終通過其他方式渲染出小程序視圖。最終渲染出小程序視圖。 React社區(qū)一直在探尋使用React語法開發(fā)小程序的方式，其中比較著名的項(xiàng)目有Taro，nanachi。而使用React語法開發(fā)小程序的難點(diǎn)主要就是在JSX語法上，JSX本質(zhì)上...
摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實(shí)際情況，做出的未來一到兩年的規(guī)劃。在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請，基本上是阿里的但是我知道我菜。。 寫在最前 本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實(shí)際情況，做出的未來一到兩年的規(guī)劃。以及本次社招...
摘要：我們先來看下這個(gè)函數(shù)的一些神奇用法對于上述代碼，也就是函數(shù)來說返回值是。不管你第二個(gè)參數(shù)的函數(shù)返回值是幾維嵌套數(shù)組，函數(shù)都能幫你攤平到一維數(shù)組，并且每次遍歷后返回的數(shù)組中的元素個(gè)數(shù)代表了同一個(gè)節(jié)點(diǎn)需要復(fù)制幾次。這是我的 React 源碼解讀課的第一篇文章，首先來說說為啥要寫這個(gè)系列文章： 現(xiàn)在工作中基本都用 React 了，由此想了解下內(nèi)部原理 市面上 Vue 的源碼解讀數(shù)不勝數(shù)，但是反觀...
摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都壓縮成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對 React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...
閱讀 3217·2021-11-08 13:18
閱讀 1368·2021-10-09 09:57
閱讀 1198·2021-09-22 15:33
閱讀 4007·2021-08-17 10:12
閱讀 5086·2021-08-16 11:02
閱讀 2697·2019-08-30 10:56
閱讀 981·2019-08-29 18:31
閱讀 3267·2019-08-29 16:30
