练习Practice

动手做Get your hands on it

练习跟着课文走 —— 每节课尾都有本课的练习。这一页是全部练习的总库，想集中刷题的时候来。每个练习都写清了它来自哪一节，卡住了就回去看那一节。Practice follows the lessons — every lesson ends with the exercises for that lesson. This page is the whole library, for when you want to drill in one sitting. Each exercise names the lesson it came from, so you can go back when you stall.

0 / 148个做对过you got right

同一批本事的四个难度档，区别是「给你多少东西」—— 它们分布在「背知识点 / 做练习 / 模拟考」三个模式里Four fidelity levels of the same skill — the difference is how much you are given. They live across the Review, Practice and Assess modes.

说得出Say it八股Drills105给你问题，你用嘴答You get the question, you answer out loud
认得出Spot it课内练习Lesson exercises148填空、写整块、Debug Lab —— 挖好了空等你填Fill-in-the-blank, write-a-block, debug labs
写得对Write itCodingCoding25文件、依赖、测试都给好了Files, deps and tests are handed to you
空手做Build it blind考场Arena7空文件夹、计时、没有提示按钮Empty folder, timed, no hint button

这四档到底怎么选How to pick a tier

往右一格，帮你的东西就少一样。只有最右边那格对准真实考试—— 前三格跑绿了不代表空手能做出来。两套模拟考就在考场的 7 道里。Each step right takes one crutch away. Only the rightmost one matches a real assessment. The two mock exams live inside the arena — 2 of its 7.

已筛到你正在学的《React 考试》。想看全部就点上面的「全部」。Filtered to React exam — the course you are on. Use “All” above to see everything.

练习Exercises

筛出 21 个练习（共 148 个） · 第 1 / 2 页。Showing 21 of 148 · page 1 / 2.

来自From props：数据往下流，事件往上报props: data flows down, events go back up · React 考试React exam

L2填空Fill the blanks补全 NoteItem 的两个按钮Fill in the two buttons of NoteItem

这是 NoteItem 真实的两个按钮。一个要传整条笔记，一个只传 id —— 想清楚各自要传什么，以及怎么才能「点击时才执行」。

These are the two real buttons of NoteItem. One passes the whole note, the other passes only the id. Decide what each one has to pass, and how to make it run only on the click.

TSXsrc/components/NoteItem/index.tsx2 个空2 blanks

1<td>

2 <button onClick={ onEdit(note)} className="outlined">

3 Edit

4 </button>

5</td>

6<td>

7 <button onClick={() => onDelete()} className="danger">

8 Delete

9 </button>

10</td>

把 2 个空都填上才能检查（还差 2 个）Fill all 2 blanks to check (2 to go)

来自From props：数据往下流，事件往上报props: data flows down, events go back up · React 考试React exam

L2Debug LabDebug LabDebug Lab · 页面一打开，所有笔记就消失了Debug Lab · every note disappears the moment the page opens

添加两条笔记后刷新页面（假设有持久化），表格瞬间变空。有时候浏览器还会卡住。先判断类型，再找病灶。

Add two notes, then reload the page (assume the notes are saved somewhere). The table goes empty at once, and sometimes the browser stops responding. First name the kind of error, then find the line that causes it.

第 1 步 · 先看现象和代码，别急着改Step 1 · read the symptom and the code before you touch anything

Warning: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. （另一种表现：没有任何报错，但表格永远是空的）Warning: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. (Another symptom: no warning at all, but the table stays empty forever.)

TSX有问题的 NoteItemThe NoteItem with the bug示意Illustrative

1const NoteItem: React.FC<NoteItemProps> = ({ note, onDelete, onEdit }) => {

2 return (

3 <tr>

4 <td>{note.title}</td>

5 <td>{note.content}</td>

6 <td>

7 <button onClick={onEdit(note)} className="outlined">Edit</button>

8 </td>

9 <td>

10 <button onClick={onDelete(note.id)} className="danger">Delete</button>

11 </td>

12 </tr>

13 );

14};

第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this

来自From 受控输入：value + onChange 的闭环Controlled inputs: the loop between value and onChange · React 考试React exam

L2填空Fill the blanks补全受控输入的闭环Complete the loop of a controlled input

把 NoteForm 里 textarea 那一段补全。三个空构成一个完整的闭环。

Fill in the textarea part of NoteForm. The three blanks together form one complete loop.

TSXsrc/components/NoteForm/index.tsx3 个空3 blanks

1const [content, setContent] = ("");

3<textarea

4 placeholder="Content"

5 value={}

6 onChange={(e) => setContent()}

7 data-testid="form-textarea"

8 className="form-textarea"

9/>

把 3 个空都填上才能检查（还差 3 个）Fill all 3 blanks to check (3 to go)

来自From 受控输入：value + onChange 的闭环Controlled inputs: the loop between value and onChange · React 考试React exam

L2Debug LabDebug LabDebug Lab · 点 Add 之后页面闪一下，笔记没了Debug Lab · the page blinks after Add and the note is gone

填好标题和内容，点 Add。页面明显闪了一下，地址栏出现了 ?，表格还是空的。

Fill in a title and some content, then press Add. The page clearly blinks, a ? appears in the address bar, and the table is still empty.

第 1 步 · 先看现象和代码，别急着改Step 1 · read the symptom and the code before you touch anything

# 没有 JavaScript 报错。 # 现象：点击 Add 后 # - 页面整体刷新了一次 # - 地址栏从 http://localhost:5173/ 变成 http://localhost:5173/? # - 输入框被清空，表格依然是空的 # - React DevTools 里所有 state 都回到了初始值# No JavaScript error. # Symptom: after clicking Add # - the whole page reloaded once # - the address bar changed from http://localhost:5173/ to http://localhost:5173/? # - the inputs were cleared and the table is still empty # - in React DevTools every piece of state is back to its initial value

TSX有问题的 handleSubmitThe broken handleSubmit示意Illustrative

1const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {

2 if (isFormInvalid) return;

3 const newNote = { id: Date.now(), title: title.trim(), content: content.trim() };

4 onSubmit(newNote);

5 setTitle("");

6 setContent("");

7};

第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this

来自From useEffect：把 props 的变化同步进 stateuseEffect: copying a change in props into state · React 考试React exam

L2填空Fill the blanks补全编辑回填的 useEffectComplete the useEffect that prefills the form for editing

这是 NoteForm 里那个决定 Task 3 成败的 effect。两个空：一个分支条件，一个依赖数组。

This is the effect in NoteForm that decides whether Task 3 passes. Two blanks: one branch condition, one dependency array.

TSXsrc/components/NoteForm/index.tsx2 个空2 blanks

1useEffect(() => {

2 if () {

3 setTitle(noteToEdit.title);

4 setContent(noteToEdit.content);

5 } else {

6 setTitle("");

7 setContent("");

8 }

9}, );

把 2 个空都填上才能检查（还差 2 个）Fill all 2 blanks to check (2 to go)

来自From Task 1 · Add：提交表单，新笔记进入表格Task 1 · Add: submit the form and the new note appears in the table · React 考试React exam

L2填空Fill the blanks补全新增逻辑Fill in the add logic

两个空。想清楚「旧的要不要留」和「用哪种更新形式」。

Two blanks. Decide whether the old notes have to stay, and which form of update to use.

TSXsrc/components/NoteManager/index.tsx2 个空2 blanks

1const handleSubmitNote = (submittedNote: Note) => {

2 if (noteToEdit) {

3 // Task 3

4 } else {

5 setNotes(() => [, submittedNote]);

6 }

7};

把 2 个空都填上才能检查（还差 2 个）Fill all 2 blanks to check (2 to go)

来自From Task 2 · Delete：点 Delete，该行按 id 被移除Task 2 · Delete: click Delete and that one row is removed by id · React 考试React exam

L2填空Fill the blanks补全删除逻辑Fill in the delete logic

三个空。第三个空是这道题唯一会绕人的地方。

Three blanks. The third one is the only part that trips people up.

TSXsrc/components/NoteManager/index.tsx3 个空3 blanks

1const handleDelete = (id: number) => {

2 setNotes((prev) => prev.((note) => note. id));

3};

把 3 个空都填上才能检查（还差 3 个）Fill all 3 blanks to check (3 to go)

来自From Task 2 · Delete：点 Delete，该行按 id 被移除Task 2 · Delete: click Delete and that one row is removed by id · React 考试React exam

来自From Task 3 · Edit：回填、改文字、就地更新、退出编辑Task 3 · Edit: refill the form, change the button text, update the row where it is, leave edit mode · React 考试React exam

L2填空Fill the blanks补全编辑逻辑的四个关键位置Fill in the four key spots of the edit logic

四个空横跨两个函数。第 4 个空是最容易漏的那一行 —— 漏了它测试照样能过，但行为明显不对。

Four blanks across two functions. The fourth is the line people forget most often — without it the tests still pass, but the behavior is clearly wrong.

TSXsrc/components/NoteManager/index.tsx4 个空4 blanks

1const handleSubmitNote = (submittedNote: Note) => {

2 if (noteToEdit) {

3 setNotes((prev) =>

4 prev.((note) =>

5 note.id submittedNote.id ? : note,

6 ),

7 );

8 ;

9 } else {

10 setNotes((prev) => [...prev, submittedNote]);

11 }

12};

14const handleEdit = (note: Note) => {

15 setNoteToEdit(note);

16};

把 4 个空都填上才能检查（还差 4 个）Fill all 4 blanks to check (4 to go)

来自From 实现：worker pool（工人池）Building it: a worker pool, meaning a fixed number of workers sharing one queue · React 考试React exam

L2填空Fill the blanks补全 worker pool 的五个关键位置Fill in the five key spots of the worker pool

五个空。第 2 个和第 4 个是最容易写错的 —— 一个关系到「顺序」，一个关系到「任务到底有没有被启动」。

Five blanks. Numbers 2 and 4 are the ones most often written wrong: one decides the order, the other decides whether the task was started at all.

TSq2/taskRunner.ts5 个空5 blanks

1export async function runTasks<T>(

2 tasks: Task<T>[],

3 limit: number,

4): Promise<SettledResult<T>[]> {

5 const results: SettledResult<T>[] = new Array(tasks.length);

6 let nextIndex = 0;

8 const worker = async () => {

9 while (nextIndex tasks.length) {

10 const i = nextIndex;

11 nextIndex++;

13 try {

14 const value = await ;

15 results[] = { status: "fulfilled", value };

16 } catch (reason) {

17 results[i] = { status: "", reason };

18 }

19 }

20 };

22 const workerCount = Math.(limit, tasks.length);

23 const workers: Promise<void>[] = [];

24 for (let w = 0; w < workerCount; w++) {

25 workers.push(worker());

26 }

27 await Promise.all(workers);

28 return results;

29}

把 5 个空都填上才能检查（还差 5 个）Fill all 5 blanks to check (5 to go)

来自From 实现：worker pool（工人池）Building it: a worker pool, meaning a fixed number of workers sharing one queue · React 考试React exam

L2Debug LabDebug LabDebug Lab · 一行 START 都没打印Debug Lab · not one START line prints

跑 npm run q2，没有报错，但一行task N START 都没有，直接就出结果了 —— 而且结果里的 value 长得很奇怪。

You run npm run q2. Nothing reports an error, but not one task N START line appears; the results come out right away. And the value in each result looks strange.

第 1 步 · 先看现象和代码，别急着改Step 1 · read the symptom and the code before you touch anything

$ npm run q2 === FINAL RESULTS (must be in original order) === #1 { status: 'fulfilled', value: [Function (anonymous)] } #2 { status: 'fulfilled', value: [Function (anonymous)] } #3 { status: 'fulfilled', value: [Function (anonymous)] } #4 { status: 'fulfilled', value: [Function (anonymous)] } #5 { status: 'fulfilled', value: [Function (anonymous)] } #6 { status: 'fulfilled', value: [Function (anonymous)] } # 注意： # - 一行 "task N START" 都没有 # - 应该 reject 的 task 3 也变成了 fulfilled # - value 是函数，不是 "result of task N"$ npm run q2 === FINAL RESULTS (must be in original order) === #1 { status: 'fulfilled', value: [Function (anonymous)] } #2 { status: 'fulfilled', value: [Function (anonymous)] } #3 { status: 'fulfilled', value: [Function (anonymous)] } #4 { status: 'fulfilled', value: [Function (anonymous)] } #5 { status: 'fulfilled', value: [Function (anonymous)] } #6 { status: 'fulfilled', value: [Function (anonymous)] } # Note: # - not one "task N START" line was printed # - task 3, which should reject, came back fulfilled # - value is a function, not "result of task N"

TypeScript有问题的 workerThe worker with the problem示意Illustrative

1const worker = async () => {

2 while (nextIndex < tasks.length) {

3 const i = nextIndex;

4 nextIndex++;

6 try {

7 const value = await tasks[i];

8 results[i] = { status: "fulfilled", value };

9 } catch (reason) {

10 results[i] = { status: "rejected", reason };

11 }

12 }

13};

第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this

来自From 变式一 · Todo ListVariation 1 · Todo List · React 考试React exam

L2填空Fill the blanks补全翻转与批量操作Fill in the toggle and the bulk actionDrillLab 自出Written by DrillLab

四个空。第 2 个是「只改一个字段」的写法，第 4 个考的是「全选」和「反选」的区别。

Four blanks. The second is how you change one field only. The fourth is about the difference between select-all and invert-selection.

TSXsrc/components/TodoList/index.tsx4 个空4 blanks

1// 翻转一条：只改 done，其他字段照抄

2const toggle = (id: number) => {

3 setTodos((prev) =>

4 prev.((t) => (t.id === id ? { , done: !t.done } : t)),

5 );

6};

8// 剩余几项 —— 派生数据

9const remaining = todos.((t) => !t.done).length;

11// 全选 / 取消全选

12const toggleAll = () => {

13 const next = ;

14 setTodos((prev) => prev.map((t) => ({ ...t, done: next })));

15};

把 4 个空都填上才能检查（还差 4 个）Fill all 4 blanks to check (4 to go)