yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Match-id-734c7025e4bf66d1c909d3f3e46d57554e02aeb1

This commit is contained in:
* 2022-02-17 17:05:45 +08:00 committed by *
parent 74c1452b07
commit f46c73cc6c
2 changed files with 101 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
libs/horizon/src/renderer/vnode/VNode.ts
View File

@ -1,16 +1,17 @@
/** /**
* 虚拟DOM结构体 * 虚拟DOM结构体
*/ */
import {TreeRoot} from './VNodeTags'; import { TreeRoot, FunctionComponent, ClassComponent, DomPortal, DomText, ContextConsumer, ForwardRef, SuspenseComponent, LazyComponent, ClsOrFunComponent, DomComponent, Fragment, ContextProvider, Profiler, MemoComponent, IncompleteClassComponent } from './VNodeTags';
import type {VNodeTag} from './VNodeTags'; import type { VNodeTag } from './VNodeTags';
import type {RefType, ContextType} from '../Types'; import type { RefType, ContextType } from '../Types';
import type {Hook} from '../hooks/HookType'; import type { Hook } from '../hooks/HookType';
export class VNode { export class VNode {
tag: VNodeTag; tag: VNodeTag;
key: string | null; // 唯一标识符 key: string | null; // 唯一标识符
props: any; // 传给组件的props的值，类组件包含defaultProps，Lazy组件不包含
type: any = null; type: any = null;
realNode: any = null; // 如果是类，则存放实例；如果是div这种，则存放真实DOM； realNode: any; // 如果是类，则存放实例；如果是div这种，则存放真实DOM；
// 关系结构 // 关系结构
parent: VNode | null = null; // 父节点 parent: VNode | null = null; // 父节点
@ -20,21 +21,20 @@ export class VNode {
eIndex: number = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致 eIndex: number = 0; // HorizonElement在jsx中的位置，例如：jsx中的null不会生成vNode，所以eIndex和cIndex不一致
ref: RefType | ((handle: any) => void) | null = null; // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上 ref: RefType | ((handle: any) => void) | null = null; // 包裹一个函数，submit阶段使用，比如将外部useRef生成的对象赋值到ref上
props: any; // 传给组件的props的值，类组件包含defaultProps，Lazy组件不包含
oldProps: any = null; oldProps: any = null;
suspensePromises: any = null; // suspense组件的promise列表 suspensePromises: any; // suspense组件的promise列表
changeList: any = null; // DOM的变更列表 changeList: any; // DOM的变更列表
effectList: any[] | null = null; // useEffect 的更新数组 effectList: any[] | null; // useEffect 的更新数组
updates: any[] | null = null; // TreeRoot和ClassComponent使用的更新数组 updates: any[] | null; // TreeRoot和ClassComponent使用的更新数组
stateCallbacks: any[] | null = null; // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组 stateCallbacks: any[] | null; // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组
isForceUpdate: boolean = false; // 是否使用强制更新 isForceUpdate: boolean; // 是否使用强制更新
state: any = null; // ClassComponent和TreeRoot的状态 state: any; // ClassComponent和TreeRoot的状态
hooks: Array<Hook<any, any>> | null = null; // 保存hook hooks: Array<Hook<any, any>> | null; // 保存hook
suspenseChildStatus: string = ''; // Suspense的Children是否显示 suspenseChildStatus: string = ''; // Suspense的Children是否显示
depContexts: Array<ContextType<any>> | null = null; // FunctionComponent和ClassComponent对context的依赖列表 depContexts: Array<ContextType<any>> | null; // FunctionComponent和ClassComponent对context的依赖列表
isDepContextChange: boolean = false; // context是否变更 isDepContextChange: boolean; // context是否变更
dirtyNodes: Array<VNode> | null = null; // 需要改动的节点数组 dirtyNodes: Array<VNode> | null = null; // 需要改动的节点数组
shouldUpdate: boolean = false; shouldUpdate: boolean = false;
childShouldUpdate: boolean = false; childShouldUpdate: boolean = false;
@ -42,12 +42,12 @@ export class VNode {
task: any; task: any;
// 使用这个变量来记录修改前的值，用于恢复。 // 使用这个变量来记录修改前的值，用于恢复。
contexts: any = null; contexts: any;
// 因为LazyComponent会修改tag和type属性，为了能识别，增加一个属性 // 因为LazyComponent会修改tag和type属性，为了能识别，增加一个属性
isLazyComponent: boolean = false; isLazyComponent: boolean;
// 因为LazyComponent会修改type属性，为了在diff中判断是否可以复用，需要增加一个lazyType // 因为LazyComponent会修改type属性，为了在diff中判断是否可以复用，需要增加一个lazyType
lazyType: any = null; lazyType: any;
flags: { flags: {
Addition?: boolean; Addition?: boolean;
Update?: boolean; Update?: boolean;
@ -62,17 +62,17 @@ export class VNode {
ForceUpdate?: boolean; ForceUpdate?: boolean;
Clear?: boolean; Clear?: boolean;
} = {}; } = {};
clearChild: VNode | null = null; clearChild: VNode | null;
// one tree相关属性 // one tree相关属性
isCreated: boolean = true; isCreated: boolean = true;
oldHooks: Array<Hook<any, any>> | null = null; // 保存上一次执行的hook oldHooks: Array<Hook<any, any>> | null; // 保存上一次执行的hook
oldState: any = null; oldState: any;
oldRef: RefType | ((handle: any) => void) | null = null; oldRef: RefType | ((handle: any) => void) | null = null;
suspenseChildThrow = false; suspenseChildThrow: boolean;
oldSuspenseChildStatus: string = ''; // 上一次Suspense的Children是否显示 oldSuspenseChildStatus: string; // 上一次Suspense的Children是否显示
oldChild: VNode | null = null; oldChild: VNode | null = null;
suspenseDidCapture: boolean = false; // suspense是否捕获了异常 suspenseDidCapture: boolean; // suspense是否捕获了异常
promiseResolve: boolean = false; // suspense的promise是否resolve promiseResolve: boolean; // suspense的promise是否resolve
path: string = ''; // 保存从根到本节点的路径 path: string = ''; // 保存从根到本节点的路径
toUpdateNodes: Set<VNode>; // 保存要更新的节点 toUpdateNodes: Set<VNode>; // 保存要更新的节点
@ -85,11 +85,80 @@ export class VNode {
this.props = props; this.props = props;
// 根节点 switch (tag) {
if (tag === TreeRoot) { case TreeRoot:
this.outerDom = outerDom; this.outerDom = outerDom;
this.task = null; this.task = null;
this.toUpdateNodes = new Set<VNode>(); this.toUpdateNodes = new Set<VNode>();
this.realNode = null;
this.updates = null;
this.stateCallbacks = null;
this.state = null;
this.oldState = null;
this.contexts = null;
break;
case FunctionComponent:
this.effectList = null;
this.hooks = null;
this.depContexts = null;
this.isDepContextChange = false;
this.oldHooks = null;
break;
case ClassComponent:
this.realNode = null;
this.updates = null;
this.stateCallbacks = null;
this.isForceUpdate = false;
this.state = null;
this.depContexts = null;
this.isDepContextChange = false;
this.oldState = null;
this.contexts = null;
break;
case ClsOrFunComponent:
this.realNode = null;
this.contexts = null;
break;
case DomPortal:
this.realNode = null;
this.contexts = null;
break;
case DomComponent:
this.realNode = null;
this.changeList = null;
this.contexts = null;
break;
case DomText:
this.realNode = null;
break;
case SuspenseComponent:
this.realNode = null;
this.suspensePromises = null;
this.suspenseChildThrow = false;
this.suspenseDidCapture = false;
this.promiseResolve = false;
this.oldSuspenseChildStatus = '';
break;
case ContextProvider:
this.contexts = null;
break;
case MemoComponent:
this.effectList = null;
break;
case LazyComponent:
this.realNode = null;
this.stateCallbacks = null;
break;
case Fragment:
break;
case ContextConsumer:
break;
case ForwardRef:
break;
case Profiler:
break;
case IncompleteClassComponent:
break;
} }
} }
} }

3
libs/horizon/src/renderer/vnode/VNodeCreator.ts
View File

@ -133,9 +133,8 @@ export function createUndeterminedVNode(type, key, props) {
vNode.type = type; vNode.type = type;
vNode.shouldUpdate = true; vNode.shouldUpdate = true;
// lazy类型的特殊处理
vNode.isLazyComponent = isLazy;
if (isLazy) { if (isLazy) {
vNode.isLazyComponent = isLazy;
vNode.lazyType = type; vNode.lazyType = type;
} }
return vNode; return vNode;