Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit fe15ff7

Browse files
committedMar 31, 2024
day09 实现todo-list: v2-useEffect使用与其他补丁
1 parent 04c5344 commit fe15ff7

File tree

2 files changed

+43
-23
lines changed

2 files changed

+43
-23
lines changed
 

‎core/React.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ function workLoop(deadline) {
100100

101101
if (
102102
nextWorkOfUnit &&
103-
nextWorkOfUnit.type === getSibing(wipRoot.alternate)?.type
103+
nextWorkOfUnit.type === getSibing(wipRoot?.alternate)?.type
104104
) {
105105
nextWorkOfUnit = null;
106106
}
@@ -110,6 +110,8 @@ function workLoop(deadline) {
110110

111111
if (!nextWorkOfUnit && wipRoot) {
112112
commitRoot();
113+
114+
if (nextWorkOfUnit) wipRoot = currentRoot;
113115
}
114116

115117
requestIdleCallback(workLoop);
@@ -138,8 +140,12 @@ function commitDeletion(fiber) {
138140
fiberParent = fiberParent.parent;
139141
}
140142

141-
if (fiber.dom) {
142-
fiberParent.dom.removeChild(fiber.dom);
143+
let fiberTarget = fiber;
144+
while (!fiberTarget.dom && fiberTarget) {
145+
fiberTarget = fiber.child;
146+
}
147+
if (fiberTarget.dom) {
148+
fiberParent.dom.removeChild(fiberTarget.dom);
143149
}
144150
}
145151

‎example/ToDos.jsx

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,28 @@ import React from '../core/React';
22

33
import './index.css';
44

5+
function TodoItem({ todo, handleRemove, handleStatusChange }) {
6+
const className = todo.isDone ? 'done' : '';
7+
8+
return (
9+
<li>
10+
<span className={className}>{todo.name}</span>
11+
<button onClick={() => handleRemove(todo.id)}>remove</button>
12+
<button onClick={() => handleStatusChange(todo.id)}>
13+
{todo.isDone ? 'cancel' : 'done'}
14+
</button>
15+
</li>
16+
);
17+
}
18+
519
function ToDos() {
6-
const originList = localStorage.getItem('todos')
7-
? JSON.parse(localStorage.getItem('todos'))
8-
: [];
9-
const [todoList, setTodoList] = React.useState(originList);
20+
const [todoList, setTodoList] = React.useState([]);
21+
React.useEffect(() => {
22+
const list = localStorage.getItem('todos');
23+
if (list) {
24+
setTodoList(JSON.parse(list));
25+
}
26+
}, []);
1027

1128
function handleAdd() {
1229
const inputEl = document.querySelector('#input');
@@ -32,15 +49,16 @@ function ToDos() {
3249
useDoneStatus(doneStatus);
3350
}
3451

35-
function handleRemove(index) {
36-
const newList = [...todoList];
37-
newList.splice(index, 1);
52+
function handleRemove(id) {
53+
const newList = todoList.filter((todo) => todo.id !== id);
3854
setTodoList(newList);
3955
}
4056

41-
function handleStatusChange(index) {
42-
const newList = [...todoList];
43-
newList[index].isDone = !newList[index].isDone;
57+
function handleStatusChange(id) {
58+
const newList = todoList.map((todo) => ({
59+
...todo,
60+
isDone: todo.id === id ? !todo.isDone : todo.isDone
61+
}));
4462
setTodoList(newList);
4563
}
4664

@@ -94,17 +112,13 @@ function ToDos() {
94112
if (doneStatus === 'done') return todo.isDone;
95113
return !todo.isDone;
96114
})
97-
.map((todo, index) => {
98-
const className = todo.isDone ? 'done' : '';
99-
115+
.map((todo) => {
100116
return (
101-
<li>
102-
<span className={className}>{todo.name}</span>
103-
<button onClick={() => handleRemove(index)}>remove</button>
104-
<button onClick={() => handleStatusChange(index)}>
105-
{todo.isDone ? 'cancel' : 'done'}
106-
</button>
107-
</li>
117+
<TodoItem
118+
todo={todo}
119+
handleRemove={handleRemove}
120+
handleStatusChange={handleStatusChange}
121+
/>
108122
);
109123
})}
110124
</ul>

0 commit comments

Comments
 (0)
Please sign in to comment.