前端React結(jié)構(gòu)工程-改寫(xiě)render

工程準(zhǔn)備事項(xiàng)

• npm install
• cnpm
• 初始化工程實(shí)例
  
  以上是實(shí)例化，安裝過(guò)npm后的列表
  接下來(lái)使用 npm run start 來(lái)啟動(dòng)項(xiàng)目
  當(dāng)你啟動(dòng)項(xiàng)目后會(huì)看到react給我們準(zhǔn)備好的 默認(rèn)界面
  React中的 diff原理 和 調(diào)度原理是 這次探索的目標(biāo)
  只有搞明白這些，才能合理的利用react開(kāi)發(fā)項(xiàng)目
  
  我們實(shí)際使用的 項(xiàng)目是子集中的子集 d2
  首先打開(kāi)默認(rèn)工程中的 package.json
  
  在 scripts中 可以看到
• “start”: “react-scripts start”
• “build”: “react-scripts build”
• “test”: “react-scripts test”
• “eject”: “react-scripts eject”
  那么 從目錄的react-scripts 接著向上溯源
  

"bin": {"react-scripts": "./bin/react-scripts.js"},"dependencies": {"file-loader": "6.1.1","fs-extra": "^9.0.1","react-app-polyfill": "^2.0.0","react-dev-utils": "^11.0.3","react-refresh": "^0.8.3",},"devDependencies": {"react": "^17.0.1","react-dom": "^17.0.1"},

bin=>react-scripts 是執(zhí)行的索引目錄
react-scripts在首次調(diào)用到的時(shí)候執(zhí)行一次，或編譯時(shí)運(yùn)行
使用的 npm run start 會(huì)在這里解釋為 觸發(fā)的語(yǔ)句
如果想要增加額外的觸發(fā)語(yǔ)句，可自行增加api(event)

file-loader 和fs-extra是關(guān)聯(lián)使用的，對(duì)于改寫(xiě)render來(lái)說(shuō) 沒(méi)多大實(shí)際意義。所以這里就過(guò)了
這里找到 require-render-return 和 no-require-return-value 將里面的 render改寫(xiě)為自定義的參數(shù)。
并在html中利用原型查看其原型，是否符合推測(cè)與更改的代碼。

經(jīng)過(guò)修改后，直接 npm run start一下
console.log的結(jié)果是 object對(duì)象.原型.的方法 為什么要說(shuō)原型，一會(huì)大家就知道了

接下來(lái)索引進(jìn)入到 react-Dom里面 查看源碼并改寫(xiě)

…/node_modules/react-dom/cjs目錄下的 就是 react的核心
react-dom.development.js 以下的操作 均是對(duì) 該文件進(jìn)行 溯源修改的
REACT_ELEMENT_TYPE =0xeac7=react.element
如果你寫(xiě)過(guò)React的類(lèi)組件，每一個(gè)類(lèi)組件都是要繼承于React.Component的。因此，如果我們?cè)趓eact.element中進(jìn)行溯源

這句話就是

判斷(類(lèi)型 新子集 ==='對(duì)象'&&新子集 !== 空){switch(新子集.類(lèi)型){c 變量 =創(chuàng)建一個(gè)元素來(lái)自 element[渲染](子集，返回的.根,穿透)}}

在react.element創(chuàng)建好新子集后，它必然是需要props出去的
接下來(lái)看它的pops，中間是默認(rèn)傳遞了key。這就證明他內(nèi)部的props是獨(dú)一無(wú)二的，是肯定可以修改的



以上的原理我就搞明白了，誰(shuí)是父元素的原型。
我們調(diào)用的是子集中的子集。你在寫(xiě)組件的關(guān)聯(lián)都是類(lèi)似的樹(shù)循環(huán)。

最后將你傳遞的值 進(jìn)行類(lèi)型判斷
如果 最初的 function不是 object類(lèi)型的話，就會(huì)報(bào)錯(cuò)
并且這里的 Function 不是藍(lán)色的，是綠色的
基本上到這里 溯源就結(jié)束了。已經(jīng)知道的

react.render 是從哪里起始的調(diào)用

element是如何渲染的

react是如何調(diào)度的
很多函數(shù)是關(guān)聯(lián)的，不要只看命名就不去溯源
因?yàn)槠渲泻芏鄆mporta的會(huì)誤導(dǎo)

擴(kuò)展：react的更多溯源

retryTimeOutBoundary 渲染重繪
markRootUpdated 節(jié)點(diǎn)重繪
resolverRetryWakeable 虛擬Dom的different

captureCommitPhaseError 替換過(guò)時(shí)的Dom
captureCommitPhaseErrorOnRoot 替換過(guò)時(shí)的DOM在Root中

React 的總體流程

我是大菠蘿！希望能幫助更多人
如果你們要做組件，那這里可能對(duì)你們有點(diǎn)幫助。
還沒(méi)人敢改寫(xiě) react的代碼吧？哈哈哈

總結(jié)

以上是生活随笔為你收集整理的前端React结构工程-改写render的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。