emmm

frejs · May 26, 2023 · 4afa2aa · 4afa2aa
1 parent 04e1368
commit 4afa2aa
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 44 deletions.
diff --git a/demo/src/keys.tsx b/demo/src/keys.tsx
@@ -1,4 +1,4 @@
-import { h, render, useState } from "../../src/index"
+import { h, render, useState, Fragment } from "../../src/index"
 // import {h, render} from '../../.ignore/eee'
 
 const states = [
@@ -16,21 +16,29 @@ const states = [
 ]
 
 function App() {
-  const [key, setKey] = useState([1,2,3])
-  const [count, setCount] = useState(0)
-  return [
-    <button onClick={() => {
-      setKey(states[count])
-      setCount(count + 1)
-    }}>x</button>,
-    <ul>
-      {key.map((i) => (
-        <li key={i}>{i}</li>
-      ))}
-    </ul>,
-  ]
+  const [state, setState] = useState(true)
+  return <>
+    <button onClick={() => setState(!state)}>change</button>
+    {state ? <span>0</span> : <a>none</a>}
+  </>
 }
 
+// function App() {
+//   const [key, setKey] = useState([1,2,3])
+//   const [count, setCount] = useState(0)
+//   return [
+//     <button onClick={() => {
+//       setKey(states[count])
+//       setCount(count + 1)
+//     }}>x</button>,
+//     <ul>
+//       {key.map((i) => (
+//         <li key={i}>{i}</li>
+//       ))}
+//     </ul>,
+//   ]
+// }
+
 // function App() {
 //   const [key, setKey] = useState([1,2,6, 3])
 //   return [

diff --git a/src/commit.ts b/src/commit.ts
@@ -27,9 +27,13 @@ const commitWork = (fiber: any) => {
     if (fiber.isComp) {
       fiber.child.action.op = fiber.action.op
     } else {
-      updateElement(fiber.node, fiber.oldProps || {}, fiber.props)
+      updateElement(fiber.node, fiber.old.props || {}, fiber.props)
     }
   }
+  if (op & TAG.REPLACE) {
+    console.log(elm.node, elm.node)
+    fiber.parentNode.replaceChild(before, elm)
+  }
 
   refer(fiber.ref, fiber.node)
 

diff --git a/src/reconcile.ts b/src/reconcile.ts
@@ -48,9 +48,9 @@ const reconcile = (fiber?: IFiber): boolean => {
 }
 
 const memo = (fiber) => {
-  if ((fiber.type as FC).memo && fiber.oldProps) {
+  if ((fiber.type as FC).memo && fiber.old?.props) {
     let scu = (fiber.type as FC).shouldUpdate || shouldUpdate
-    if (!scu(fiber.props, fiber.oldProps)) { // fast-fix
+    if (!scu(fiber.props, fiber.old.props)) { // fast-fix
       return getSibling(fiber)
     }
   }
@@ -130,9 +130,13 @@ const getParentNode = (fiber: IFiber): HTMLElement | undefined => {
 const diffKids = (fiber: any, children: FreNode): void => {
   let aCh = fiber.kids || [],
     bCh = (fiber.kids = arrayfy(children) as any)
-  const actions = diff1(aCh, bCh)
+  const actions = idiff(aCh, bCh)
 
+  if (fiber.old && fiber.old.type != fiber.type) {
+    fiber.action = { op: TAG.REPLACE, elm: fiber.node, before: fiber.old.node }
+  }
   for (let i = 0, prev = null, len = bCh.length; i < len; i++) {
+
     const child = bCh[i]
     child.action = actions[i]
     if (fiber.lane & TAG.SVG) {
@@ -151,13 +155,10 @@ const diffKids = (fiber: any, children: FreNode): void => {
 function clone(a, b) {
   b.hooks = a.hooks
   b.ref = a.ref
-  b.node = a.node
-  b.oldProps = a.props
-  b.kids = a.kids
-}
+  b.node = a.node // 临时修复
 
-const same = (a, b) => {
-  return a && b && a.key === b.key && a.type === b.type
+  b.kids = a.kids
+  b.old = a
 }
 
 export const arrayfy = arr => (!arr ? [] : isArr(arr) ? arr : [arr])
@@ -216,31 +217,22 @@ const diff = function (opts) {
   return actions
 }
 
-var diff1 = function (a, b) {
-  var actions = [];
-  var extr = function (v) {
-    return v.key;
-  };
-  var update = function (a, b) {
-    actions.push({ op: TAG.UPDATE, old: a, new: b })
-  }
-  var move = function (from, to) {
-    actions.push({ op: TAG.MOVE, elm: a[from], before: a[to] })
-  };
-  var add = function (elm, i) {
-    actions.push({ op: TAG.INSERT, elm: elm, before: a[i] })
-  };
-  var remove = function (i) {
+var idiff = function (a, b) {
+  var actions = [] // 必须保持和 b 一致的顺序
+  var extr = (v) => v.key + v.type
+  var update = (a, b) => actions.push({ op: TAG.UPDATE })
+  var move = (from, to) => actions.push({ op: TAG.MOVE, elm: a[from], before: a[to] })
+  var add = (elm, i) => actions.push({ op: TAG.INSERT, elm: elm, before: a[i] })
+  var remove = (i) => {
     const fiber = a[i]
     fiber.parentNode.removeChild(fiber.node) // 直接删除即可
-    // actions.push({ op: TAG.REMOVE, elm: a[i], before: a[i + 1] })
-  };
+  }
   diff({
     old: a,
     cur: b,
     key: extr,
     add, move, remove, update
-  });
+  })
   return actions
 }
 

diff --git a/test/render.spec.tsx b/test/render.spec.tsx
@@ -15,11 +15,11 @@ test('render', async t => {
   await style(t)
   await dom(t)
   await ref(t)
-  // await refer(t)
+  await refer(t)
   // await change(t)
   // await once(t)
   // await every(t)
   await svg(t)
-  // await fragment(t)
+  await fragment(t)
   await memor(t)
 })