四: render 和 commit 分离

Author: zh-lx

src/mini-react/commit.js

@@ -0,0 +1,16 @@
+// 从根节点开始 commit
+export function commitRoot(rootFiber) {
+  commitWork(rootFiber.child);
+}
+
+// 递归执行 commit，此过程不中断
+function commitWork(fiber) {
+  if (!fiber) {
+    return;
+  }
+  // 深度优先遍历，先遍历 child，后遍历 sibling
+  commitWork(fiber.child);
+  let parentDom = fiber.return.stateNode;
+  parentDom.appendChild(fiber.stateNode);
+  commitWork(fiber.sibling);
+}

src/mini-react/fiber.js

@@ -1,4 +1,5 @@
 import { renderDom } from './react-dom';
+import { commitRoot } from './commit';
 
 let nextUnitOfWork = null;
 let rootFiber = null;
@@ -21,15 +22,6 @@ function performUnitOfWork(workInProgress) {
     // 若当前 fiber 没有 stateNode，则根据 fiber 挂载的 element 的属性创建
     workInProgress.stateNode = renderDom(workInProgress.element);
   }
-  if (workInProgress.return && workInProgress.stateNode) {
-    // 如果 fiber 有父 fiber且有 dom
-    // 向上寻找能挂载 dom 的节点进行 dom 挂载
-    let parentFiber = workInProgress.return;
-    while (!parentFiber.stateNode) {
-      parentFiber = parentFiber.return;
-    }
-    parentFiber.stateNode.appendChild(workInProgress.stateNode);
-  }
 
   let children = workInProgress.element?.props?.children;
 
@@ -111,6 +103,11 @@ function workLoop(deadline) {
     performUnitOfWork(nextUnitOfWork);
     shouldYield = deadline.timeRemaining() < 1;
   }
+  if (!nextUnitOfWork && rootFiber) {
+    // 表示进入 commit 阶段
+    commitRoot(rootFiber);
+    rootFiber = null;
+  }
   requestIdleCallback(workLoop);
 }
 

src/mini-react/react-dom.js

@@ -33,6 +33,9 @@ export function renderDom(element) {
   if (typeof type === 'string') {
     // 常规 dom 节点的渲染
     dom = document.createElement(type);
+  } else if (typeof type === 'function') {
+    // React 组件的渲染
+    dom = document.createDocumentFragment();
   } else {
     // 其他情况暂不考虑
     return null;