feat: 支持函数式组件

marklin2012 · Dec 17, 2019 · 4006a4c · 4006a4c
1 parent 72bef3f
commit 4006a4c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 24 deletions.
diff --git 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
@@ -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) {