免费做app的网站,网站建设中网页代码,创新的天津网站建设,优化网站的步骤updateHostComponent 1 #xff09;概述
在 completeWork 阶段的 HostComponent 处理#xff0c;继续前文所述在更新的逻辑里面#xff0c;调用了 updateHostComponent进行前后props对应的dom的attributes变化的对比情况这个方法也是根据不同环境来定义的#xff0c;我们这…updateHostComponent 1 概述
在 completeWork 阶段的 HostComponent 处理继续前文所述在更新的逻辑里面调用了 updateHostComponent进行前后props对应的dom的attributes变化的对比情况这个方法也是根据不同环境来定义的我们这里只专注于 react-dom 环境
2 源码
定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L586
这里是 updateHostComponent 调用的地方
updateHostComponent(current,workInProgress,type,newProps,rootContainerInstance,
);if (current.ref ! workInProgress.ref) {markRef(workInProgress);
}接着进入其定义
updateHostComponent function(current: Fiber,workInProgress: Fiber,type: Type,newProps: Props,rootContainerInstance: Container,
) {// If we have an alternate, that means this is an update and we need to// schedule a side-effect to do the updates.const oldProps current.memoizedProps;// 全等对象没有变化过直接 returnif (oldProps newProps) {// In mutation mode, this is sufficient for a bailout because// we wont touch this node even if children changed.return;}// If we get updated because one of our children updated, we dont// have newProps so well have to reuse them.// TODO: Split the update API as separate for the props vs. children.// Even better would be if children werent special cased at all tho.// 获取 dom 和 contextconst instance: Instance workInProgress.stateNode;const currentHostContext getHostContext();// TODO: Experiencing an error where oldProps is null. Suggests a host// component is hitting the resume path. Figure out why. Possibly// related to hidden.// 注意这里const updatePayload prepareUpdate(instance,type,oldProps,newProps,rootContainerInstance,currentHostContext,);// TODO: Type this specific to this type of component.workInProgress.updateQueue (updatePayload: any);// If the update payload indicates that there is a change or if there// is a new ref we mark this as an update. All the work is done in commitWork.if (updatePayload) {markUpdate(workInProgress);}
};进入 prepareUpdate// 忽略 DEV 判断这里直接 return 了 diffProperties 的调用
export function prepareUpdate(domElement: Instance,type: string,oldProps: Props,newProps: Props,rootContainerInstance: Container,hostContext: HostContext,
): null | Arraymixed {if (__DEV__) {const hostContextDev ((hostContext: any): HostContextDev);if (typeof newProps.children ! typeof oldProps.children (typeof newProps.children string ||typeof newProps.children number)) {const string newProps.children;const ownAncestorInfo updatedAncestorInfo(hostContextDev.ancestorInfo,type,);validateDOMNesting(null, string, ownAncestorInfo);}}return diffProperties(domElement,type,oldProps,newProps,rootContainerInstance,);
}进入 diffProperties// 这个方法和前文中的 setInitialProperties 有一定的类似, 根据不同的节点做不同的操作
// Calculate the diff between the two objects.
export function diffProperties(domElement: Element,tag: string,lastRawProps: Object,nextRawProps: Object,rootContainerElement: Element | Document,
): null | Arraymixed {if (__DEV__) {validatePropertiesInDevelopment(tag, nextRawProps);}let updatePayload: null | Arrayany null;let lastProps: Object;let nextProps: Object;switch (tag) {case input:lastProps ReactDOMInput.getHostProps(domElement, lastRawProps);nextProps ReactDOMInput.getHostProps(domElement, nextRawProps);updatePayload [];break;case option:lastProps ReactDOMOption.getHostProps(domElement, lastRawProps);nextProps ReactDOMOption.getHostProps(domElement, nextRawProps);updatePayload [];break;case select:lastProps ReactDOMSelect.getHostProps(domElement, lastRawProps);nextProps ReactDOMSelect.getHostProps(domElement, nextRawProps);updatePayload [];break;case textarea:lastProps ReactDOMTextarea.getHostProps(domElement, lastRawProps);nextProps ReactDOMTextarea.getHostProps(domElement, nextRawProps);updatePayload [];break;default:lastProps lastRawProps;nextProps nextRawProps;if (typeof lastProps.onClick ! function typeof nextProps.onClick function) {// TODO: This cast may not be sound for SVG, MathML or custom elements.trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));}break;}assertValidProps(tag, nextProps);let propKey;let styleName;let styleUpdates null;// 那么接下去会有两个循环// 第一个循环是循环 lastProps, 就是上一次渲染的结果产生的props// 这是第一次大循环: 找到在旧的props上有的属性在新的props上没有的也就是找到前后对比中删除的propsfor (propKey in lastProps) {// 对 新旧 props 进行循环判断: 新props有key 或 旧props没有key 或 旧props为null 则跳过此keyif (nextProps.hasOwnProperty(propKey) ||!lastProps.hasOwnProperty(propKey) ||lastProps[propKey] null) {// 符合这个条件不是被删除的属性不会加到最后的 updatePayloadcontinue;}// 对符合被删除属性来说进行删除 style 的操作if (propKey STYLE) {const lastStyle lastProps[propKey];for (styleName in lastStyle) {if (lastStyle.hasOwnProperty(styleName)) {if (!styleUpdates) {styleUpdates {};}styleUpdates[styleName] ;}}// 后面的其他判断都没有做什么事情可以跳过了} else if (propKey DANGEROUSLY_SET_INNER_HTML || propKey CHILDREN) {// Noop. This is handled by the clear text mechanism.} else if (propKey SUPPRESS_CONTENT_EDITABLE_WARNING ||propKey SUPPRESS_HYDRATION_WARNING) {// Noop} else if (propKey AUTOFOCUS) {// Noop. It doesnt work on updates anyway.} else if (registrationNameModules.hasOwnProperty(propKey)) {// This is a special case. If any listener updates we need to ensure// that the current fiber pointer gets updated so we need a commit// to update this element.if (!updatePayload) {updatePayload [];}} else {// For all other deleted properties we add it to the queue. We use// the whitelist in the commit phase instead.// 注意这里加入 updatePayload 的方式是 一次加入 key, value 这2个(updatePayload updatePayload || []).push(propKey, null);}}// 这是第二次大循环, nextProps 就是新的propsfor (propKey in nextProps) {// 处理 新旧 propsconst nextProp nextProps[propKey];const lastProp lastProps ! null ? lastProps[propKey] : undefined;// 新props没有这个key(这个key在原型链上不在自己)或 两个 prop 相同或两个prop 都为 nullif (!nextProps.hasOwnProperty(propKey) ||nextProp lastProp ||(nextProp null lastProp null)) {// 符合上述条件跳过continue;}// 对于 style 类型的 props 的处理, 判断每个 style 的key是否有变化// 下面会有两个循环来处理if (propKey STYLE) {if (__DEV__) {if (nextProp) {// Freeze the next style object so that we can assume it wont be// mutated. We have already warned for this in the past.Object.freeze(nextProp);}}if (lastProp) {// Unset styles on lastProp but not on nextProp.for (styleName in lastProp) {if (lastProp.hasOwnProperty(styleName) (!nextProp || !nextProp.hasOwnProperty(styleName))) {if (!styleUpdates) {styleUpdates {};}styleUpdates[styleName] ;}}// Update styles that changed since lastProp.for (styleName in nextProp) {if (nextProp.hasOwnProperty(styleName) lastProp[styleName] ! nextProp[styleName]) {if (!styleUpdates) {styleUpdates {};}styleUpdates[styleName] nextProp[styleName];}}} else {// Relies on updateStylesByID not mutating styleUpdates.if (!styleUpdates) {if (!updatePayload) {updatePayload [];}updatePayload.push(propKey, styleUpdates);}styleUpdates nextProp;}} else if (propKey DANGEROUSLY_SET_INNER_HTML) {const nextHtml nextProp ? nextProp[HTML] : undefined;const lastHtml lastProp ? lastProp[HTML] : undefined;if (nextHtml ! null) {// 两个html不相等则加入if (lastHtml ! nextHtml) {(updatePayload updatePayload || []).push(propKey, nextHtml);}} else {// TODO: It might be too late to clear this if we have children// inserted already.}} else if (propKey CHILDREN) {// 对于 children 的处理if (lastProp ! nextProp (typeof nextProp string || typeof nextProp number)) {// 不同则加入(updatePayload updatePayload || []).push(propKey, nextProp);}} else if (propKey SUPPRESS_CONTENT_EDITABLE_WARNING ||propKey SUPPRESS_HYDRATION_WARNING) {// Noop} else if (registrationNameModules.hasOwnProperty(propKey)) {// 这里是事件绑定相关的处理if (nextProp ! null) {// We eagerly listen to this even though we havent committed yet.if (__DEV__ typeof nextProp ! function) {warnForInvalidEventListener(propKey, nextProp);}ensureListeningTo(rootContainerElement, propKey);}if (!updatePayload lastProp ! nextProp) {// This is a special case. If any listener updates we need to ensure// that the current props pointer gets updated so we need a commit// to update this element.updatePayload [];}} else {// For any other property we always add it to the queue and then we// filter it out using the whitelist during the commit.// 上面都没找到这个属性是新增属性直接加入(updatePayload updatePayload || []).push(propKey, nextProp);}}// 最终处理加入 styleUpdatesif (styleUpdates) {(updatePayload updatePayload || []).push(STYLE, styleUpdates);}// 最终返回return updatePayload;
}在 diffProperties 里的 updatePayload 一开始是一个空的数组并且最终被return对于 completeWork 来说拿到的 updatePayload就是 diffProperties 和 prepareUpdate 返回过来的内容接下去会有一个判断 if (updatePayload) {} 也就是说空数组也是符合这个判断条件的, 也会执行 markUpdate上述标记之后在后续的 commit 的时候进行对应的操作 以上是 updateHostComponent 的过程 具体细节参考代码里标注的中文文档和源码vdom其实就是这些东西通过props来进行 attributes 的判断和处理变化的过程主要是 整个 diffProperties 的处理
