React 渲染流程可視化，有大佬實(shí)現(xiàn)了！

體驗(yàn)這個(gè)功能的網(wǎng)址：https://jser.pro/ddir/rie

下面是作者關(guān)于這個(gè)功能的介紹：

我為什么創(chuàng)建它？

當(dāng)我在 2021 年首次深入探索 React 時(shí)，我為自己繪制了一些圖表^[1]來幫助理解 React 的內(nèi)部結(jié)構(gòu)，下面是其中之一。

顯然，這需要大量的手動(dòng)工作，而且它只是個(gè)靜態(tài)圖片，如果我們能自動(dòng)可視化 React 的內(nèi)部結(jié)構(gòu)而且讓它動(dòng)起來，是不是更好？我心中有這個(gè)可視化工具的想法已經(jīng)很久了，后來我動(dòng)手實(shí)現(xiàn)了。

如何使用它？

RIE（React 內(nèi)部結(jié)構(gòu)探索器）^[2] 的用戶界面應(yīng)該是很直觀的，基本上你可以：

1. 選擇 React 版本（目前支持 18.3.1 和 19-rc）
2. 編輯你的代碼或選擇內(nèi)置代碼片段
3. 點(diǎn)擊“運(yùn)行”按鈕來檢查 React 的內(nèi)部結(jié)構(gòu)
4. 交互預(yù)覽，并查看內(nèi)部更新。

例如，你可以選擇“Suspense - multi throw”代碼片段，看看 React@19 和 React@18 是如何處理不同的。

也許觀看我的快速介紹視頻^[3]會(huì)更簡(jiǎn)單。??

下一步。

RIE（React 內(nèi)部結(jié)構(gòu)探索器）^[4] 仍處于早期階段，作為 DDIR（深入探索 React）^[5] 的配套應(yīng)用程序，我將嘗試覆蓋更多流程并使其更加易用。

想了解更多關(guān)于 React 的內(nèi)部工作原理嗎？可以看看 - 深入探索 React 內(nèi)部結(jié)構(gòu)！

點(diǎn)擊訪問系列^[6]

往期推薦

基于wujie的解決方案來簡(jiǎn)單聊聊微前端

通過可視化徹底搞懂 Promise執(zhí)行邏輯

都應(yīng)該會(huì)的前端代碼規(guī)范 - 日志打印規(guī)范

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧