Javascript

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

本文主要是介绍画流程图学习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-shenzhen.aliyuncs.com/react/react_base.pdf

React理念.jpg

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-shenzhen.aliyuncs.com/react/react_render.pdf

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


pdf地址:
https://bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react_commit.pdf

React commit阶段.jpg

这篇关于画流程图学习React源码(react设计理念、react render阶段、react commit阶段)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!