继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

24k小清新
关注TA
已关注
手记 18
粉丝 23
获赞 250

阅读前须知

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

React理念

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


React理念.jpg

React render阶段

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


React render阶段.jpg

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、最终产物是什么?


React commit阶段.jpg

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP