响应式网站制作视频,天津网站建设流程,为网站制定推广计划,深圳英文网站建设公司HostRoot 的更新 1 #xff09;概述
HostRoot 是一个比较特殊的节点, 因为在一个react应用当中它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象重点在于它的更新过程
2 #xff09;源码
定位到 packages/react-reconciler/src/ReactFiberBeginWork.js…HostRoot 的更新 1 概述
HostRoot 是一个比较特殊的节点, 因为在一个react应用当中它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象重点在于它的更新过程
2 源码
定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612
// 这个函数的重点在: update 来自哪里, 里面是什么内容
// 最终通过 processUpdateQueue 得到了 element 里面的内容之后以此作为children来调和
function updateHostRoot(current, workInProgress, renderExpirationTime) {// 跳过 context 相关pushHostRootContext(workInProgress);const updateQueue workInProgress.updateQueue;invariant(updateQueue ! null,If the root does not have an updateQueue, we should have already bailed out. This error is likely caused by a bug in React. Please file an issue.,);// 获取一系列数据const nextProps workInProgress.pendingProps;const prevState workInProgress.memoizedState;// 对于 HostRoot 一开始是没有 state也就是 prevState.element, 在第一次渲染的时候prevState 是 null在ReactDOM.render中创建了一个update// 经过 processUpdateQueue 这次更新后它会拿到一个 {element} 对象作为 stateconst prevChildren prevState ! null ? prevState.element : null;// 得到创建的update传递的elementprocessUpdateQueue(workInProgress,updateQueue,nextProps,null,renderExpirationTime,);const nextState workInProgress.memoizedState;// Caution: React DevTools currently depends on this property// being called element.const nextChildren nextState.element;if (nextChildren prevChildren) {// If the state is the same as before, thats a bailout because we had// no work that expires at this time.resetHydrationState(); // 服务端渲染复用dom节点相关内容// 跳出更新过程不需要更新// 对 RootFiber来说大部分情况下只在 ReactDOM.render 的时候有更新其他时候都不需要更新// 一般都是在App内更新不会在RootFiber节点创建更新return bailoutOnAlreadyFinishedWork(current,workInProgress,renderExpirationTime,);}const root: FiberRoot workInProgress.stateNode;// 跳过 hydrate 相关if ((current null || current.child null) root.hydrate enterHydrationState(workInProgress)) {// If we dont have any current children this might be the first pass.// We always try to hydrate. If this isnt a hydration pass there wont// be any children to hydrate which is effectively the same thing as// not hydrating.// This is a bit of a hack. We track the host root as a placement to// know that were currently in a mounting state. That way isMounted// works as expected. We must reset this before committing.// TODO: Delete this when we delete isMounted and findDOMNode.workInProgress.effectTag | Placement;// Ensure that children mount into this root without tracking// side-effects. This ensures that we dont store Placement effects on// nodes that will be hydrated.// 在 current null || current.child null 这种情况下都是第一次渲染workInProgress.child mountChildFibers(workInProgress,null,nextChildren,renderExpirationTime,);} else {// Otherwise reset hydration state in case we aborted and resumed another// root.// 不是第一次渲染reconcileChildren(current,workInProgress,nextChildren,renderExpirationTime,);resetHydrationState();}return workInProgress.child;
}HostRoot 创建更新的过程就是在 ReactFiberReconciler.js 中的调用 ReactDOM.render 的过程定位到 scheduleRootUpdate 位置在 packages/react-reconciler/src/ReactFiberReconciler.js#L110function scheduleRootUpdate(current: Fiber,element: ReactNodeList,expirationTime: ExpirationTime,callback: ?Function,
) {// ... 省略const update createUpdate(expirationTime);update.payload {element};// ... 省略return expirationTime;
}它这里创建一个 update, 并挂在 update.payload 是 {element}这个 element 就是传给 ReactDOM.render 的第一个参数这个 update 对象没有后续指定类型这和调用 setState 在组件内创建更新效果是类似的所以update.payload 就相当于 state对于 HostRoot 来说, 它的state只有一个属性就是element就是 ReactDOM.render 的第一个参数
