网站建设 清远魔方网络,建筑模板多少钱一张什么尺寸,千年之恋网页设计代码,苏州工业园区做政务网站的公司HostText 1 #xff09;概述
在 completeWork 中 对 HostText的处理在第一次挂载和后续更新的不同条件下进行操作 第一次挂载主要是创建实例后续更新其实也是重新创建实例
2 #xff09;源码
定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663
到 c…HostText 1 概述
在 completeWork 中 对 HostText的处理在第一次挂载和后续更新的不同条件下进行操作 第一次挂载主要是创建实例后续更新其实也是重新创建实例
2 源码
定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663
到 case HostText 这里
case HostText: {let newText newProps;// 符合这个条件说明它不是第一次渲染就是更新的状态// 调用 updateHostText 进行更新if (current workInProgress.stateNode ! null) {const oldText current.memoizedProps;// If we have an alternate, that means this is an update and we need// to schedule a side-effect to do the updates.updateHostText(current, workInProgress, oldText, newText);} else {// 对于第一次渲染if (typeof newText ! string) {invariant(workInProgress.stateNode ! null,We must have new props for new mounts. This error is likely caused by a bug in React. Please file an issue.,);// This can happen when we abort work.}// 跳过 context 处理const rootContainerInstance getRootHostContainer();const currentHostContext getHostContext();// 跳过 hydrate 处理let wasHydrated popHydrationState(workInProgress);if (wasHydrated) {if (prepareToHydrateHostTextInstance(workInProgress)) {markUpdate(workInProgress);}} else {// 创建 文本 实例workInProgress.stateNode createTextInstance(newText,rootContainerInstance,currentHostContext,workInProgress,);}}break;
}进入 updateHostText updateHostText function(current: Fiber,workInProgress: Fiber,oldText: string,newText: string,
) {// 这个非常简单通过前后 text 是否有区别// 如果不同则创建新的 text实例if (oldText ! newText) {// If the text content differs, well create a new text instance for it.// 先跳过 context 的处理const rootContainerInstance getRootHostContainer();const currentHostContext getHostContext();workInProgress.stateNode createTextInstance(newText,rootContainerInstance,currentHostContext,workInProgress,);// Well have to mark it as having an effect, even though we wont use the effect for anything.// This lets the parents know that at least one of their children has changed.markUpdate(workInProgress);}
};进入 createTextInstance// packages/react-dom/src/client/ReactDOMHostConfig.js#L272
export function createTextInstance(text: string,rootContainerInstance: Container,hostContext: HostContext,internalInstanceHandle: Object,
): TextInstance {if (__DEV__) {const hostContextDev ((hostContext: any): HostContextDev);validateDOMNesting(null, text, hostContextDev.ancestorInfo);}const textNode: TextInstance createTextNode(text, rootContainerInstance);// 这个方法之前阅过precacheFiberNode(internalInstanceHandle, textNode);return textNode;
}进入 createTextNodeexport function createTextNode(text: string,rootContainerElement: Element | Document,
): Text {// 最终 getOwnerDocumentFromRootContainer 这里返回一个dom对象调用dom的 createTextNode 这个方法return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text,);
}进入 getOwnerDocumentFromRootContainer function getOwnerDocumentFromRootContainer(rootContainerElement: Element | Document,
): Document {// rootContainerElement.ownerDocument 这里是 window.document 对象// 这么做是为了兼容多平台api的使用return rootContainerElement.nodeType DOCUMENT_NODE? (rootContainerElement: any): rootContainerElement.ownerDocument;
}HostText 相比于 HostComponents 来说它没有多种选择 没有各种各样的属性整体来说非常的简单 一些特别说明的写在了上述代码注释中
