前段时间学习了卡颂老师的《React 设计原理》，总结了一些流程图和笔记，但是感觉还是不够直观，所以尝试做了一个把fiber和render阶段可视化并且可以单步执行的工具，帮助自己更加理解React的机制。
1、 本项目不是纯新手向，是基于有看过React源码课程后（对一些专有名词有概念后），用可视化的角度去单步查看每个关键步骤，可以先从宏观角度了解React的运行方式。
2、本项目是本人学习React源码后，帮助自己总结和理清React流程的一个实践，非教程，欢迎指出问题和讨论。
3、每一个步骤的演示都是基于React原来的逻辑，为了可以单步执行每一步，只是把React同步做的事情用迭代器和回调函数改造成可中断，整体逻辑完全基于React18原版。
主界面
目前包含的主要功能：
- react的双缓存fiber树的结构展示
- funtion component和hooks在render阶段的演示
- render阶段的一些执行流程，beginWork和completeWork的展示和说明
- 单步执行每个关键步骤,自动执行每一个步骤（默认1s）
- 每个关键步骤的说明和该步骤关键数据的展示
在线预览
roy2017.github.io/react18-vis…
每个节点可以点击查看对应fiber对象的细节
mount阶段的beginWork和completeWork流程
发起更新，选出lanes再进行render阶段
github仓库
- 欢迎提出意见和指正问题
- 后续更新React的diff算法部分的单步执行流程等
