diff --git a/libs/horizon/src/renderer/render/FunctionComponent.ts b/libs/horizon/src/renderer/render/FunctionComponent.ts index af634fe6..a0fba76a 100644 --- a/libs/horizon/src/renderer/render/FunctionComponent.ts +++ b/libs/horizon/src/renderer/render/FunctionComponent.ts @@ -1,18 +1,19 @@ -import type {VNode} from '../Types'; +import type { VNode } from '../Types'; -import {mergeDefaultProps} from './LazyComponent'; -import {resetDepContexts} from '../components/context/Context'; -import {exeFunctionHook} from '../hooks/HookMain'; -import {ForwardRef} from '../vnode/VNodeTags'; -import {FlagUtils, Update} from '../vnode/VNodeFlags'; -import {getContextChangeCtx} from '../ContextSaver'; -import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator'; +import { mergeDefaultProps } from './LazyComponent'; +import { resetDepContexts } from '../components/context/Context'; +import { exeFunctionHook } 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'; // 在useState, useReducer的时候,会触发state变化 let stateChange = false; -export function bubbleRender() {} +export function bubbleRender() { +} // 判断children是否可以复用 function checkIfCanReuseChildren(processing: VNode, shouldUpdate?: boolean) { @@ -51,8 +52,14 @@ export function captureFunctionComponent( processing: VNode, funcComp: any, nextProps: any, - shouldUpdate?: boolean + shouldUpdate?: boolean, ) { + if (processing.isSuspended) { + processing.isCreated = true; + processing.isSuspended = false; + + FlagUtils.markAddition(processing); + } resetDepContexts(processing); const isCanReuse = checkIfCanReuseChildren(processing, shouldUpdate); @@ -89,7 +96,7 @@ export function captureRender(processing: VNode, shouldUpdate?: boolean): VNode processing, Component, resolvedProps, - shouldUpdate + shouldUpdate, ); } diff --git a/libs/horizon/src/renderer/render/SuspenseComponent.ts b/libs/horizon/src/renderer/render/SuspenseComponent.ts index 28b2c59b..0686dc3f 100644 --- a/libs/horizon/src/renderer/render/SuspenseComponent.ts +++ b/libs/horizon/src/renderer/render/SuspenseComponent.ts @@ -4,6 +4,7 @@ import {FlagUtils, Interrupted} from '../vnode/VNodeFlags'; import {onlyUpdateChildVNodes, updateVNode, createFragmentVNode} from '../vnode/VNodeCreator'; import { ClassComponent, + FunctionComponent, IncompleteClassComponent, SuspenseComponent, } from '../vnode/VNodeTags'; @@ -21,7 +22,7 @@ export enum SuspenseChildStatus { // 创建fallback子节点 function createFallback(processing: VNode, fallbackChildren) { - const childFragment: VNode = processing.child; + const childFragment: VNode = processing.child!; let fallbackFragment; childFragment.childShouldUpdate = false; @@ -92,11 +93,9 @@ export function captureSuspenseComponent(processing: VNode) { if (showFallback) { processing.suspenseDidCapture = false; const nextFallbackChildren = nextProps.fallback; - debugger return createFallback(processing, nextFallbackChildren); } else { const newChildren = nextProps.children; - debugger return createSuspenseChildren(processing, newChildren); } } @@ -187,6 +186,9 @@ export function handleSuspenseChildThrowError(parent: VNode, processing: VNode, } } + if(processing.tag === FunctionComponent) { + processing.isSuspended = true; + } // 应该抛出promise未完成更新,标志待更新 processing.shouldUpdate = true; @@ -225,7 +227,6 @@ export function listenToPromise(suspenseVNode: VNode) { // 记录已经监听的 promise let promiseCache = suspenseVNode.realNode; if (promiseCache === null) { - // @ts-ignore promiseCache = new PossiblyWeakSet(); suspenseVNode.realNode = new PossiblyWeakSet(); } diff --git a/libs/horizon/src/renderer/vnode/VNode.ts b/libs/horizon/src/renderer/vnode/VNode.ts index 6386fd98..8c98e673 100644 --- a/libs/horizon/src/renderer/vnode/VNode.ts +++ b/libs/horizon/src/renderer/vnode/VNode.ts @@ -30,7 +30,7 @@ export class VNode { updates: any[] | null; // TreeRoot和ClassComponent使用的更新数组 stateCallbacks: any[] | null; // 存放存在setState的第二个参数和HorizonDOM.render的第三个参数所在的node数组 isForceUpdate: boolean; // 是否使用强制更新 - + isSuspended = false; // 是否被suspense打断更新 state: any; // ClassComponent和TreeRoot的状态 hooks: Array> | null; // 保存hook suspenseChildStatus = ''; // Suspense的Children是否显示 diff --git a/libs/horizon/src/renderer/vnode/VNodeFlags.ts b/libs/horizon/src/renderer/vnode/VNodeFlags.ts index 5b72b354..bb811c82 100644 --- a/libs/horizon/src/renderer/vnode/VNodeFlags.ts +++ b/libs/horizon/src/renderer/vnode/VNodeFlags.ts @@ -2,7 +2,7 @@ * vNode结构的变化标志 */ -import type { VNode } from '../Types'; +import type { VNode } from './VNode'; export const InitFlag = /** */ 0; @@ -41,7 +41,6 @@ export class FlagUtils { node.flags |= Addition; } static setAddition(node: VNode) { - console.log('set addition', node.flags); node.flags = Addition; }