谈谈React render

83 阅读1分钟

React render

render 开始于 performSyncWorkOnroot()这个方法,其中performSyncWorkOnRoot(),perforUnitOfWork()这是两个关于同步还是异步的两个方法。其实它还主要是一个递归调用的一个方法。

递归是一个交替的过程,直到最后“归” Root 就会结束啦

image.png

‘递’阶段

“递”(为每个遍历到的 Fiber 节点调用 beginWork 方法) :首先向下深度优先遍历,为遍历到的每个Fiber节点,当遍历到最后的子节点(即没有子组件的组件)时就会进入“归”阶段

‘归’阶段

“归”(调用completeWork 处理 Fiber节点)

当Fiber节点执行完completeWork,如果其存在兄弟Fiber节点,会进入其兄弟Fiber的“递”阶段。如果不存在兄弟Fiber,会进入父级Fiber的“归”阶段。