ReactDom.createRoot().render(或者老版的ReactDom.render)
- 代表更新的数据结构 —update
- 消费update的数据结构 —updateQueue
React维护的更新队列的概念和发布订阅中心有点类似。组件状态的更新会被加入更新队列,然后React会异步地去消费这个队列,更新组件的状态。
// 更新结构
export interface Update<State> {
action: Action<State>;
}
// 更新队列
export interface UpdateQueue<State> {
shared: {
pending: Update<State> | null;
};
}
以上是更新Update和UpdateQueue的结构,
在react初次render时,会由宿主环境包调用createContanier创建一个hostRootFiber
hostRootFiber
fiberNode节点中最高级,FiberRootNode
也会被创建,FiberRootNode
不是FiberNode节点,而是FiberRootNode
节点,它的current指向hostRootFiber
,反之,hostRootFiber
的stateNode指向FiberRootNode
(如下图)
每个FiberNode节点都有一个updateQueue
属性,在reactDom.createRoot(dom节点)时,也就是源码中调用createContanier时,会给hostRootFiber
的创建一个UpdateQueue
的结构对象
在render时,也就是源码中调用updateContanier
时会取传入进来的(一般就是<APP/>
) 创建一个update结构
,与 hostRootFiber
(也就是由的return指向,但此时并没有明确将对应到fiber,自然也就没有return指向)的updateQueue
进行绑定
判定完成之后会执行 scheduleUpdateOnFiber
这个函数会调用markUpdateFromFiberToRoot
查询到fiberNode的根节点,这个根节点就是FiberRootNode
,它的stateNode就是hostRootFiber
,返回FiberRootNode
并调用,再拿FiberRootNode
的current给createWorkInProgress
去创建第一个WorkInProgress
循环 执行递归(beginWork和completework)