feat: 优化更新

wanglifa · wanglifa · commit 3cb79f8d6402 · 2024-03-30T16:59:27.000+08:00
diff --git a/vite-runner/App.jsx b/vite-runner/App.jsx
@@ -1,33 +1,51 @@
 import React from './core/React.js'
-let showBar = false
-function Counter() {
-  const foo = (
+let countFoo = 1
+const Foo = () => {
+  console.log('foo render')
+  const update = React.update()
+  const handleClick = () => {
+    countFoo++
+    update()
+  }
+  return (
     <div>
-      foo
-      <div>child</div>
-      <div>child2</div>
+      <h1>foo</h1>
+      {countFoo}
+      <button onClick={handleClick}>click</button>
     </div>
   )
-  const bar = <p>bar</p>
-
-  function handleShowBar() {
-    showBar = !showBar 
-    React.update()
+}
+let countBar = 1
+const Bar = () => {
+  console.log('bar render')
+  const update = React.update()
+  const handleClick = () => {
+    countBar++
+    update()
   }
-
   return (
     <div>
-      Counter
-      <button onClick={handleShowBar}>showBar</button>
-      <div>{showBar ? bar : foo}</div>
+      <h1>bar</h1>
+      {countBar}
+      <button onClick={handleClick}>click</button>
     </div>
   )
 }
+let countApp = 1
 function App() {
+  console.log('app render')
+  const update = React.update()
+  const handleClick = () => {
+    countApp++
+    update()
+  }
   return (
     <div>
-  hi-mini-react
-  <Counter></Counter>
+      <h1>App</h1>
+      {countApp}
+      <button onClick={handleClick}>click</button>
+      <Foo></Foo>
+      <Bar></Bar>
     </div>
   )
 }
diff --git a/vite-runner/core/React.js b/vite-runner/core/React.js
@@ -18,24 +18,29 @@ const createElement = (type, props, ...children) => {
   }
 }
 const render = (el, container) => {
-  wipRoot = (nextWorkOfUnit = {
+  wipRoot = {
     dom: container,
     props: {
       children: [el]
     }
-  })
+  }
+  nextWorkOfUnit = wipRoot
 }
 
 let wipRoot = null
 let currentRoot = null
 // 下一个任务（节点）
 let nextWorkOfUnit = null
 let deletions = []
+let wipFiber = null
 function workLoop(deadline) {
   let shouldYield = false
   while(!shouldYield && nextWorkOfUnit) {
     // 返回下一个节点
     nextWorkOfUnit = performWorkOfUnit(nextWorkOfUnit)
+    if (wipRoot?.sibling?.type === nextWorkOfUnit?.type) {
+      nextWorkOfUnit = null
+    }
     // 这里为什么是小于 1
     shouldYield = deadline.timeRemaining() < 1
   }
@@ -72,7 +77,6 @@ const commitWork = (fiber) => {
     filberParent = filberParent.parent
   }
   if (fiber.effectTag === 'update') {
-    console.log(3333)
     updateProps(fiber.dom, fiber.props, fiber.alternate?.props)
   } else if (fiber.effectTag === 'placement'){
     if (fiber.dom) {
@@ -87,18 +91,6 @@ const createDom = (type) => {
   return type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(type)
 }
 const updateProps = (dom, nextProps, prevProps) => {
-  console.log(nextProps, 'nnnnnnn')
-  // Object.keys(props).forEach(attr => {
-  //   const isEvent = attr.startsWith('on')
-  //   if (isEvent) {
-  //     const eventType = attr.slice(2).toLocaleLowerCase()
-  //     dom.addEventListener(eventType, props[attr])
-  //   } else {
-  //     if (attr !== 'children') {
-  //       dom[attr] = props[attr]
-  //     }
-  //   }
-  // })
   // 1. old 有 new 没有 -> 删除
   Object.keys(prevProps).forEach(key => {
     if (key !== 'children') {
@@ -110,10 +102,8 @@ const updateProps = (dom, nextProps, prevProps) => {
   // 2. old 没有 new 有 -> 添加
   // 3. new 有 old 也有 -> 修改
   Object.keys(nextProps).forEach(key => {
-    console.log(1111111)
     if (key !== 'children') {
       if (nextProps[key] !== prevProps[key]) {
-        console.log(nextProps[key], 'hhhhhhhh')
         // 不相等进行更新赋值
         const isEvent = key.startsWith('on')
         if (isEvent) {
@@ -149,14 +139,16 @@ const initChildren = (fiber, children) => {
       }
     } else {
       // 添加
-      newFiber = {
-        type: child.type,
-        props: child.props,
-        child: null, // child 和 sibling 初始化我们不知道
-        sibling: null,
-        parent: fiber,
-        dom: null,
-        effectTag: 'placement'
+      if (child) {
+        newFiber = {
+          type: child.type,
+          props: child.props,
+          child: null, // child 和 sibling 初始化我们不知道
+          sibling: null,
+          parent: fiber,
+          dom: null,
+          effectTag: 'placement'
+        }
       }
       if (oldFiber) {
         deletions.push(oldFiber)
@@ -174,14 +166,17 @@ const initChildren = (fiber, children) => {
     }
     // 考虑到我们还需要设置 parent.sibling，因为我们是从上往下获取的，所以work肯定是顶层也就是 parent，我们只能给 child 设置，
     // 但是如果直接在child 上加就会破坏原有结构,所以我们单独维护一个newWork 对象，
-    prevChild = newFiber
+    if (newFiber) {
+      prevChild = newFiber
+    }
   })
   while (oldFiber) {
     deletions.push(oldFiber)
     oldFiber = oldFiber.sibling
   }
 }
 const updateFunctionComponent = (fiber) => {
+  wipFiber = fiber
   const children = [fiber.type(fiber.props)]
   initChildren(fiber, children)
 }
@@ -190,7 +185,6 @@ const updateHostComponent = (fiber) => {
       // 1. 创建dom
       const dom =(fiber.dom =  createDom(fiber.type))
       // 3. 设置 dom 的 props
-      console.log(fiber, 'xxxxxxxxx')
       updateProps(dom, fiber.props, {})
     }
   const children = fiber.props.children
@@ -218,14 +212,15 @@ const performWorkOfUnit = (fiber) => {
 }
 requestIdleCallback(workLoop)
 
-  // 这里的节点不是新的节点吗,那么新节点的 alternate 指向旧节点为啥也是 currentRoot 难道currentRoot 即是新节点也是旧节点？
 const update = () => {
-  nextWorkOfUnit = {
-    dom: currentRoot.dom,
-    props: currentRoot.props,
-    alternate: currentRoot
+  let currentFiber = wipFiber
+  return () => {
+    wipRoot = {
+      ...currentFiber,
+      alternate: currentFiber
+    }
+    nextWorkOfUnit = wipRoot
   }
-  wipRoot = nextWorkOfUnit
 }
 const React = {
   render,
