Match-id-ee1618a953547a36c93091149d8747063b69e256

This commit is contained in:
* 2022-02-21 14:04:01 +08:00 committed by *
commit 2dbd2903b7
22 changed files with 156 additions and 161 deletions

View File

@ -110,7 +110,7 @@ export function getPropChangeList(
type: string, type: string,
lastRawProps: Props, lastRawProps: Props,
nextRawProps: Props, nextRawProps: Props,
): Array<any> { ): Map<string, any> {
// 校验两个对象的不同 // 校验两个对象的不同
validateProps(type, nextRawProps); validateProps(type, nextRawProps);
@ -123,11 +123,11 @@ export function getPropChangeList(
} }
export function isTextChild(type: string, props: Props): boolean { export function isTextChild(type: string, props: Props): boolean {
const typeArray = ['textarea', 'option', 'noscript']; if (type === 'textarea' || type === 'option' || type === 'noscript') {
const typeOfPropsChild = ['string', 'number'];
if (typeArray.indexOf(type) >= 0) {
return true; return true;
} else if (typeOfPropsChild.indexOf(typeof props.children) >= 0) { }
const childType = typeof props.children;
if (childType === 'string' || childType === 'number') {
return true; return true;
} else { } else {
return ( return (

View File

@ -52,15 +52,10 @@ export function setDomProps(
// 更新 DOM 属性 // 更新 DOM 属性
export function updateDomProps( export function updateDomProps(
dom: Element, dom: Element,
changeList: Array<any>, changeList: Map<string, any>,
isNativeTag: boolean, isNativeTag: boolean,
): void { ): void {
const listLength = changeList.length; for(const [propName, propVal] of changeList) {
let propName;
let propVal;
for (let i = 0; i < listLength; i++) {
propName = changeList[i].propName;
propVal = changeList[i].propVal;
updateOneProp(dom, propName, isNativeTag, propVal); updateOneProp(dom, propName, isNativeTag, propVal);
} }
} }
@ -69,10 +64,9 @@ export function updateDomProps(
export function compareProps( export function compareProps(
oldProps: Object, oldProps: Object,
newProps: Object, newProps: Object,
): Array<any> { ): Map<string, any> {
let updatesForStyle = {}; let updatesForStyle = {};
const toBeDeletedProps: Array<any> = []; const toUpdateProps = new Map();
const toBeUpdatedProps: Array<any> = [];
const keysOfOldProps = Object.keys(oldProps); const keysOfOldProps = Object.keys(oldProps);
const keysOfNewProps = Object.keys(newProps); const keysOfNewProps = Object.keys(newProps);
@ -104,17 +98,11 @@ export function compareProps(
continue; continue;
} else if (isEventProp(propName)) { } else if (isEventProp(propName)) {
if (!allDelegatedHorizonEvents.has(propName)) { if (!allDelegatedHorizonEvents.has(propName)) {
toBeDeletedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
} else { } else {
// 其它属性都要加入到删除队列里面,等待删除 // 其它属性都要加入到删除队列里面,等待删除
toBeDeletedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
} }
@ -156,10 +144,7 @@ export function compareProps(
} }
} else { // 之前未设置 style 属性或者设置了空值 } else { // 之前未设置 style 属性或者设置了空值
if (Object.keys(updatesForStyle).length === 0) { if (Object.keys(updatesForStyle).length === 0) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, null);
propName,
propVal: null,
});
} }
updatesForStyle = newPropValue; updatesForStyle = newPropValue;
} }
@ -168,41 +153,26 @@ export function compareProps(
oldHTML = oldPropValue ? oldPropValue.__html : undefined; oldHTML = oldPropValue ? oldPropValue.__html : undefined;
if (newHTML != null) { if (newHTML != null) {
if (oldHTML !== newHTML) { if (oldHTML !== newHTML) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} }
} else if (propName === 'children') { } else if (propName === 'children') {
if (typeof newPropValue === 'string' || typeof newPropValue === 'number') { if (typeof newPropValue === 'string' || typeof newPropValue === 'number') {
toBeUpdatedProps.push({ toUpdateProps.set(propName, String(newPropValue));
propName,
propVal: String(newPropValue),
});
} }
} else if (isEventProp(propName)) { } else if (isEventProp(propName)) {
if (!allDelegatedHorizonEvents.has(propName)) { if (!allDelegatedHorizonEvents.has(propName)) {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} else { } else {
toBeUpdatedProps.push({ toUpdateProps.set(propName, newPropValue);
propName,
propVal: newPropValue,
});
} }
} }
// 处理style // 处理style
if (Object.keys(updatesForStyle).length > 0) { if (Object.keys(updatesForStyle).length > 0) {
toBeUpdatedProps.push({ toUpdateProps.set('style', updatesForStyle);
propName: 'style',
propVal: updatesForStyle,
});
} }
return [...toBeDeletedProps, ...toBeUpdatedProps]; return toUpdateProps;
} }

View File

@ -4,7 +4,10 @@
class Component<P,S,C> { class Component<P,S,C> {
props: P; props: P;
context: C; context: C;
state: S; state: S | null;
refs: any;
setState: any;
forceUpdate: any;
constructor(props: P, context: C) { constructor(props: P, context: C) {
this.props = props; this.props = props;

View File

@ -2,7 +2,7 @@ import type { VNode } from '../Types';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { TYPE_COMMON_ELEMENT, TYPE_FRAGMENT, TYPE_PORTAL } from '../../external/JSXElementType'; import { TYPE_COMMON_ELEMENT, TYPE_FRAGMENT, TYPE_PORTAL } from '../../external/JSXElementType';
import { DomText, DomPortal, Fragment, DomComponent } from '../vnode/VNodeTags'; import { DomText, DomPortal, Fragment, DomComponent } from '../vnode/VNodeTags';
import {updateVNode, createVNodeFromElement, updateVNodePath, createFragmentVNode, createPortalVNode, createDomTextVNode} from '../vnode/VNodeCreator'; import {updateVNode, createVNodeFromElement, createFragmentVNode, createPortalVNode, createDomTextVNode} from '../vnode/VNodeCreator';
import { import {
isSameType, isSameType,
getIteratorFn, getIteratorFn,
@ -209,11 +209,6 @@ function getOldNodeFromMap(nodeMap: Map<string | number, VNode>, newIdx: number,
return null; return null;
} }
function setCIndex(vNode: VNode, idx: number) {
vNode.cIndex = idx;
updateVNodePath(vNode);
}
// diff数组类型的节点核心算法 // diff数组类型的节点核心算法
function diffArrayNodesHandler( function diffArrayNodesHandler(
parentNode: VNode, parentNode: VNode,
@ -274,7 +269,8 @@ function diffArrayNodesHandler(
theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing); theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing);
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
setCIndex(newNode, leftIdx); newNode.cIndex = leftIdx;
newNode.path = newNode.parent.path + newNode.cIndex;
appendNode(newNode); appendNode(newNode);
oldNode = nextOldNode; oldNode = nextOldNode;
} }
@ -347,11 +343,23 @@ function diffArrayNodesHandler(
// 4. 新节点还有一部分,但是老节点已经没有了 // 4. 新节点还有一部分,但是老节点已经没有了
if (oldNode === null) { if (oldNode === null) {
let isDirectAdd = false;
// TODO: 是否可以扩大至非dom类型节点
// 如果dom节点在上次添加前没有节点说明本次添加时可以直接添加到最后不需要通过 getSiblingDom 函数找到 before 节点
if (parentNode.tag === DomComponent && parentNode.oldProps?.children?.length === 0 && rightIdx - leftIdx === newChildren.length) {
isDirectAdd = true;
}
for (; leftIdx < rightIdx; leftIdx++) { for (; leftIdx < rightIdx; leftIdx++) {
newNode = getNewNode(parentNode, newChildren[leftIdx], null); newNode = getNewNode(parentNode, newChildren[leftIdx], null);
if (newNode !== null) { if (newNode !== null) {
theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing); if (isComparing) {
FlagUtils.setAddition(newNode);
}
if (isDirectAdd) {
FlagUtils.markDirectAddition(newNode);
}
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
appendNode(newNode); appendNode(newNode);
} }
@ -460,7 +468,7 @@ function setVNodesCIndex(startChild: VNode, startIdx: number) {
while (node !== null) { while (node !== null) {
node.cIndex = idx; node.cIndex = idx;
updateVNodePath(node); node.path = node.parent.path + node.cIndex;
node = node.next; node = node.next;
idx++; idx++;
} }
@ -471,7 +479,7 @@ function diffIteratorNodesHandler(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChildrenIterable: Iterable<any>, newChildrenIterable: Iterable<any>,
isComparing: boolean = true isComparing: boolean
): VNode | null { ): VNode | null {
const iteratorFn = getIteratorFn(newChildrenIterable); const iteratorFn = getIteratorFn(newChildrenIterable);
const iteratorObj = iteratorFn.call(newChildrenIterable); const iteratorObj = iteratorFn.call(newChildrenIterable);
@ -511,7 +519,7 @@ function diffStringNodeHandler(
} }
newTextNode.parent = parentNode; newTextNode.parent = parentNode;
newTextNode.cIndex = 0; newTextNode.cIndex = 0;
updateVNodePath(newTextNode); newTextNode.path = newTextNode.parent.path + newTextNode.cIndex;
return newTextNode; return newTextNode;
} }
@ -589,7 +597,7 @@ function diffObjectNodeHandler(
resultNode.parent = parentNode; resultNode.parent = parentNode;
resultNode.cIndex = 0; resultNode.cIndex = 0;
updateVNodePath(resultNode); resultNode.path = resultNode.parent.path + resultNode.cIndex;
if (startDelVNode) { if (startDelVNode) {
deleteVNodes(parentNode, startDelVNode); deleteVNodes(parentNode, startDelVNode);
} }
@ -604,7 +612,7 @@ export function createChildrenByDiff(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChild: any, newChild: any,
isComparing: boolean = true isComparing: boolean
): VNode | null { ): VNode | null {
const isFragment = isNoKeyFragment(newChild); const isFragment = isNoKeyFragment(newChild);
newChild = isFragment ? newChild.props.children : newChild; newChild = isFragment ? newChild.props.children : newChild;

View File

@ -11,7 +11,6 @@ import {
} from '../vnode/VNodeTags'; } from '../vnode/VNodeTags';
import { getContextChangeCtx, setContextCtx, setNamespaceCtx } from '../ContextSaver'; import { getContextChangeCtx, setContextCtx, setNamespaceCtx } from '../ContextSaver';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import componentRenders from './index'; import componentRenders from './index';
@ -64,11 +63,6 @@ export function captureVNode(processing: VNode): VNode | null {
return component.captureRender(processing, shouldUpdate); return component.captureRender(processing, shouldUpdate);
} }
// 创建孩子节点
export function createVNodeChildren(processing: VNode, nextChildren: any) {
return createChildrenByDiff(processing, processing.child, nextChildren, !processing.isCreated);
}
export function markRef(processing: VNode) { export function markRef(processing: VNode) {
const ref = processing.ref; const ref = processing.ref;
if ((processing.isCreated && ref !== null) || (!processing.isCreated && processing.oldRef !== ref)) { if ((processing.isCreated && ref !== null) || (!processing.isCreated && processing.oldRef !== ref)) {

View File

@ -21,7 +21,7 @@ import {
markGetSnapshotBeforeUpdate, markGetSnapshotBeforeUpdate,
} from './class/ClassLifeCycleProcessor'; } from './class/ClassLifeCycleProcessor';
import { FlagUtils, DidCapture } from '../vnode/VNodeFlags'; import { FlagUtils, DidCapture } from '../vnode/VNodeFlags';
import { createVNodeChildren, markRef } from './BaseComponent'; import { markRef } from './BaseComponent';
import { import {
createUpdateArray, createUpdateArray,
processUpdates, processUpdates,
@ -29,6 +29,7 @@ import {
import { getContextChangeCtx, setContextChangeCtx } from '../ContextSaver'; import { getContextChangeCtx, setContextChangeCtx } from '../ContextSaver';
import { setProcessingClassVNode } from '../GlobalVar'; import { setProcessingClassVNode } from '../GlobalVar';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator'; import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 获取当前节点的context // 获取当前节点的context
export function getCurrentContext(clazz, processing: VNode) { export function getCurrentContext(clazz, processing: VNode) {
@ -80,7 +81,7 @@ function createChildren(clazz: any, processing: VNode) {
? null ? null
: inst.render(); : inst.render();
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -5,7 +5,7 @@ import {resetDepContexts} from '../components/context/Context';
import {getOldContext} from '../components/context/CompatibleContext'; import {getOldContext} from '../components/context/CompatibleContext';
import {FlagUtils} from '../vnode/VNodeFlags'; import {FlagUtils} from '../vnode/VNodeFlags';
import {exeFunctionHook} from '../hooks/HookMain'; import {exeFunctionHook} from '../hooks/HookMain';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function captureIndeterminateComponent( function captureIndeterminateComponent(
processing: VNode, processing: VNode,
@ -25,7 +25,7 @@ function captureIndeterminateComponent(
const newElements = exeFunctionHook(funcComp, props, context, processing); const newElements = exeFunctionHook(funcComp, props, context, processing);
processing.tag = FunctionComponent; processing.tag = FunctionComponent;
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -1,7 +1,7 @@
import type {VNode, ContextType} from '../Types'; import type {VNode, ContextType} from '../Types';
import {resetDepContexts, getNewContext} from '../components/context/Context'; import {resetDepContexts, getNewContext} from '../components/context/Context';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function captureContextConsumer(processing: VNode) { function captureContextConsumer(processing: VNode) {
const context: ContextType<any> = processing.type; const context: ContextType<any> = processing.type;
@ -12,7 +12,7 @@ function captureContextConsumer(processing: VNode) {
const contextVal = getNewContext(processing, context); const contextVal = getNewContext(processing, context);
const newChildren = renderFunc(contextVal); const newChildren = renderFunc(contextVal);
processing.child = createVNodeChildren(processing, newChildren); processing.child = createChildrenByDiff(processing, processing.child, newChildren, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -1,18 +1,18 @@
import type {VNode, ContextType, ProviderType} from '../Types'; import type { VNode, ContextType, ProviderType } from '../Types';
import {createVNodeChildren} from './BaseComponent'; import { isSame } from '../utils/compare';
import {isSame} from '../utils/compare'; import { ClassComponent, ContextProvider } from '../vnode/VNodeTags';
import {ClassComponent, ContextProvider} from '../vnode/VNodeTags'; import { pushForceUpdate } from '../UpdateHandler';
import {pushForceUpdate} from '../UpdateHandler';
import { import {
getContextChangeCtx, getContextChangeCtx,
resetContextCtx, resetContextCtx,
setContextCtx, setContextCtx,
} from '../ContextSaver'; } from '../ContextSaver';
import {getFirstChild, travelVNodeTree} from '../vnode/VNodeUtils'; import { travelVNodeTree } from '../vnode/VNodeUtils';
import {launchUpdateFromVNode} from '../TreeBuilder'; import { launchUpdateFromVNode } from '../TreeBuilder';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import {setParentsChildShouldUpdate} from '../vnode/VNodeShouldUpdate'; import { setParentsChildShouldUpdate } from '../vnode/VNodeShouldUpdate';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 从依赖中找到匹配context的VNode // 从依赖中找到匹配context的VNode
function matchDependencies(depContexts, context, vNode): boolean { function matchDependencies(depContexts, context, vNode): boolean {
@ -56,7 +56,7 @@ function handleContextChange(processing: VNode, context: ContextType<any>): void
}, node => }, node =>
// 如果这是匹配的provider则不要更深入地扫描 // 如果这是匹配的provider则不要更深入地扫描
node.tag === ContextProvider && node.type === processing.type node.tag === ContextProvider && node.type === processing.type
, processing); , processing, null);
// 找到了依赖context的子节点触发一次更新 // 找到了依赖context的子节点触发一次更新
if (isMatch) { if (isMatch) {
@ -92,7 +92,7 @@ function captureContextProvider(processing: VNode): VNode | null {
} }
const newElements = newProps.children; const newElements = newProps.children;
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -13,9 +13,10 @@ import {
isTextChild, isTextChild,
} from '../../dom/DOMOperator'; } from '../../dom/DOMOperator';
import { FlagUtils } from '../vnode/VNodeFlags'; import { FlagUtils } from '../vnode/VNodeFlags';
import { createVNodeChildren, markRef } from './BaseComponent'; import { markRef } from './BaseComponent';
import { DomComponent, DomPortal, DomText } from '../vnode/VNodeTags'; import { DomComponent, DomPortal, DomText } from '../vnode/VNodeTags';
import { travelVNodeTree } from '../vnode/VNodeUtils'; import { travelVNodeTree } from '../vnode/VNodeUtils';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
function updateDom( function updateDom(
processing: VNode, processing: VNode,
@ -44,7 +45,7 @@ function updateDom(
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} else { } else {
// 其它的类型,数据有变化才标记更新 // 其它的类型,数据有变化才标记更新
if (changeList.length) { if (changeList.size) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }
@ -88,7 +89,7 @@ export function bubbleRender(processing: VNode) {
}, node => }, node =>
// 已经append到父节点或者是DomPortal都不需要处理child了 // 已经append到父节点或者是DomPortal都不需要处理child了
node.tag === DomComponent || node.tag === DomText || node.tag === DomPortal node.tag === DomComponent || node.tag === DomText || node.tag === DomPortal
, processing); , processing, null);
} }
processing.realNode = dom; processing.realNode = dom;
@ -123,7 +124,7 @@ function captureDomComponent(processing: VNode): VNode | null {
} }
markRef(processing); markRef(processing);
processing.child = createVNodeChildren(processing, nextChildren); processing.child = createChildrenByDiff(processing, processing.child, nextChildren, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -1,7 +1,6 @@
import type { VNode } from '../Types'; import type { VNode } from '../Types';
import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver'; import { resetNamespaceCtx, setNamespaceCtx } from '../ContextSaver';
import { createChildrenByDiff } from '../diff/nodeDiffComparator'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
import { createVNodeChildren } from './BaseComponent';
import { prePortal } from '../../dom/DOMOperator'; import { prePortal } from '../../dom/DOMOperator';
export function bubbleRender(processing: VNode) { export function bubbleRender(processing: VNode) {
@ -17,9 +16,9 @@ function capturePortalComponent(processing: VNode) {
const newElements = processing.props; const newElements = processing.props;
if (processing.isCreated) { if (processing.isCreated) {
processing.child = createChildrenByDiff(processing, null, newElements); processing.child = createChildrenByDiff(processing, null, newElements, true);
} else { } else {
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
} }
return processing.child; return processing.child;
} }

View File

@ -1,11 +1,11 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {createVNodeChildren} from './BaseComponent'; import { createChildrenByDiff } from '../diff/nodeDiffComparator';
export function bubbleRender() {} export function bubbleRender() {}
function captureFragment(processing: VNode) { function captureFragment(processing: VNode) {
const newElement = processing.props; const newElement = processing.props;
processing.child = createVNodeChildren(processing, newElement); processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -4,11 +4,11 @@ import {mergeDefaultProps} from './LazyComponent';
import {getOldContext} from '../components/context/CompatibleContext'; import {getOldContext} from '../components/context/CompatibleContext';
import {resetDepContexts} from '../components/context/Context'; import {resetDepContexts} from '../components/context/Context';
import {exeFunctionHook} from '../hooks/HookMain'; import {exeFunctionHook} from '../hooks/HookMain';
import {createVNodeChildren} from './BaseComponent';
import {ForwardRef} from '../vnode/VNodeTags'; import {ForwardRef} from '../vnode/VNodeTags';
import {FlagUtils, Update} from '../vnode/VNodeFlags'; import {FlagUtils, Update} from '../vnode/VNodeFlags';
import {getContextChangeCtx} from '../ContextSaver'; import {getContextChangeCtx} from '../ContextSaver';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
// 在useState, useReducer的时候会触发state变化 // 在useState, useReducer的时候会触发state变化
let stateChange = false; let stateChange = false;
@ -79,7 +79,7 @@ export function captureFunctionComponent(
return onlyUpdateChildVNodes(processing); return onlyUpdateChildVNodes(processing);
} }
processing.child = createVNodeChildren(processing, newElements); processing.child = createChildrenByDiff(processing, processing.child, newElements, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -1,7 +1,7 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {mergeDefaultProps} from './LazyComponent'; import {mergeDefaultProps} from './LazyComponent';
import {updateVNode, onlyUpdateChildVNodes, updateVNodePath, createFragmentVNode, createUndeterminedVNode} from '../vnode/VNodeCreator'; import {updateVNode, onlyUpdateChildVNodes, createFragmentVNode, createUndeterminedVNode} from '../vnode/VNodeCreator';
import {shallowCompare} from '../utils/compare'; import {shallowCompare} from '../utils/compare';
import { import {
TYPE_FRAGMENT, TYPE_FRAGMENT,
@ -29,7 +29,7 @@ export function captureMemoComponent(
} }
newChild.parent = processing; newChild.parent = processing;
newChild.ref = processing.ref; newChild.ref = processing.ref;
updateVNodePath(newChild); newChild.path = newChild.parent.path + newChild.cIndex;
processing.child = newChild; processing.child = newChild;
return newChild; return newChild;
@ -48,7 +48,7 @@ export function captureMemoComponent(
const newChild = updateVNode(firstChild, newProps); const newChild = updateVNode(firstChild, newProps);
newChild.parent = processing; newChild.parent = processing;
newChild.cIndex = 0; newChild.cIndex = 0;
updateVNodePath(newChild); newChild.path = newChild.parent.path + newChild.cIndex;
newChild.ref = processing.ref; newChild.ref = processing.ref;
processing.child = newChild; processing.child = newChild;

View File

@ -1,7 +1,7 @@
import type {VNode, PromiseType} from '../Types'; import type {VNode, PromiseType} from '../Types';
import {FlagUtils, Interrupted} from '../vnode/VNodeFlags'; import {FlagUtils, Interrupted} from '../vnode/VNodeFlags';
import {onlyUpdateChildVNodes, updateVNode, updateVNodePath, createFragmentVNode} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes, updateVNode, createFragmentVNode} from '../vnode/VNodeCreator';
import { import {
ClassComponent, ClassComponent,
IncompleteClassComponent, IncompleteClassComponent,
@ -44,7 +44,7 @@ function createFallback(processing: VNode, fallbackChildren) {
fallbackFragment.parent = processing; fallbackFragment.parent = processing;
fallbackFragment.eIndex = 1; fallbackFragment.eIndex = 1;
fallbackFragment.cIndex = 1; fallbackFragment.cIndex = 1;
updateVNodePath(fallbackFragment); fallbackFragment.path = fallbackFragment.parent.path + fallbackFragment.cIndex;
processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback; processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback;
return fallbackFragment; return fallbackFragment;
@ -76,7 +76,7 @@ function createSuspenseChildren(processing: VNode, newChildren) {
childFragment.parent = processing; childFragment.parent = processing;
childFragment.cIndex = 0; childFragment.cIndex = 0;
updateVNodePath(childFragment); childFragment.path = childFragment.parent.path + childFragment.cIndex;
processing.child = childFragment; processing.child = childFragment;
processing.promiseResolve = false; processing.promiseResolve = false;
return processing.child; return processing.child;

View File

@ -1,10 +1,10 @@
import type {VNode} from '../Types'; import type {VNode} from '../Types';
import {throwIfTrue} from '../utils/throwIfTrue'; import {throwIfTrue} from '../utils/throwIfTrue';
import {processUpdates} from '../UpdateHandler'; import {processUpdates} from '../UpdateHandler';
import {createVNodeChildren} from './BaseComponent';
import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver'; import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver';
import {resetOldCtx} from '../components/context/CompatibleContext'; import {resetOldCtx} from '../components/context/CompatibleContext';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
export function bubbleRender(processing: VNode) { export function bubbleRender(processing: VNode) {
resetNamespaceCtx(processing); resetNamespaceCtx(processing);
@ -33,7 +33,7 @@ function updateTreeRoot(processing) {
if (newElement === oldElement) { if (newElement === oldElement) {
return onlyUpdateChildVNodes(processing); return onlyUpdateChildVNodes(processing);
} }
processing.child = createVNodeChildren(processing, newElement); processing.child = createChildrenByDiff(processing, processing.child, newElement, !processing.isCreated);
return processing.child; return processing.child;
} }

View File

@ -18,7 +18,7 @@ export function callDerivedStateFromProps(
getDerivedStateFromProps: (props: object, state: object) => object, getDerivedStateFromProps: (props: object, state: object) => object,
nextProps: object, nextProps: object,
) { ) {
if (typeof getDerivedStateFromProps === 'function') { if (getDerivedStateFromProps) {
const oldState = processing.state; const oldState = processing.state;
// 调用class组件的getDerivedStateFromProps函数 // 调用class组件的getDerivedStateFromProps函数
@ -57,7 +57,7 @@ export function callShouldComponentUpdate(
) { ) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.shouldComponentUpdate === 'function') { if (inst.shouldComponentUpdate) {
return inst.shouldComponentUpdate(newProps, newState, newContext); return inst.shouldComponentUpdate(newProps, newState, newContext);
} }
@ -91,10 +91,10 @@ export function callConstructor(processing: VNode, ctor: any, props: any): any {
export function callComponentWillMount(processing, inst, newProps?) { export function callComponentWillMount(processing, inst, newProps?) {
const oldState = inst.state; const oldState = inst.state;
if (typeof inst.componentWillMount === 'function') { if (inst.componentWillMount) {
inst.componentWillMount(); inst.componentWillMount();
} }
if (typeof inst.UNSAFE_componentWillMount === 'function') { if (inst.UNSAFE_componentWillMount) {
inst.UNSAFE_componentWillMount(); inst.UNSAFE_componentWillMount();
} }
@ -108,21 +108,21 @@ export function callComponentWillMount(processing, inst, newProps?) {
} }
export function callComponentWillUpdate(inst, newProps, newState, nextContext) { export function callComponentWillUpdate(inst, newProps, newState, nextContext) {
if (typeof inst.componentWillUpdate === 'function') { if (inst.componentWillUpdate) {
inst.componentWillUpdate(newProps, newState, nextContext); inst.componentWillUpdate(newProps, newState, nextContext);
} }
if (typeof inst.UNSAFE_componentWillUpdate === 'function') { if (inst.UNSAFE_componentWillUpdate) {
inst.UNSAFE_componentWillUpdate(newProps, newState, nextContext); inst.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
} }
} }
export function callComponentWillReceiveProps(inst, newProps: object, newContext: object) { export function callComponentWillReceiveProps(inst, newProps: object, newContext: object) {
const oldState = inst.state; const oldState = inst.state;
if (typeof inst.componentWillReceiveProps === 'function') { if (inst.componentWillReceiveProps) {
inst.componentWillReceiveProps(newProps, newContext); inst.componentWillReceiveProps(newProps, newContext);
} }
if (typeof inst.UNSAFE_componentWillReceiveProps === 'function') { if (inst.UNSAFE_componentWillReceiveProps) {
inst.UNSAFE_componentWillReceiveProps(newProps, newContext); inst.UNSAFE_componentWillReceiveProps(newProps, newContext);
} }
if (inst.state !== oldState) { if (inst.state !== oldState) {
@ -132,21 +132,21 @@ export function callComponentWillReceiveProps(inst, newProps: object, newContext
export function markComponentDidMount(processing: VNode) { export function markComponentDidMount(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.componentDidMount === 'function') { if (inst.componentDidMount) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }
export function markGetSnapshotBeforeUpdate(processing: VNode) { export function markGetSnapshotBeforeUpdate(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.getSnapshotBeforeUpdate === 'function') { if (inst.getSnapshotBeforeUpdate) {
FlagUtils.markSnapshot(processing); FlagUtils.markSnapshot(processing);
} }
} }
export function markComponentDidUpdate(processing: VNode) { export function markComponentDidUpdate(processing: VNode) {
const inst = processing.realNode; const inst = processing.realNode;
if (typeof inst.componentDidUpdate === 'function') { if (inst.componentDidUpdate) {
FlagUtils.markUpdate(processing); FlagUtils.markUpdate(processing);
} }
} }

View File

@ -17,7 +17,7 @@ import {
SuspenseComponent, SuspenseComponent,
MemoComponent, MemoComponent,
} from '../vnode/VNodeTags'; } from '../vnode/VNodeTags';
import { FlagUtils, ResetText, Clear, Update } from '../vnode/VNodeFlags'; import { FlagUtils, ResetText, Clear, Update, DirectAddition } from '../vnode/VNodeFlags';
import { mergeDefaultProps } from '../render/LazyComponent'; import { mergeDefaultProps } from '../render/LazyComponent';
import { import {
submitDomUpdate, submitDomUpdate,
@ -147,7 +147,7 @@ function hideOrUnhideAllChildren(vNode, isHidden) {
unHideDom(node.tag, instance, node.props); unHideDom(node.tag, instance, node.props);
} }
} }
}); }, null, vNode, null);
} }
function attachRef(vNode: VNode) { function attachRef(vNode: VNode) {
@ -216,7 +216,7 @@ function unmountNestedVNodes(vNode: VNode): void {
}, node => }, node =>
// 如果是DomPortal不需要遍历child // 如果是DomPortal不需要遍历child
node.tag === DomPortal node.tag === DomPortal
); , vNode, null);
} }
function submitAddition(vNode: VNode): void { function submitAddition(vNode: VNode): void {
@ -241,6 +241,11 @@ function submitAddition(vNode: VNode): void {
FlagUtils.removeFlag(parent, ResetText); FlagUtils.removeFlag(parent, ResetText);
} }
if ((vNode.flags & DirectAddition) === DirectAddition) {
insertOrAppendPlacementNode(vNode, null, parentDom);
FlagUtils.removeFlag(vNode, DirectAddition);
return;
}
const before = getSiblingDom(vNode); const before = getSiblingDom(vNode);
insertOrAppendPlacementNode(vNode, before, parentDom); insertOrAppendPlacementNode(vNode, before, parentDom);
} }
@ -314,7 +319,7 @@ function unmountDomComponents(vNode: VNode): void {
} }
}, node => }, node =>
// 如果是dom不用再遍历child // 如果是dom不用再遍历child
node.tag === DomComponent || node.tag === DomText, null, (node) => { node.tag === DomComponent || node.tag === DomText, vNode, (node) => {
if (node.tag === DomPortal) { if (node.tag === DomPortal) {
// 当离开portal需要重新设置parent // 当离开portal需要重新设置parent
currentParentIsValid = false; currentParentIsValid = false;

View File

@ -87,7 +87,10 @@ export function submitToRender(treeRoot) {
} }
function beforeSubmit(dirtyNodes: Array<VNode>) { function beforeSubmit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & Snapshot) === Snapshot) { if ((node.flags & Snapshot) === Snapshot) {
callBeforeSubmitLifeCycles(node); callBeforeSubmitLifeCycles(node);
@ -95,11 +98,18 @@ function beforeSubmit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
function submit(dirtyNodes: Array<VNode>) { function submit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
let isAdd;
let isUpdate;
let isDeletion;
let isClear;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & ResetText) === ResetText) { if ((node.flags & ResetText) === ResetText) {
submitResetTextContent(node); submitResetTextContent(node);
@ -112,8 +122,8 @@ function submit(dirtyNodes: Array<VNode>) {
} }
} }
const isAdd = (node.flags & Addition) === Addition; isAdd = (node.flags & Addition) === Addition;
const isUpdate = (node.flags & Update) === Update; isUpdate = (node.flags & Update) === Update;
if (isAdd && isUpdate) { if (isAdd && isUpdate) {
// Addition // Addition
submitAddition(node); submitAddition(node);
@ -122,8 +132,8 @@ function submit(dirtyNodes: Array<VNode>) {
// Update // Update
submitUpdate(node); submitUpdate(node);
} else { } else {
const isDeletion = (node.flags & Deletion) === Deletion; isDeletion = (node.flags & Deletion) === Deletion;
const isClear = (node.flags & Clear) === Clear; isClear = (node.flags & Clear) === Clear;
if (isAdd) { if (isAdd) {
submitAddition(node); submitAddition(node);
FlagUtils.removeFlag(node, Addition); FlagUtils.removeFlag(node, Addition);
@ -139,11 +149,14 @@ function submit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
function afterSubmit(dirtyNodes: Array<VNode>) { function afterSubmit(dirtyNodes: Array<VNode>) {
dirtyNodes.forEach(node => { let node;
const nodesLength = dirtyNodes.length;
for(let i = 0; i < nodesLength; i++) {
node = dirtyNodes[i];
try { try {
if ((node.flags & Update) === Update || (node.flags & Callback) === Callback) { if ((node.flags & Update) === Update || (node.flags & Callback) === Callback) {
callAfterSubmitLifeCycles(node); callAfterSubmitLifeCycles(node);
@ -155,7 +168,7 @@ function afterSubmit(dirtyNodes: Array<VNode>) {
} catch (error) { } catch (error) {
handleSubmitError(node, error); handleSubmitError(node, error);
} }
}); }
} }
export function setRootThrowError(error: any) { export function setRootThrowError(error: any) {

View File

@ -157,10 +157,6 @@ export function createVNode(tag: VNodeTag | string, ...secondArg) {
return vNode; return vNode;
} }
export function updateVNodePath(vNode: VNode) {
vNode.path = vNode.parent.path + vNode.cIndex;
}
export function createVNodeFromElement(element: JSXElement): VNode { export function createVNodeFromElement(element: JSXElement): VNode {
const type = element.type; const type = element.type;
const key = element.key; const key = element.key;
@ -183,7 +179,7 @@ export function onlyUpdateChildVNodes(processing: VNode): VNode | null {
let child: VNode | null = processing.child; let child: VNode | null = processing.child;
while (child !== null) { while (child !== null) {
updateVNode(child, child.props); updateVNode(child, child.props);
updateVNodePath(child); child.path = child.parent.path + child.cIndex;
child = child.next; child = child.next;
} }
} }

View File

@ -5,20 +5,21 @@
import type { VNode } from '../Types'; import type { VNode } from '../Types';
export const InitFlag = /** */ 0b000000000000; export const InitFlag = /** */ 0;
// vNode节点的flags // vNode节点的flags
export const Addition = /** */ 0b100000000000; export const DirectAddition = /** */ 1 << 0; // 在本次更新前入股父dom没有子节点说明本次可以直接添加至父节点不需要通过 getSiblingDom 找到 before 节点
export const Update = /** */ 0b010000000000; export const Addition = /** */ 1 << 1;
export const Deletion = /** */ 0b001000000000; export const Update = /** */ 1 << 2;
export const ResetText =/** */ 0b000100000000; export const Deletion = /** */ 1 << 3;
export const Callback = /** */ 0b000010000000; export const ResetText =/** */ 1 << 4;
export const DidCapture =/** */ 0b000001000000; export const Callback = /** */ 1 << 5;
export const Ref = /** */ 0b000000100000; export const DidCapture =/** */ 1 << 6;
export const Snapshot = /** */ 0b000000010000; export const Ref = /** */ 1 << 7;
export const Interrupted = /** */ 0b000000001000; // 被中断了抛出错误的vNode以及它的父vNode export const Snapshot = /** */ 1 << 8;
export const ShouldCapture =/** */ 0b000000000100; export const Interrupted = /** */ 1 << 9; // 被中断了抛出错误的vNode以及它的父vNode
export const ForceUpdate = /** */ 0b000000000010; // For suspense export const ShouldCapture =/** */ 1 << 11;
export const Clear = /** */ 0b000000000001; export const ForceUpdate = /** */ 1 << 12; // For suspense
export const Clear = /** */ 1 << 13;
const LifecycleEffectArr = Update | Callback | Ref | Snapshot; const LifecycleEffectArr = Update | Callback | Ref | Snapshot;
export class FlagUtils { export class FlagUtils {
@ -44,6 +45,10 @@ export class FlagUtils {
static setAddition(node: VNode) { static setAddition(node: VNode) {
node.flags = Addition; node.flags = Addition;
} }
static markDirectAddition(node: VNode) {
node.flags |= DirectAddition;
}
static markUpdate(node: VNode) { static markUpdate(node: VNode) {
node.flags |= Update; node.flags |= Update;
} }

View File

@ -27,11 +27,11 @@ export function travelChildren(beginVNode: VNode, handleVNode: Function, isFinis
export function travelVNodeTree( export function travelVNodeTree(
beginVNode: VNode, beginVNode: VNode,
handleVNode: Function, handleVNode: Function,
childFilter: Function = () => false, // 返回true不处理child childFilter: ((node: VNode) => boolean) | null, // 返回true不处理child
finishVNode?: VNode, // 结束遍历节点有时候和beginVNode不相同 finishVNode: VNode, // 结束遍历节点有时候和beginVNode不相同
handleWhenToParent?: Function handleWhenToParent: Function | null
): VNode | null { ): VNode | null {
const overVNode = finishVNode || beginVNode; const filter = childFilter === null;
let node = beginVNode; let node = beginVNode;
while (true) { while (true) {
@ -43,20 +43,20 @@ export function travelVNodeTree(
// 找子节点 // 找子节点
const childVNode = node.child; const childVNode = node.child;
if (childVNode !== null && !childFilter(node)) { if (childVNode !== null && (filter || !childFilter(node))) {
childVNode.parent = node; childVNode.parent = node;
node = childVNode; node = childVNode;
continue; continue;
} }
// 回到开始节点 // 回到开始节点
if (node === overVNode) { if (node === finishVNode) {
return null; return null;
} }
// 找兄弟,没有就往上再找兄弟 // 找兄弟,没有就往上再找兄弟
while (node.next === null) { while (node.next === null) {
if (node.parent === null || node.parent === overVNode) { if (node.parent === null || node.parent === finishVNode) {
return null; return null;
} }
node = node.parent; node = node.parent;
@ -119,7 +119,7 @@ export function findDomVNode(vNode: VNode): VNode | null {
return node; return node;
} }
return null; return null;
}); }, null, vNode, null);
} }
export function findDOMByClassInst(inst) { export function findDOMByClassInst(inst) {
@ -169,7 +169,7 @@ export function getSiblingDom(vNode: VNode): Element | null {
// 如果不是dom节点往下找 // 如果不是dom节点往下找
while (!isDomVNode(node)) { while (!isDomVNode(node)) {
// 如果节点也是Addition // 如果节点也是Addition
if ((node.flags & Addition) ===Addition) { if ((node.flags & Addition) === Addition) {
continue findSibling; continue findSibling;
} }
@ -183,7 +183,7 @@ export function getSiblingDom(vNode: VNode): Element | null {
} }
} }
if ((node.flags & Addition) ===InitFlag) { if ((node.flags & Addition) === InitFlag) {
// 找到 // 找到
return node.realNode; return node.realNode;
} }