转自：网络
终于有大佬把 React 复杂的流程可视化出来了，让我们来看看效果：
体验这个功能的网址：https://jser.pro/ddir/rie
下面是作者关于这个功能的介绍：
我为什么创建它？
当我在 2021 年首次深入探索 React 时，我为自己绘制了一些图表[1]来帮助理解 React 的内部结构，下面是其中之一。
显然，这需要大量的手动工作，而且它只是个静态图片，如果我们能自动可视化 React 的内部结构而且让它动起来，是不是更好？我心中有这个可视化工具的想法已经很久了，后来我动手实现了。
如何使用它？
RIE（React 内部结构探索器）[2] 的用户界面应该是很直观的，基本上你可以：
选择 React 版本（目前支持 18.3.1 和 19-rc） 编辑你的代码或选择内置代码片段 点击“运行”按钮来检查 React 的内部结构 交互预览，并查看内部更新。
例如，你可以选择“Suspense - multi throw”代码片段，看看 React@19 和 React@18 是如何处理不同的。
也许观看我的快速介绍视频[3]会更简单。😳
下一步。
RIE（React 内部结构探索器）[4] 仍处于早期阶段，作为 DDIR（深入探索 React）[5] 的配套应用程序，我将尝试覆盖更多流程并使其更加易用。
参考资料
[1]图表: https://github.com/JSerZANP/react-source-code-walkthrough-en/blob/main/memo/[2]RIE（React 内部结构探索器）: https://jser.pro/ddir/rie[4]RIE（React 内部结构探索器）: https://jser.pro/ddir/rie[6]点击访问系列: https://jser.dev/series/react-source-code-walkthrough
加我微信，拉你进前端进阶、面试交流群，互相监督学习进步等！
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的博客 https://github.com/qappleh/Interview，让我们成为长期关系
关注公众号「深圳湾码农」，持续为你推送精选好文，回复「加群」加入面试互助交流群
点一下，代码无 Bug
