React 渲染流程可视化，有大佬实现了！

体验这个功能的网址：https://jser.pro/ddir/rie

下面是作者关于这个功能的介绍：

我为什么创建它？

当我在 2021 年首次深入探索 React 时，我为自己绘制了一些图表^[1]来帮助理解 React 的内部结构，下面是其中之一。

显然，这需要大量的手动工作，而且它只是个静态图片，如果我们能自动可视化 React 的内部结构而且让它动起来，是不是更好？我心中有这个可视化工具的想法已经很久了，后来我动手实现了。

如何使用它？

RIE（React 内部结构探索器）^[2] 的用户界面应该是很直观的，基本上你可以：

1. 选择 React 版本（目前支持 18.3.1 和 19-rc）
2. 编辑你的代码或选择内置代码片段
3. 点击“运行”按钮来检查 React 的内部结构
4. 交互预览，并查看内部更新。

例如，你可以选择“Suspense - multi throw”代码片段，看看 React@19 和 React@18 是如何处理不同的。

也许观看我的快速介绍视频^[3]会更简单。😳

下一步。

RIE（React 内部结构探索器）^[4] 仍处于早期阶段，作为 DDIR（深入探索 React）^[5] 的配套应用程序，我将尝试覆盖更多流程并使其更加易用。

想了解更多关于 React 的内部工作原理吗？可以看看 - 深入探索 React 内部结构！

点击访问系列^[6]

往期推荐

基于wujie的解决方案来简单聊聊微前端

通过可视化彻底搞懂 Promise执行逻辑

都应该会的前端代码规范 - 日志打印规范

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧