From 4006a4c8e38f5cc277efc41c6b8013504cfc8d86 Mon Sep 17 00:00:00 2001
From: marklin2012 <marklin2012@sina.cn>
Date: Tue, 17 Dec 2019 11:11:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=BC=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js        | 20 +++++++++------
 src/yolkjs/index.js | 62 +++++++++++++++++++++++++++++++++------------
 2 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/index.js b/src/index.js
index 5580e11..6a1f15c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,12 +5,16 @@ import React from './yolkjs'
 
 const ReactDOM = React
 
-const App = (
-  <div id="app">
-    <h1>Yolkjs</h1>
-    <p>react dom</p>
-    <a href="https://jd.com">shop</a>
-  </div>
-)
+function App(props) {
+  return (
+    <div id="app">
+      <h1>hello, {props.title}</h1>
+      <p>react dom</p>
+      <a href="https://jd.com">shop</a>
+    </div>
+  )
+}
 
-ReactDOM.render(App, document.getElementById('root'))
+let element = <App title="yolkjs" />
+
+ReactDOM.render(element, document.getElementById('root'))
diff --git a/src/yolkjs/index.js b/src/yolkjs/index.js
index 96d088d..d97bdf1 100644
--- a/src/yolkjs/index.js
+++ b/src/yolkjs/index.js
@@ -107,12 +107,18 @@ function commitWorker(fiber) {
   if (!fiber) {
     return
   }
-  const domParent = fiber.parent.dom
+  // const domParent = fiber.parent.dom
   // domParent.appendChild(fiber.dom)
+  let domParentFiber = fiber.parent
+  while (!domParentFiber.dom) {
+    domParentFiber = domParentFiber.parent
+  }
+  const domParent = domParentFiber.dom
   if (fiber.effectTag === 'PLACEMENT' && fiber.dom !== null) {
     domParent.appendChild(fiber.dom)
   } else if (fiber.effectTag === 'DELETION') {
-    domParent.removeChild(fiber.dom)
+    commitDeletion(fiber, domParent)
+    // domParent.removeChild(fiber.dom)
   } else if (fiber.effectTag === 'UPDATE' && fiber.dom !== null) {
     // 更新dom
     updateDom(fiber.dom, fiber.base.props, fiber.props)
@@ -121,6 +127,14 @@ function commitWorker(fiber) {
   commitWorker(fiber.sibling)
 }
 
+function commitDeletion(fiber, domParent) {
+  if (fiber.dom) {
+    domParent.removeChild(fiber.dom)
+  } else {
+    commitDeletion(fiber.child, domParent)
+  }
+}
+
 // 下一个单元任务
 // render 函数会初始化第一个任务
 let nextUnitOfWork = null
@@ -143,6 +157,36 @@ function workLoop(deadline) {
 }
 
 function performUnitOfWork(fiber) {
+  const isFunctionComponent = fiber.type instanceof Function
+  console.log('iisFunctionComponents', isFunctionComponent, fiber.type, fiber)
+  if (isFunctionComponent) {
+    updateFunctionComponent(fiber)
+  } else {
+    // dom
+    updateHostComponent(fiber)
+  }
+  // 找下一个任务
+  // 先找子元素
+  if (fiber.child) {
+    return fiber.child
+  }
+  let nextFiber = fiber
+  // 没有子元素，就找兄弟元素
+  while (nextFiber) {
+    if (nextFiber.sibling) {
+      return nextFiber.sibling
+    }
+    // 没有兄弟元素，找父元素
+    nextFiber = nextFiber.parent
+  }
+}
+
+function updateFunctionComponent(fiber) {
+  const children = [fiber.type(fiber.props)]
+  reconcileChildren(fiber, children)
+}
+
+function updateHostComponent(fiber) {
   // 获取下一个任务
   // 根据当前任务获取下一个任务
   if (!fiber.dom) {
@@ -158,21 +202,7 @@ function performUnitOfWork(fiber) {
   const elements = fiber.props.children
 
   reconcileChildren(fiber, elements)
-  // 找下一个任务
-  // 先找子元素
-  if (fiber.child) {
-    return fiber.child
-  }
 
-  let nextFiber = fiber
-  // 没有子元素，就找兄弟元素
-  while (nextFiber) {
-    if (nextFiber.sibling) {
-      return nextFiber.sibling
-    }
-    // 没有兄弟元素，找父元素
-    nextFiber = nextFiber.parent
-  }
 }
 
 function reconcileChildren(wipFiber, elements) {