Match-id-c11e1befe0eb42e72a1ff5aeab9cd80718bdf2ae

This commit is contained in:
* 2022-02-22 16:56:23 +08:00 committed by *
parent 4d173bd7a0
commit 5dd5a50663
11 changed files with 22 additions and 33 deletions

View File

@ -236,7 +236,7 @@ function buildVNodeTree(treeRoot: VNode) {
// 当在componentWillUnmount中调用setStateparent可能是null因为startVNode会被clear // 当在componentWillUnmount中调用setStateparent可能是null因为startVNode会被clear
if (parent !== null) { if (parent !== null) {
resetNamespaceCtx(parent); resetNamespaceCtx(parent);
setNamespaceCtx(parent, parent.outerDom); setNamespaceCtx(parent, parent.realNode);
} }
// 恢复父节点的context // 恢复父节点的context

View File

@ -39,7 +39,7 @@ export type ContextType<T> = {
export type PortalType = { export type PortalType = {
vtype: number; vtype: number;
key: null | string; key: null | string;
outerDom: any; realNode: any;
children: any; children: any;
}; };

View File

@ -3,13 +3,13 @@ import type {PortalType} from '../Types';
export function createPortal( export function createPortal(
children: any, children: any,
outerDom: any, realNode: any,
key: string = '', key: string = '',
): PortalType { ): PortalType {
return { return {
vtype: TYPE_PORTAL, vtype: TYPE_PORTAL,
key: key == '' ? '' : '' + key, key: key == '' ? '' : '' + key,
children, children,
outerDom, realNode,
}; };
} }

View File

@ -153,7 +153,7 @@ function getNewNode(parentNode: VNode, newChild: any, oldNode: VNode | null) {
} }
break; break;
} else if (newChild.vtype === TYPE_PORTAL) { } else if (newChild.vtype === TYPE_PORTAL) {
if (oldNode === null || oldNode.tag !== DomPortal || oldNode.outerDom !== newChild.outerDom) { if (oldNode === null || oldNode.tag !== DomPortal || oldNode.realNode !== newChild.realNode) {
resultNode = createPortalVNode(newChild); resultNode = createPortalVNode(newChild);
} else { } else {
resultNode = updateVNode(oldNode, newChild.children || []); resultNode = updateVNode(oldNode, newChild.children || []);
@ -578,7 +578,7 @@ function diffObjectNodeHandler(
} else if (newChild.vtype === TYPE_PORTAL) { } else if (newChild.vtype === TYPE_PORTAL) {
if (canReuseNode) { if (canReuseNode) {
// 可以复用 // 可以复用
if (canReuseNode.tag === DomPortal && canReuseNode.outerDom === newChild.outerDom) { if (canReuseNode.tag === DomPortal && canReuseNode.realNode === newChild.realNode) {
resultNode = updateVNode(canReuseNode, newChild.children || []); resultNode = updateVNode(canReuseNode, newChild.children || []);
startDelVNode = canReuseNode.next; startDelVNode = canReuseNode.next;
resultNode.next = null; resultNode.next = null;

View File

@ -18,7 +18,7 @@ import componentRenders from './index';
function handlerContext(processing: VNode) { function handlerContext(processing: VNode) {
switch (processing.tag) { switch (processing.tag) {
case TreeRoot: case TreeRoot:
setNamespaceCtx(processing, processing.outerDom); setNamespaceCtx(processing, processing.realNode);
break; break;
case DomComponent: case DomComponent:
setNamespaceCtx(processing); setNamespaceCtx(processing);
@ -29,7 +29,7 @@ function handlerContext(processing: VNode) {
break; break;
} }
case DomPortal: case DomPortal:
setNamespaceCtx(processing, processing.outerDom); setNamespaceCtx(processing, processing.realNode);
break; break;
case ContextProvider: { case ContextProvider: {
const newValue = processing.props.value; const newValue = processing.props.value;

View File

@ -7,12 +7,12 @@ export function bubbleRender(processing: VNode) {
resetNamespaceCtx(processing); resetNamespaceCtx(processing);
if (processing.isCreated) { if (processing.isCreated) {
prePortal(processing.outerDom); prePortal(processing.realNode);
} }
} }
function capturePortalComponent(processing: VNode) { function capturePortalComponent(processing: VNode) {
setNamespaceCtx(processing, processing.outerDom); setNamespaceCtx(processing, processing.realNode);
const newElements = processing.props; const newElements = processing.props;
if (processing.isCreated) { if (processing.isCreated) {

View File

@ -12,7 +12,7 @@ export function bubbleRender(processing: VNode) {
} }
function updateTreeRoot(processing) { function updateTreeRoot(processing) {
setNamespaceCtx(processing, processing.outerDom); setNamespaceCtx(processing, processing.realNode);
const updates = processing.updates; const updates = processing.updates;
throwIfTrue( throwIfTrue(

View File

@ -225,12 +225,9 @@ function submitAddition(vNode: VNode): void {
let tag; let tag;
while (parent !== null) { while (parent !== null) {
tag = parent.tag; tag = parent.tag;
if (tag === DomComponent) { if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
parentDom = parent.realNode; parentDom = parent.realNode;
break; break;
} else if (tag === TreeRoot || tag === DomPortal) {
parentDom = parent.outerDom;
break;
} }
parent = parent.parent; parent = parent.parent;
} }
@ -292,12 +289,9 @@ function unmountDomComponents(vNode: VNode): void {
let tag; let tag;
while (parent !== null) { while (parent !== null) {
tag = parent.tag; tag = parent.tag;
if (tag === DomComponent) { if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
currentParent = parent.realNode; currentParent = parent.realNode;
break; break;
} else if (tag === TreeRoot || tag === DomPortal) {
currentParent = parent.outerDom;
break;
} }
parent = parent.parent; parent = parent.parent;
} }
@ -312,7 +306,7 @@ function unmountDomComponents(vNode: VNode): void {
removeChildDom(currentParent, node.realNode); removeChildDom(currentParent, node.realNode);
} else if (node.tag === DomPortal) { } else if (node.tag === DomPortal) {
if (node.child !== null) { if (node.child !== null) {
currentParent = node.outerDom; currentParent = node.realNode;
} }
} else { } else {
unmountVNode(node); unmountVNode(node);
@ -349,12 +343,9 @@ function submitClear(vNode: VNode): void {
let tag; let tag;
while (parent !== null) { while (parent !== null) {
tag = parent.tag; tag = parent.tag;
if (tag === DomComponent) { if (tag === DomComponent || tag === TreeRoot || tag === DomPortal) {
parentDom = parent.realNode; parentDom = parent.realNode;
break; break;
} else if (tag === TreeRoot || tag === DomPortal) {
parentDom = parent.outerDom;
break;
} }
parent = parent.parent; parent = parent.parent;
} }

View File

@ -39,7 +39,6 @@ export class VNode {
dirtyNodes: Array<VNode> | null = null; // 需要改动的节点数组 dirtyNodes: Array<VNode> | null = null; // 需要改动的节点数组
shouldUpdate: boolean = false; shouldUpdate: boolean = false;
childShouldUpdate: boolean = false; childShouldUpdate: boolean = false;
outerDom: any;
task: any; task: any;
// 使用这个变量来记录修改前的值,用于恢复。 // 使用这个变量来记录修改前的值,用于恢复。
@ -67,7 +66,7 @@ export class VNode {
belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode处理ref的时候使用 belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode处理ref的时候使用
constructor(tag: VNodeTag, props: any, key: null | string, outerDom) { constructor(tag: VNodeTag, props: any, key: null | string, realNode) {
this.tag = tag; // 对应组件的类型比如ClassComponent等 this.tag = tag; // 对应组件的类型比如ClassComponent等
this.key = key; this.key = key;
@ -75,10 +74,9 @@ export class VNode {
switch (tag) { switch (tag) {
case TreeRoot: case TreeRoot:
this.outerDom = outerDom; this.realNode = realNode;
this.task = null; this.task = null;
this.toUpdateNodes = new Set<VNode>(); this.toUpdateNodes = new Set<VNode>();
this.realNode = null;
this.updates = null; this.updates = null;
this.stateCallbacks = null; this.stateCallbacks = null;
this.state = null; this.state = null;

View File

@ -38,8 +38,8 @@ const typeMap = {
[TYPE_LAZY]: LazyComponent, [TYPE_LAZY]: LazyComponent,
}; };
const newVirtualNode = function(tag: VNodeTag, key?: null | string, vNodeProps?: any, outerDom?: any): VNode { const newVirtualNode = function(tag: VNodeTag, key?: null | string, vNodeProps?: any, realNode?: any): VNode {
return new VNode(tag, vNodeProps, key, outerDom); return new VNode(tag, vNodeProps, key, realNode);
}; };
function isClassComponent(comp: Function) { function isClassComponent(comp: Function) {
@ -99,7 +99,7 @@ export function createPortalVNode(portal) {
const children = portal.children ?? []; const children = portal.children ?? [];
const vNode = newVirtualNode(DomPortal, portal.key, children); const vNode = newVirtualNode(DomPortal, portal.key, children);
vNode.shouldUpdate = true; vNode.shouldUpdate = true;
vNode.outerDom = portal.outerDom; vNode.realNode = portal.realNode;
return vNode; return vNode;
} }

View File

@ -210,7 +210,7 @@ function isPortalRoot(vNode, targetContainer) {
while (topVNode !== null) { while (topVNode !== null) {
const grandTag = topVNode.tag; const grandTag = topVNode.tag;
if (grandTag === TreeRoot || grandTag === DomPortal) { if (grandTag === TreeRoot || grandTag === DomPortal) {
const topContainer = topVNode.outerDom; const topContainer = topVNode.realNode;
// 如果topContainer是targetContainer不需要在这里处理 // 如果topContainer是targetContainer不需要在这里处理
if (isSameContainer(topContainer, targetContainer)) { if (isSameContainer(topContainer, targetContainer)) {
return true; return true;
@ -229,7 +229,7 @@ export function getExactNode(targetVNode, targetContainer) {
let vNode = targetVNode; let vNode = targetVNode;
while (vNode !== null) { while (vNode !== null) {
if (vNode.tag === TreeRoot || vNode.tag === DomPortal) { if (vNode.tag === TreeRoot || vNode.tag === DomPortal) {
let container = vNode.outerDom; let container = vNode.realNode;
if (isSameContainer(container, targetContainer)) { if (isSameContainer(container, targetContainer)) {
break; break;
} }