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

Match-id-39ccbc96998f49df9e8a525398082b5413bf72fe

This commit is contained in:
* 2022-04-01 14:45:57 +08:00 committed by *
parent da66b70642
commit 858f669bf7
8 changed files with 42 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
libs/horizon/src/renderer/ContextSaver.ts
View File

@ -1,6 +1,6 @@
/**
* 保存与深度遍历相关的一些context。
* 在深度遍历过程中，begin阶段会修改一些全局的值，在complete阶段会恢复。
* 在深度遍历过程中，capture阶段会修改一些全局的值，在bubble阶段会恢复。
*/
import type { VNode, ContextType } from './Types';
@ -11,98 +11,50 @@ import { ContextProvider } from './vnode/VNodeTags';
// 保存的是“http://www.w3.org/1999/xhtml”或“http://www.w3.org/2000/svg”，
// 用于识别是使用document.createElement()还是使用document.createElementNS()创建DOM
const CTX_NAMESPACE = 'CTX_NAMESPACE';
// 保存的是Horizon.createContext()的值，或Provider重新设置的值
const CTX_CONTEXT = 'CTX_CONTEXT';
// 旧版context API,是否更改。
const CTX_OLD_CHANGE = 'CTX_OLD_CHANGE';
let ctxOldChange = false;
let ctxNamespace = '';
function setContext(vNode: VNode, contextName, value) {
if (vNode.contexts === null) {
vNode.contexts = {
[contextName]: value,
};
} else {
vNode.contexts[contextName] = value;
}
}
function getContext(vNode: VNode, contextName) {
if (vNode.contexts !== null) {
return vNode.contexts[contextName];
}
}
// capture阶段设置
function setNamespaceCtx(vNode: VNode, dom?: Container) {
export function setNamespaceCtx(vNode: VNode, dom?: Container) {
const nextContext = getNSCtx(ctxNamespace, vNode.type, dom);
setContext(vNode, CTX_NAMESPACE, ctxNamespace);
vNode.contexts = ctxNamespace;
ctxNamespace = nextContext;
}
// bubble阶段恢复
function resetNamespaceCtx(vNode: VNode) {
ctxNamespace = getContext(vNode, CTX_NAMESPACE);
export function resetNamespaceCtx(vNode: VNode) {
ctxNamespace = vNode.contexts;
}
function getNamespaceCtx(): string {
export function getNamespaceCtx(): string {
return ctxNamespace;
}
function setContextCtx<T>(providerVNode: VNode, nextValue: T) {
export function setContext<T>(providerVNode: VNode, nextValue: T) {
const context: ContextType<T> = providerVNode.type._context;
setContext(providerVNode, CTX_CONTEXT, context.value);
providerVNode.contexts = context.value;
context.value = nextValue;
}
function resetContextCtx(providerVNode: VNode) {
export function resetContext(providerVNode: VNode) {
const context: ContextType<any> = providerVNode.type._context;
context.value = getContext(providerVNode, CTX_CONTEXT);
context.value = providerVNode.contexts;
}
// 在局部更新时，恢复父节点的context
function recoverParentsContextCtx(vNode: VNode) {
export function recoverParentContext(vNode: VNode) {
let parent = vNode.parent;
while (parent !== null) {
if (parent.tag === ContextProvider) {
const newValue = parent.props.value;
setContextCtx(parent, newValue);
parent.contexts = parent.props.value;
}
parent = parent.parent;
}
}
function setContextChangeCtx(providerVNode: VNode, didChange: boolean) {
setContext(providerVNode, CTX_OLD_CHANGE, didChange);
ctxOldChange = didChange;
}
function getContextChangeCtx() {
return ctxOldChange;
}
function resetContextChangeCtx(vNode: VNode) {
ctxOldChange = getContext(vNode, CTX_OLD_CHANGE);
}
export {
getNamespaceCtx,
resetNamespaceCtx,
setNamespaceCtx,
setContextCtx,
resetContextCtx,
recoverParentsContextCtx,
setContextChangeCtx,
getContextChangeCtx,
resetContextChangeCtx,
};

4
libs/horizon/src/renderer/TreeBuilder.ts
View File

@ -29,7 +29,7 @@ import {
isExecuting,
setExecuteMode
} from './ExecuteMode';
import { recoverParentsContextCtx, resetNamespaceCtx, setNamespaceCtx } from './ContextSaver';
import { recoverParentContext, resetNamespaceCtx, setNamespaceCtx } from './ContextSaver';
import {
updateChildShouldUpdate,
updateParentsChildShouldUpdate,
@ -231,7 +231,7 @@ function buildVNodeTree(treeRoot: VNode) {
}
// 恢复父节点的context
recoverParentsContextCtx(startVNode);
recoverParentContext(startVNode);
}
// 重置环境变量，为重新进行深度遍历做准备

5
libs/horizon/src/renderer/render/BaseComponent.ts
View File

@ -7,7 +7,7 @@ import {
TreeRoot,
SuspenseComponent,
} from '../vnode/VNodeTags';
import { getContextChangeCtx, setContextCtx, setNamespaceCtx } from '../ContextSaver';
import { setContext, setNamespaceCtx } from '../ContextSaver';
import { FlagUtils } from '../vnode/VNodeFlags';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
import componentRenders from './index';
@ -26,7 +26,7 @@ function handlerContext(processing: VNode) {
break;
case ContextProvider: {
const newValue = processing.props.value;
setContextCtx(processing, newValue);
setContext(processing, newValue);
break;
}
// No Default
@ -41,7 +41,6 @@ export function captureVNode(processing: VNode): VNode | null {
if (
!processing.isCreated &&
processing.oldProps === processing.props &&
!getContextChangeCtx() &&
!processing.shouldUpdate
) {
// 复用还需对stack进行处理

6
libs/horizon/src/renderer/render/ClassComponent.ts
View File

@ -18,7 +18,6 @@ import { markRef } from './BaseComponent';
import {
processUpdates,
} from '../UpdateHandler';
import { getContextChangeCtx } from '../ContextSaver';
import { setProcessingClassVNode } from '../GlobalVar';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
@ -87,7 +86,7 @@ function callUpdateLifeCycle(processing: VNode, nextProps: object, clazz) {
}
}
function markLifeCycle(processing: VNode, nextProps: object, shouldUpdate: Boolean) {
function markLifeCycle(processing: VNode, nextProps: object, shouldUpdate: boolean) {
if (processing.isCreated) {
markComponentDidMount(processing);
} else if (processing.state !== processing.oldState || shouldUpdate) {
@ -136,7 +135,6 @@ export function captureRender(processing: VNode): VNode | null {
// 如果 props, state, context 都没有变化且 isForceUpdate 为 false则不需要更新
shouldUpdate = oldProps !== processing.props ||
inst.state !== processing.state ||
getContextChangeCtx() ||
processing.isForceUpdate;
if (shouldUpdate) {
@ -172,4 +170,4 @@ export function captureRender(processing: VNode): VNode | null {
}
}
export function bubbleRender(processing: VNode) {}
export function bubbleRender() {}

11
libs/horizon/src/renderer/render/ContextProvider.ts
View File

@ -4,9 +4,8 @@ import { isSame } from '../utils/compare';
import { ClassComponent, ContextProvider } from '../vnode/VNodeTags';
import { pushForceUpdate } from '../UpdateHandler';
import {
getContextChangeCtx,
resetContextCtx,
setContextCtx,
resetContext,
setContext,
} from '../ContextSaver';
import { travelVNodeTree } from '../vnode/VNodeUtils';
import { launchUpdateFromVNode } from '../TreeBuilder';
@ -75,14 +74,14 @@ function captureContextProvider(processing: VNode): VNode | null {
const newCtx = newProps.value;
// 更新processing的context值为newProps.value
setContextCtx(processing, newCtx);
setContext(processing, newCtx);
if (oldProps !== null) {
const oldCtx = oldProps.value;
const isSameContext = isSame(oldCtx, newCtx);
if (isSameContext) {
// context没有改变，复用
if (oldProps.children === newProps.children && !getContextChangeCtx()) {
if (oldProps.children === newProps.children) {
return onlyUpdateChildVNodes(processing);
}
} else {
@ -101,6 +100,6 @@ export function captureRender(processing: VNode): VNode | null {
}
export function bubbleRender(processing: VNode) {
resetContextCtx(processing);
resetContext(processing);
}

4
libs/horizon/src/renderer/render/ForwardRef.ts
View File

@ -1,8 +1,8 @@
import type {VNode} from '../Types';
import {captureRender as funCaptureRender} from './FunctionComponent';
export function captureRender(processing: VNode, shouldUpdate?: boolean): VNode | null {
return funCaptureRender(processing, shouldUpdate);
export function captureRender(processing: VNode): VNode | null {
return funCaptureRender(processing);
}
export function bubbleRender() {}

27
libs/horizon/src/renderer/render/FunctionComponent.ts
View File

@ -5,7 +5,6 @@ import { resetDepContexts } from '../components/context/Context';
import { runFunctionWithHooks } from '../hooks/HookMain';
import { ForwardRef } from '../vnode/VNodeTags';
import { FlagUtils, Update } from '../vnode/VNodeFlags';
import { getContextChangeCtx } from '../ContextSaver';
import { onlyUpdateChildVNodes } from '../vnode/VNodeCreator';
import { createChildrenByDiff } from '../diff/nodeDiffComparator';
@ -16,22 +15,10 @@ export function bubbleRender() {
}
// 判断children是否可以复用
function checkIfCanReuseChildren(processing: VNode, shouldUpdate?: boolean) {
let isCanReuse = true;
if (!processing.isCreated) {
const oldProps = processing.oldProps;
const newProps = processing.props;
// 如果props或者context改变了
if (oldProps !== newProps || getContextChangeCtx() || processing.isDepContextChange) {
isCanReuse = false;
}
} else {
isCanReuse = false;
}
return isCanReuse;
function checkIfCanReuseChildren(processing: VNode) {
return !processing.isCreated &&
processing.oldProps === processing.props &&
!processing.isDepContextChange;
}
export function setStateChange(isUpdate) {
@ -46,7 +33,6 @@ export function captureFunctionComponent(
processing: VNode,
funcComp: any,
nextProps: any,
shouldUpdate?: boolean,
) {
// 函数组件内已完成异步动作
if (processing.isSuspended) {
@ -58,7 +44,7 @@ export function captureFunctionComponent(
}
resetDepContexts(processing);
const isCanReuse = checkIfCanReuseChildren(processing, shouldUpdate);
const isCanReuse = checkIfCanReuseChildren(processing);
// 在执行exeFunctionHook前先设置stateChange为false
setStateChange(false);
@ -80,7 +66,7 @@ export function captureFunctionComponent(
return processing.child;
}
export function captureRender(processing: VNode, shouldUpdate?: boolean): VNode | null {
export function captureRender(processing: VNode): VNode | null {
const Component = processing.type;
const unresolvedProps = processing.props;
const resolvedProps =
@ -92,7 +78,6 @@ export function captureRender(processing: VNode, shouldUpdate?: boolean): VNode
processing,
Component,
resolvedProps,
shouldUpdate,
);
}

20
libs/horizon/src/renderer/render/SuspenseComponent.ts
View File

@ -1,17 +1,16 @@
import type {VNode, PromiseType} from '../Types';
import type { VNode, PromiseType } from '../Types';
import {FlagUtils, Interrupted} from '../vnode/VNodeFlags';
import {onlyUpdateChildVNodes, updateVNode, createFragmentVNode} from '../vnode/VNodeCreator';
import { FlagUtils, Interrupted } from '../vnode/VNodeFlags';
import { onlyUpdateChildVNodes, updateVNode, createFragmentVNode } from '../vnode/VNodeCreator';
import {
ClassComponent,
ForwardRef,
FunctionComponent,
SuspenseComponent,
} from '../vnode/VNodeTags';
import {pushForceUpdate} from '../UpdateHandler';
import {launchUpdateFromVNode, tryRenderFromRoot} from '../TreeBuilder';
import {updateShouldUpdateOfTree} from '../vnode/VNodeShouldUpdate';
import {getContextChangeCtx} from '../ContextSaver';
import { pushForceUpdate } from '../UpdateHandler';
import { launchUpdateFromVNode, tryRenderFromRoot } from '../TreeBuilder';
import { updateShouldUpdateOfTree } from '../vnode/VNodeShouldUpdate';
import { markVNodePath } from '../utils/vNodePath';
export enum SuspenseChildStatus {
@ -101,7 +100,7 @@ export function captureSuspenseComponent(processing: VNode) {
}
function updateFallback(processing: VNode): Array<VNode> | VNode | null {
const childFragment: VNode | null= processing.child;
const childFragment: VNode | null = processing.child;
if (childFragment?.childShouldUpdate) {
if (processing.suspenseState.promiseResolved) {
@ -130,7 +129,6 @@ export function captureRender(processing: VNode, shouldUpdate: boolean): Array<V
if (
!processing.isCreated &&
processing.oldProps === processing.props &&
!getContextChangeCtx() &&
!shouldUpdate
) {
if (processing.suspenseState.childStatus === SuspenseChildStatus.ShowFallback) {
@ -178,7 +176,7 @@ export function handleSuspenseChildThrowError(parent: VNode, processing: VNode,
if (processing.tag === ClassComponent) {
if (processing.isCreated) {
// 渲染类组件场景，要标志未完成（否则会触发componentWillUnmount）
processing.isSuspended = true ;
processing.isSuspended = true;
} else {
// 类组件更新，标记强制更新，否则被memo等优化跳过
pushForceUpdate(processing);
@ -187,7 +185,7 @@ export function handleSuspenseChildThrowError(parent: VNode, processing: VNode,
}
if (processing.tag === FunctionComponent || processing.tag === ForwardRef) {
processing.isSuspended= true;
processing.isSuspended = true;
}
// 应该抛出promise未完成更新，标志待更新
processing.shouldUpdate = true;