react源碼解析4.源碼目錄結(jié)構(gòu)和調(diào)試
視頻課程(高效學(xué)習(xí)):進(jìn)入課程
課程目錄:
6.legacy和concurrent模式入口函數(shù)
源碼目錄結(jié)構(gòu)
源碼中主要包括如下部分
- fixtures:為代碼貢獻(xiàn)者提供的測試React
- packages:主要部分所森,包含Scheduler,reconciler等
- scripts:react構(gòu)建相關(guān)
下面來看下packages主要包含的模塊
react:核心Api如:React.createElement、React.Component都在這
-
和平臺相關(guān)render相關(guān)的文件夾:
react-art:如canvas svg的渲染
react-dom:瀏覽器環(huán)境
react-native-renderer:原生相關(guān)
react-noop-renderer:調(diào)試或者fiber用 -
試驗(yàn)性的包
react-server: ssr相關(guān)
react-fetch: 請求相關(guān)
react-interactions: 和事件如點(diǎn)擊事件相關(guān)
react-reconciler: 構(gòu)建節(jié)點(diǎn)
shared:包含公共方法和變量
-
輔助包:
react-is : 判斷類型
react-client: 流相關(guān)
react-fetch: 數(shù)據(jù)請求相關(guān)
react-refresh: 熱加載相關(guān)
scheduler:調(diào)度器相關(guān)
React-reconciler:在render階段用它來構(gòu)建fiber節(jié)點(diǎn)
怎樣調(diào)試源碼
本課程使用的react版本是17.0.1飞醉,通過下面幾步就可以調(diào)試源碼了尺借,
方法一:可以用現(xiàn)成的包含本課程所有demo的項(xiàng)目來調(diào)試,建議使用已經(jīng)構(gòu)建好的項(xiàng)目掘鄙,地址:https://github.com/xiaochen1024/react_code_build
方法二:
- clone源碼:
git clone https://github.com/facebook/react.git
- 依賴安裝:
npm install
oryarn
- build源碼:npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE
-
為源碼建立軟鏈:
cd build/node_modules/react npm link cd build/node_modules/react-dom npm link
-
create-react-app創(chuàng)建項(xiàng)目
npx create-react-app demo npm link react react-dom