画流程图学习React源码（react设计理念、react render阶段、react commit阶段）

阅读前须知

流程图的内容90%来自于React技术揭秘一书，对其内容进行整理，方便正在学习源码的同学们能够系统性把每个关键知识点给串联起来，下面JPG图片比较模糊，图片宽高比较大，用手机打开pdf，观看起来也不方便，建议用电脑跳转下面各个pdf地址进行查看，带着问题来阅读。

React理念

1、react15与react > 16架构区别性？
2、Fiber节点的组成？
3、Fiber树的结构？何为深度优先遍历？
4、Fiber工作原理（双缓存技术）？
5、Fiber Mount与Update流程是怎么样？
6、JSX与Fiber的区别？

---

pdf地址:
https://bin-blog.oss-cn-shenz...

React render阶段

1、进入render阶段前需要干什么（判断是否异步可中断更新）？
2、Fiber节点的创建和Fiber树的构建如何开始（performUnitOfWork）？
3、“递”阶段beginWork如何工作？
4、‘归阶段’completeWork如何工作？
5、如何判断是mount还是update？
6、render阶段最终的产物是什么(effectList的生成、fiber节点的创建)？

---

pdf地址:
https://bin-blog.oss-cn-shenz...

React commit阶段

1、commit阶段如何开启（commitRoot方法）？
2、before mutation阶段之前做了什么(flushPassiveEffects(),触发useEffect回调与其他同步任务)?
3、rootFiber的effectTag不在effectList怎么办？
4、before mutation阶段（执行Dom操作之前）做了什么？
5、mutation阶段（执行Dom操作）做了什么？
6、layout阶段（执行Dom操作后）做了什么？
7、layout之后做了什么？
8、最终产物是什么？

---

pdf地址:
https://bin-blog.oss-cn-shenz...

原文地址：https://mp.weixin.qq.com/s?__...

欢迎关注公众号“前端晚间课”，后续会把所有流程图进行分享，以及将.pos源文件进行分享，转载注明出处！