BetaSu · BetaSu · Aug 9, 2023 · Aug 6, 2023 · Aug 8, 2023 · Aug 9, 2023
diff --git a/demos/suspense-lazy/Cpn.tsx b/demos/suspense-lazy/Cpn.tsx
@@ -0,0 +1,3 @@
+export default function Cpn() {
+	return <div>Cpn</div>;
+}
diff --git a/demos/suspense-lazy/index.html b/demos/suspense-lazy/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Suspense</title>
+	</head>
+
+	<body>
+		<div id="root"></div>
+		<script type="module" src="main.tsx"></script>
+	</body>
+</html>
diff --git a/demos/suspense-lazy/main.tsx b/demos/suspense-lazy/main.tsx
@@ -0,0 +1,22 @@
+import { Suspense, lazy } from 'react';
+import ReactDOM from 'react-dom/client';
+
+function delay(promise) {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve(promise);
+		}, 2000);
+	});
+}
+
+const Cpn = lazy(() => import('./Cpn').then((res) => delay(res)));
+
+function App() {
+	return (
+		<Suspense fallback={<div>loading</div>}>
+			<Cpn />
+		</Suspense>
+	);
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
diff --git a/packages/react-reconciler/src/beginWork.ts b/packages/react-reconciler/src/beginWork.ts
@@ -18,7 +18,8 @@ import {
 	HostRoot,
 	HostText,
 	OffscreenComponent,
-	SuspenseComponent
+	SuspenseComponent,
+	LazyComponent
 } from './workTags';
 import {
 	Ref,
@@ -50,6 +51,8 @@ export const beginWork = (wip: FiberNode, renderLane: Lane) => {
 			return updateSuspenseComponent(wip);
 		case OffscreenComponent:
 			return updateOffscreenComponent(wip);
+		case LazyComponent:
+			return mountLazyComponent(wip, renderLane);
 		default:
 			if (__DEV__) {
 				console.warn('beginWork未实现的类型');
@@ -59,6 +62,17 @@ export const beginWork = (wip: FiberNode, renderLane: Lane) => {
 	return null;
 };
 
+function mountLazyComponent(wip: FiberNode, renderLane: Lane) {
+	const LazyType = wip.type;
+	const payload = LazyType._payload;
+	const init = LazyType._init;
+	const Component = init(payload);
+	wip.type = Component;
+	wip.tag = FunctionComponent;
+	const child = updateFunctionComponent(wip, renderLane);
+	return child;
+}
+
 function updateContextProvider(wip: FiberNode) {
 	const providerType = wip.type;
 	const context = providerType._context;

diff --git a/packages/react-reconciler/src/fiber.ts b/packages/react-reconciler/src/fiber.ts
@@ -6,14 +6,19 @@ import {
 	HostComponent,
 	WorkTag,
 	SuspenseComponent,
-	OffscreenComponent
+	OffscreenComponent,
+	LazyComponent
 } from './workTags';
 import { Flags, NoFlags } from './fiberFlags';
 import { Container } from 'hostConfig';
 import { Lane, Lanes, NoLane, NoLanes } from './fiberLanes';
 import { Effect } from './fiberHooks';
 import { CallbackNode } from 'scheduler';
-import { REACT_PROVIDER_TYPE, REACT_SUSPENSE_TYPE } from 'shared/ReactSymbols';
+import {
+	REACT_PROVIDER_TYPE,
+	REACT_SUSPENSE_TYPE,
+	REACT_LAZY_TYPE
+} from 'shared/ReactSymbols';
 
 export class FiberNode {
 	type: any;
@@ -152,6 +157,8 @@ export function createFiberFromElement(element: ReactElementType): FiberNode {
 		fiberTag = ContextProvider;
 	} else if (type === REACT_SUSPENSE_TYPE) {
 		fiberTag = SuspenseComponent;
+	} else if (typeof type === 'object' && type.$$typeof === REACT_LAZY_TYPE) {
+		fiberTag = LazyComponent;
 	} else if (typeof type !== 'function' && __DEV__) {
 		console.warn('为定义的type类型', element);
 	}

diff --git a/packages/react-reconciler/src/workLoop.ts b/packages/react-reconciler/src/workLoop.ts
@@ -61,9 +61,16 @@ const RootDidNotComplete = 3;
 let workInProgressRootExitStatus: number = RootInProgress;
 
 // Suspense
-type SuspendedReason = typeof NotSuspended | typeof SuspendedOnData;
+type SuspendedReason =
+	| typeof NotSuspended
+	| typeof SuspendedOnError
+	| typeof SuspendedOnData
+	| typeof SuspendedOnDeprecatedThrowPromise;
 const NotSuspended = 0;
-const SuspendedOnData = 6;
+const SuspendedOnError = 1;
+const SuspendedOnData = 2;
+const SuspendedOnDeprecatedThrowPromise = 4;
+
 let workInProgressSuspendedReason: SuspendedReason = NotSuspended;
 let workInProgressThrownValue: any = null;
 
@@ -416,7 +423,15 @@ function handleThrow(root: FiberRootNode, thrownValue: any): void {
 		workInProgressSuspendedReason = SuspendedOnData;
 		thrownValue = getSuspenseThenable();
 	} else {
-		// TODO Error Boundary
+		const isWakeable =
+			thrownValue !== null &&
+			typeof thrownValue === 'object' &&
+			typeof thrownValue.then === 'function';
+
+		workInProgressThrownValue = thrownValue;
+		workInProgressSuspendedReason = isWakeable
+			? SuspendedOnDeprecatedThrowPromise
+			: SuspendedOnError;
 	}
 	workInProgressThrownValue = thrownValue;
 }

diff --git a/packages/react-reconciler/src/workTags.ts b/packages/react-reconciler/src/workTags.ts
@@ -6,7 +6,8 @@ export type WorkTag =
 	| typeof Fragment
 	| typeof ContextProvider
 	| typeof SuspenseComponent
-	| typeof OffscreenComponent;
+	| typeof OffscreenComponent
+	| typeof LazyComponent;
 
 export const FunctionComponent = 0;
 export const HostRoot = 3;
@@ -19,3 +20,5 @@ export const ContextProvider = 8;
 
 export const SuspenseComponent = 13;
 export const OffscreenComponent = 14;
+
+export const LazyComponent = 16;
diff --git a/packages/react/index.ts b/packages/react/index.ts
@@ -7,6 +7,7 @@ import {
 } from './src/jsx';
 export { REACT_FRAGMENT_TYPE as Fragment } from 'shared/ReactSymbols';
 export { createContext } from './src/context';
+export { lazy } from './src/lazy';
 export { REACT_SUSPENSE_TYPE as Suspense } from 'shared/ReactSymbols';
 // React
 

diff --git a/packages/react/src/lazy.ts b/packages/react/src/lazy.ts
@@ -0,0 +1,89 @@
+import { Thenable, Wakeable } from 'shared/ReactTypes';
+import { REACT_LAZY_TYPE } from 'shared/ReactSymbols';
+
+const Uninitialized = -1;
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type UninitializedPayload<T> = {
+	_status: typeof Uninitialized;
+	_result: () => Thenable<{ default: T }>;
+};
+
+type PendingPayload = {
+	_status: typeof Pending;
+	_result: Wakeable;
+};
+
+type ResolvedPayload<T> = {
+	_status: typeof Resolved;
+	_result: { default: T };
+};
+
+type RejectedPayload = {
+	_status: typeof Rejected;
+	_result: any;
+};
+
+type Payload<T> =
+	| UninitializedPayload<T>
+	| PendingPayload
+	| ResolvedPayload<T>
+	| RejectedPayload;
+
+export type LazyComponent<T, P> = {
+	$$typeof: symbol | number;
+	_payload: P;
+	_init: (payload: P) => T;
+};
+
+function lazyInitializer<T>(payload: Payload<T>): T {
+	if (payload._status === Uninitialized) {
+		const ctor = payload._result;
+		const thenable = ctor();
+		thenable.then(
+			(moduleObject) => {
+				// @ts-ignore
+				const resolved: ResolvedPayload<T> = payload;
+				resolved._status = Resolved;
+				resolved._result = moduleObject;
+			},
+			(error) => {
+				// @ts-ignore
+				const rejected: RejectedPayload = payload;
+				rejected._status = Rejected;
+				rejected._result = error;
+			}
+		);
+		if (payload._status === Uninitialized) {
+			// @ts-ignore
+			const pending: PendingPayload = payload;
+			pending._status = Pending;
+			pending._result = thenable;
+		}
+	}
+	if (payload._status === Resolved) {
+		const moduleObject = payload._result;
+		return moduleObject.default;
+	} else {
+		throw payload._result;
+	}
+}
+
+export function lazy<T>(
+	ctor: () => Thenable<{ default: T }>
+): LazyComponent<T, Payload<T>> {
+	const payload: Payload<T> = {
+		_status: Uninitialized,
+		_result: ctor
+	};
+
+	const lazyType: LazyComponent<T, Payload<T>> = {
+		$$typeof: REACT_LAZY_TYPE,
+		_payload: payload,
+		_init: lazyInitializer
+	};
+
+	return lazyType;
+}
diff --git a/packages/shared/ReactSymbols.ts b/packages/shared/ReactSymbols.ts
@@ -19,3 +19,7 @@ export const REACT_PROVIDER_TYPE = supportSymbol
 export const REACT_SUSPENSE_TYPE = supportSymbol
 	? Symbol.for('react.suspense')
 	: 0xead1;
+
+export const REACT_LAZY_TYPE = supportSymbol
+	? Symbol.for('react.lazy')
+	: 0xead4;