Skip to content

Commit dbb4bd8

Browse files
yisaryisar
authored
Merge pull request #359 from frejs/simplify
Simplify
2 parents 540957e + 9886a0c commit dbb4bd8

7 files changed

Lines changed: 141 additions & 238 deletions

File tree

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111
<body>
1212
<div id="app"></div>
13-
<script type="module" src="/src/keys.tsx"></script>
13+
<script type="module" src="/src/ref.tsx"></script>
1414
<script>
1515
</script>
1616
</body>

‎demo/src/keys.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,36 @@
1-
import { h, render, useState } from "../../src/index"
1+
import { h, render, useState, Fragment } from "../../src/index"
22
// import {h, render} from '../../.ignore/eee'
33

4+
const states = [
5+
[3, 1, 2], // shift right
6+
[1, 2, 3],
7+
[2, 3, 1], // shift left
8+
[1, 2, 3],
9+
[1, 3], // remove from middle
10+
[1, 2, 3],
11+
[2, 3], // remove first
12+
[1, 2, 3],
13+
[1, 2], // remove last
14+
[1, 2, 3],
15+
[3, 2, 1], // reverse order
16+
]
17+
18+
function App() {
19+
const [state, setState] = useState(true)
20+
return <>
21+
<button onClick={() => setState(!state)}>change</button>
22+
{state ? <h1>0</h1> : <a>none</a>}
23+
</>
24+
}
25+
426
// function App() {
5-
// const [key, setKey] = useState([3,1,2])
27+
// const [key, setKey] = useState([1,2,3])
28+
// const [count, setCount] = useState(0)
629
// return [
7-
// <button onClick={() => setKey([1,2,3])}>x</button>,
30+
// <button onClick={() => {
31+
// setKey(states[count])
32+
// setCount(count + 1)
33+
// }}>x</button>,
834
// <ul>
935
// {key.map((i) => (
1036
// <li key={i}>{i}</li>
@@ -48,17 +74,17 @@ import { h, render, useState } from "../../src/index"
4874
// return <div>{list.map((d) => <span>{d}</span>)} <button onClick={() => setList(list.concat(4))}>+</button></div>
4975
// }
5076

51-
const App = () => {
52-
let [bool, setbool] = useState(true)
53-
return <div>
54-
{bool ? <Header /> : null}
55-
<button onClick={()=>setbool(!bool)}>x</button>
56-
</div>
57-
}
77+
// const App = () => {
78+
// let [bool, setbool] = useState(true)
79+
// return <div>
80+
// {bool ? <Header /> : null}
81+
// <button onClick={()=>setbool(!bool)}>x</button>
82+
// </div>
83+
// }
5884

59-
function Header(){
60-
return <div><a href="">222</a></div>
61-
}
85+
// function Header(){
86+
// return <div><a href="">222</a></div>
87+
// }
6288

6389
// function App() {
6490
// const [key, setKey] = useState([1,2,3,4,5])

‎demo/src/ref.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// import { render } from "react-dom";
88

99
// // fre:
10-
import { render, useState, useEffect, useRef } from "../../src"
10+
import { render, useState, useEffect, useRef,h } from "../../src"
1111

1212
const Wrapper = () => {
1313
const [showApp, setShowApp] = useState(true)
@@ -35,7 +35,7 @@ const Wrapper = () => {
3535

3636
return (
3737
<div>
38-
{showApp ? <div ref={p}>111</div> : <div ref={c}>App removed...</div>}
38+
{showApp ? <div ref={p}>111</div> : <p ref={c}>App removed...</p>}
3939
</div>
4040
)
4141
}

‎src/commit.ts‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,33 @@ import { IFiber, IRef } from './type'
22
import { updateElement } from './dom'
33
import { isFn, TAG } from './reconcile'
44

5-
export const commit = (fiber: IFiber, deletions): void => {
6-
let current = fiber.next
7-
fiber.next = null
8-
do {
9-
op(current)
10-
} while ((current = current.next))
115

12-
deletions.forEach(op)
13-
}
14-
15-
const op = (fiber: any) => {
16-
if (fiber.lane & TAG.NOWORK) {
17-
return
18-
}
19-
if (fiber.lane === TAG.REMOVE) {
20-
remove(fiber)
6+
export const commit = (fiber: any) => {
7+
if (!fiber) {
218
return
229
}
23-
if (fiber.lane & TAG.INSERT) {
10+
const { op, before, elm } = fiber.action || {}
11+
if (op & TAG.INSERT || op & TAG.MOVE) {
2412
if (fiber.isComp) {
25-
fiber.child.lane = fiber.lane
26-
fiber.child.after = fiber.after
27-
op(fiber.child)
28-
fiber.child.lane |= TAG.NOWORK
13+
fiber.child.action.op |= fiber.action.op
2914
} else {
30-
fiber.parentNode.insertBefore(fiber.node, fiber.after)
15+
fiber.parentNode.insertBefore(elm.node, before?.node)
3116
}
3217
}
33-
if (fiber.lane & TAG.UPDATE) {
18+
if (op & TAG.UPDATE) {
3419
if (fiber.isComp) {
35-
fiber.child.lane = fiber.lane
36-
op(fiber.child)
37-
fiber.child.lane |= TAG.NOWORK
20+
fiber.child.action.op |= fiber.action.op
3821
} else {
39-
updateElement(fiber.node, fiber.oldProps || {}, fiber.props)
22+
updateElement(fiber.node, fiber.old.props || {}, fiber.props)
4023
}
4124
}
4225

4326
refer(fiber.ref, fiber.node)
27+
28+
fiber.action = null
29+
30+
commit(fiber.child)
31+
commit(fiber.sibling)
4432
}
4533

4634
const refer = (ref: IRef, dom?: HTMLElement): void => {
@@ -55,14 +43,13 @@ const kidsRefer = (kids: any): void => {
5543
})
5644
}
5745

58-
const remove = fiber => {
46+
export const removeElement = fiber => {
5947
if (fiber.isComp) {
6048
fiber.hooks && fiber.hooks.list.forEach(e => e[2] && e[2]())
61-
fiber.kids.forEach(remove)
49+
fiber.kids.forEach(removeElement)
6250
} else {
63-
kidsRefer(fiber.kids)
6451
fiber.parentNode.removeChild(fiber.node)
52+
kidsRefer(fiber.kids)
6553
refer(fiber.ref, null)
6654
}
67-
fiber.lane = 0
6855
}

0 commit comments

Comments
 (0)