React源码学习——从ReactDOM.render切入Fiber的开端

129 阅读1分钟

ReactDOM.render

createElement生成了React Element后,就交由ReactDOM.render进行处理了。所以很自然的,接来看一下ReactDOM.render做了什么。方法的路径在react-dom/src/client/ReactDOMLegacy.js中。

它最基本的使用方法如下:

ReactDOM.render(<App />, document.getElementById('root'))

它接收三个参数

element:React Element元素

container:挂载React Element元素的标签

callback:执行后的回调函数

render函数内部并没有做太多处理,而是调用了legacyRenderSubtreeIntoContainer方法。该方法也在ReactDOMLegacy.js中。相比render方法,多了parentComponentforceHydrate两个入参。作为根节点的渲染,没有父组件,所以parentComponent是null,而forceHydrate是用于ssr的,先不做展开,这里的值是false。

接下来主要做了三件事:

  1. this._internalRoot = createRootImpl(container, tag, options)
  2. unbatchedUpdates -> updateContainer
  3. return getPublicRootInstance(fiberRoot)

做这三件事的函数,已经不再是在react-dom中了,而是到了react-reconciler中。简单的调用关系如下图:

截屏2022-02-01 下午11.45.09.png

createRootImpl最终创建了FiberRoot,updateContainer根据Fiber的Scheduler进行更新调度。所以,这里就不得不牵扯出react中的Fiber架构了。

tbc

关于Fiber的内容,之前看过React技术揭秘,对此有一些概念上的了解。接下来就根据示例代码调试,来进一步看一下实际的运行情况