阅读 10

React 深入学习:3

ReactDOM.render 内部调用了方法 legacyRenderSubtreeIntoContainer。该方法首先创建了一个 ReactRoot 实例,然后再在不同 情况下调用这个实例的 legacy_renderSubtreeIntoContainerrender 方法。

ReactRoot 的内部初始化了一个 _internalRoot 属性,这个属性是 ReactRoot 在实例化的时候调用 ReactFiberReconciler 模块下的 createContainer 方法创建的。

createContainer 在内部调用了 另一模块createFiberRoot 方法,其返回值是一个 FiberRoot

ReactRoot 实例方法在内部调用了 updateContainer 方法

updateContainer 调用了 updateContainerAtExpirationTime

updateContainerAtExpirationTime 调用了 scheduleRootUpdate

scheduleRootUpdate 调用了三个方法:

  • flushPassiveEffects
  • enqueueUpdate
  • scheduleWork

第三个 scheduleWork 方法开始调度工作了

scheduleWork 内部调用 requestWork 请求工作。

requestWork 调用 performWorkOnRoot 执行工作

performWorkOnRoot 调用 renderRoot

renderRoot 调用 workLoop

workLoop 循环调用 performUnitOfWork

performUnitOfWork 调用 beginWork

关注下面的标签,发现更多相似文章
评论