Match-id-07aa005631c43e03458d2e692810427c7c1cfb59

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,
   );
 }
 

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();
     }

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<Hook<any, any>> | null; // 保存hook
   suspenseChildStatus = ''; // Suspense的Children是否显示

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;
   }