hostRoot就是ReactDOM.render的第二个参数,通常情况下是
节点typescript
function updateHostRoot(current, workInProgress, renderExpirationTime) {
// 取出RootFiber上的updateQueue
const updateQueue = workInProgress.updateQueue;
const nextProps = workInProgress.pendingProps;
const prevState = workInProgress.memoizedState;
const prevChildren = prevState !== null ? prevState.element : null;
// 执行updateQueue
processUpdateQueue(
workInProgress,
updateQueue,
nextProps,
null,
renderExpirationTime,
);
// HostRoot就是root节点,也就是RootFiber,通过ReactDOM.render产生的
// 在updateQueue上存的就是App类组件的ReactElement
// 执行完updateQueue后,会将App类组件的state赋值给 memoizedState
const nextState = workInProgress.memoizedState;
// 这里取到的nextChildren就是App类组件的ReactElement
const nextChildren = nextState.element;
// 如果前后节点相同,就走跳过节点更新的逻辑
if (nextChildren === prevChildren) {
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderExpirationTime,
);
}
const root: FiberRoot = workInProgress.stateNode;
if (
(current === null || current.child === null) &&
root.hydrate &&
enterHydrationState(workInProgress)
) {
// 服务端渲染的逻辑...
} else {
// 调和App节点,生成Fiber
reconcileChildren(
current,
workInProgress,
nextChildren,
renderExpirationTime,
);
resetHydrationState();
}
return workInProgress.child;
}