ReactDOM.legacyRenderSubtreeIntoContainer()流程

在React17中createContainer的流程应该是在legacyCreateRootFromDOMContainer()的过程中去创建 FiberRoot对象，其主要流程为以下过程

纵观整个流程其主要通过以下过程 createLegacyRoot() -> createContainer() -> listenToAllSupportedEvents() 三个步骤，进行了

• FiberRoot对象(root) 和 FiberNode对象(fiber)的创建、初始化和互相关联，FiberNode对象更新队列(updateQueue)的初始化
• 合成事件的初始化处理
• 服务端渲染的处理

同时也要注意在 createRoot 、createBlockingRoot 、createLegacyRoot 的区别

‍

createLegacyRoot()

我们看ReactDOM的源码发现其实React对于创建FiberRoot分为三种创建方式

1. createRoot(container , options)
2. createBlockingRoot(container , options)
3. createLegacyRoot(container , options)

从而生成三种不同的 Root对象 （ LegacyRoot , BlockingRoot , ConcurrentRoot ）,但是其核心都是通过

• ReactDOMRoot
• ReactDOMBlockingRoot

这两个方法去创建的，然后通过原型链的方式都继承了 render() 和 unmount() 方法。

​

‍

疑问：

1. 三种 RootTag的区别是什么？

createRootImpl(container, tag , options)

创建FiberRoot的实现类

‍

1. createContainer(containerInfo,tag, hydrate,hydrateCallbacks)

就调用了createFiberRoot()方法

createFiberRoot()

此方法的主要作用是：

1. 创建FiberRoot对象
2. 创建FiberNode对象(createHostRootFiber(tag))
3. FiberRoot.current === FiberNode 与 FiberNode.stateNode === FiberRoot 互相关联
4. 初始化更新队列对象(FiberNode.updateQueue)

‍

2. markContainerAsRoot(root.current , container)

在FiberNode. __reactFiber$xxx上缓存当前的container对象

3. 初始化合成事件listenToAllSupportedEvents(rootContainerElement)

在跟节点上去初始化合成事件，这个在合成事件上说明

4.