feat: support useState

packages/react-dom/src/root.ts

@@ -15,7 +15,7 @@ export const createRoot = (container: Container) => {
 
 	return {
 		render(element: ReactElementType) {
-			updateContainer(element, root)
+			return updateContainer(element, root)
 		}
 	}
 }

packages/react-reconciler/src/childFiber.ts

@@ -3,18 +3,59 @@
  * @Date: 2023-11-05 13:47:45
  * @Description:
  */
-import { ReactElementType } from 'shared/ReactTypes'
-import { FiberNode, createFiberFromElement } from './fiber'
+import { ReactElementType, Props } from 'shared/ReactTypes'
+import {
+	FiberNode,
+	createFiberFromElement,
+	createWorkInProgress
+} from './fiber'
 import { REACT_ELEMENT_TYPE } from 'shared/ReactSymbols'
 import { HostText } from './workTags'
-import { Placement } from './fiberFlags'
+import { ChildDeletion, Placement } from './fiberFlags'
+// import ReactDOM from 'react-dom'
 
 const ChildReconciler = (shouldTrackEffects: boolean) => {
+	const deleteChild = (returnFiber: FiberNode, childToDelete: FiberNode) => {
+		if (!shouldTrackEffects) return
+		const deletions = returnFiber.deletions
+		if (deletions === null) {
+			returnFiber.deletions = [childToDelete]
+			returnFiber.flags |= ChildDeletion
+		} else {
+			deletions.push(childToDelete)
+		}
+	}
 	const reconcileSingleElement = (
 		returnFiber: FiberNode,
 		currentFiber: FiberNode | null,
 		element: ReactElementType
 	) => {
+		const key = element.key
+		work: if (currentFiber !== null) {
+			// update
+			if (currentFiber.key === key) {
+				if (element.$$typeof === REACT_ELEMENT_TYPE) {
+					if (currentFiber.type === element.type) {
+						// equal
+						// change to the wip
+						const existing = useFiber(currentFiber, element.props)
+						existing.return = returnFiber
+						return existing
+					}
+					deleteChild(returnFiber, currentFiber)
+					break work
+				} else {
+					if (__DEV__) {
+						console.warn('unknown react type', element)
+						break work
+					}
+				}
+			} else {
+				// delete
+				deleteChild(returnFiber, currentFiber)
+			}
+		}
+
 		const fiber = createFiberFromElement(element)
 
 		fiber.return = returnFiber
@@ -27,6 +68,17 @@ const ChildReconciler = (shouldTrackEffects: boolean) => {
 		currentFiber: FiberNode | null,
 		content: string | number
 	) => {
+		if (currentFiber !== null) {
+			// update
+			if (currentFiber.tag === HostText) {
+				const existing = useFiber(currentFiber, { content })
+				existing.return = returnFiber
+				return existing
+			}
+			// <div></div> -> abc
+			deleteChild(returnFiber, currentFiber)
+		}
+
 		const fiber = new FiberNode(HostText, { content }, null)
 		fiber.return = returnFiber
 
@@ -65,12 +117,23 @@ const ChildReconciler = (shouldTrackEffects: boolean) => {
 			)
 		}
 
+		if (currentFiber !== null) {
+			deleteChild(returnFiber, currentFiber)
+		}
+
 		if (__DEV__) {
 			console.warn('unknown reconcile type')
 		}
 		return null
 	}
 }
 
+const useFiber = (fiber: FiberNode, pendingProps: Props): FiberNode => {
+	const clone = createWorkInProgress(fiber, pendingProps)
+	clone.index = 0
+	clone.sibling = null
+	return clone
+}
+
 export const reconcileChildFibers = ChildReconciler(true)
 export const mountChildFibers = ChildReconciler(false)