為了更深入的學習react源碼衷模，直接進行斷點調(diào)試是一個不錯的手段指黎。因此朋凉，我們需要搭建一個調(diào)試環(huán)境。
- 下載源碼
首先醋安，我們從github上把源碼down下來杂彭。react源碼在github的地址為 直接git clone
down下來之后，我們可以看一下源碼結(jié)構(gòu)吓揪。其中src目錄下的package文件中就是react源碼亲怠。react是用learna多包管理工具進行管理的。其中比較核心的package有react柠辞，reactDom团秽，react-conciler。
- 搭建本地環(huán)境
這里我們打算用webpack來搭建我們調(diào)試的本地環(huán)境。npm init 后习勤，直接在目錄下創(chuàng)建webpack.config.js配置文件踪栋。
module.exports = {
entry: './src/index.jsx',
mode: 'development',
devtool: 'source-map',
devServer: {
port: 9000
},
module: {
rules: [
{
test: /.(js)|(jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
devServer: {
port: '3300',
host: 'localhost',
client: {
overlay: {
errors: true,
warnings: false,
},
}
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new webpack.DefinePlugin({
__DEV__: true,
__PROFILE__: true,
__EXPERIMENTAL__: true,
__UMD__: true,
})
],
resolve: {
alias: {
react: path.resolve(__dirname, './packages/react'),
shared: path.resolve(__dirname, './packages/shared'),
scheduler: path.resolve(__dirname, './packages/scheduler'),
'react-dom': path.resolve(__dirname, './packages/react-dom'),
'react-reconciler': path.resolve(__dirname, './packages/react-reconciler'),
}
}
}
下載一系列依賴webapck,webpack-cli,webpack-dev-server,@babe/core,@babel/preset-react, @babel/preset-flow, html-webpack-plugin這里因為react源碼采用的是flow規(guī)范，因此我們需要下載@babel/preset-flow預設图毕。
項目的目錄結(jié)構(gòu)如下
其中babel配置如下
module.exports = {
presets: [
require.resolve('@babel/preset-react'), // 轉(zhuǎn)換jsx語法
require.resolve('@babel/preset-flow')
]
}
目錄中的package目錄下就準備放我們的react源碼夷都。
3.引入react源碼
將源碼中的react react-dom react-reconciler scheduler shared這五個包拷貝到項目的package目錄中。
4.修改react源碼
看似大功搞成予颤，但是這樣直接啟動是會報錯的损肛。這是因為react源碼是用rollup打包的，我們需要對源碼做一些修改荣瑟。
1.修改 src\packages\react-reconciler\src\ReactFiberHostConfig.js, 導出HostConfig
// import invariant from 'shared/invariant';
// invariant(false, 'This module must be shimmed by a specific renderer.');
export * from './forks/ReactFiberHostConfig.dom'
2.修改 src\react\packages\shared\ReactSharedInternals.js
// import React from 'react';
// const ReactSharedInternals =
// React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
import ReactSharedInternals from '../react/src/ReactSharedInternals'
- 啟動項目
npm start啟動項目后，直接在render函數(shù)處打斷點就可以看到react組件渲染的調(diào)用棧了
