三: 1.创建 nextUnitOfWork 和 rootFiber

Author: zh-lx

src/mini-react/fiber.js

@@ -0,0 +1,14 @@
+let nextUnitOfWork = null;
+let rootFiber = null;
+
+// 创建 rootFiber 作为首个 nextUnitOfWork
+export function createRoot(element, container) {
+  rootFiber = {
+    stateNode: container, // 记录对应的真实 dom 节点
+    element: {
+      // 挂载 element
+      props: { children: [element] },
+    },
+  };
+  nextUnitOfWork = rootFiber;
+}

src/mini-react/react-dom.js

@@ -1,6 +1,7 @@
+import { createRoot } from './fiber';
+
 function render(element, container) {
-  const dom = renderDom(element);
-  container.appendChild(dom);
+  createRoot(element, container);
 }
 
 // 将 React.Element 渲染为真实 dom