React 項(xiàng)目托管在 GitHub
項(xiàng)目開(kāi)發(fā)指引也可見(jiàn)官網(wǎng) How to Contribute
文章使用的版本為v16.8.6
開(kāi)始
克隆代碼到本地
git clone https://github.com/facebook/react.git
查看分支烧给,git branch -a
切到你需要的版本,或者找到head前面的最新的穩(wěn)定版本,我這里是17.0.1伯诬,切換到 17.0.1 分支盗似,git checkout 17.0.1
安裝依賴,yarn install
剛剛拉下來(lái)yarn install一直卡在electorn不知道為什么(更換淘寶的源也是一樣卡在[7/11] electron)
這步卡著可以跳過(guò)繼續(xù)往下走
由源碼編譯
項(xiàng)目目錄結(jié)構(gòu)
官網(wǎng)對(duì)編譯的提示
從源碼編譯出 react.development.js
和 react-dom.development.js
執(zhí)行
yarn run build react/index, react-dom/index
構(gòu)建出的文件扣讼,保存在 build/node_modules/react
椭符,有 commonjs 和 umd 兩個(gè)版本艰山。
直接打開(kāi) fixtures/packaging/babel-standalone/dev.html
頁(yè)面使用的是最新編譯出來(lái)的 react.development.js 和 react-dom.development.js
更改代碼測(cè)試效果
在 setState 內(nèi)部添加一個(gè) log鸽嫂,更改 packages/react/src/ReactBaseClasses.js
据某。
重新編譯 react 挽唉,yarn run build react/index
查看 react.development.js瓶籽,在 build/node_modules/react/umd/react.development.js
至此塑顺,代碼編譯都已經(jīng)成功了严拒。
使用自己編譯出來(lái)的 react裤唠、react-dom
使用 create-react-app 初始化一個(gè)項(xiàng)目巧骚,刪除 package.json 中 dependencies 中的 react、react-dom竣蹦。
進(jìn)入之前編譯好的 react、react-dom 目錄滔吠,分別執(zhí)行 yarn link
疮绷。
再到項(xiàng)目目錄冬骚,輸入yarn link react react-dom
只冻,啟動(dòng) yarn start
即可。
源碼查找
需要查看ReactDOM.render源碼
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
點(diǎn)擊render進(jìn)入
查看render得 聲明是混淆過(guò)的,這里無(wú)法繼續(xù)跳轉(zhuǎn)
我們知道是react-dom的代碼航棱,打開(kāi)react項(xiàng)目
或者打開(kāi)ReactDom.js
點(diǎn)擊render發(fā)現(xiàn)跳轉(zhuǎn)的都是ReactDomLegacy.js