练习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

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

来自From 组件就是一个返回界面的函数A component is a function that returns what you see on screen · React 考试React exam

L1认出来Spot it哪一行会把变量的值显示出来Which line prints the value of a variable

下面哪一行会在页面上显示这条笔记的标题内容？

Which line below shows the title of this note on the page?

先选一个选项Pick an option first

来自From 组件就是一个返回界面的函数A component is a function that returns what you see on screen · React 考试React exam

L1认出来Spot it三道题的代码该写在哪个文件Which file the code for the three tasks belongs in

Q1 的三个任务（Add / Delete / Edit）都要改动笔记列表。这些逻辑主要写在哪个文件里？

All three tasks in Q1 (Add / Delete / Edit) change the note list. Which file holds most of that logic?

先选一个选项Pick an option first

来自From useState：让界面跟着数据变useState: making the screen follow the data · React 考试React exam

L1排顺序Order it把一次点击的顺序排对Put the steps of one click in order

用户点了某一行的 Delete 按钮。把下面五件事按发生顺序排好。

The user clicked the Delete button on one row. Put the five things below in the order they happen.

1React 重新执行 NoteManager 函数，拿到新的 JSXReact runs the NoteManager function again and gets new JSX

2NoteItem 的 onClick 触发，调用 onDelete(note.id)The onClick of NoteItem fires and calls onDelete(note.id)

3React 对比新旧 JSX，把变化的部分写进真实 DOMReact compares the new JSX with the old one and writes only the differences into the real DOM

4NoteManager 里的 handleDelete 执行，调用 setNotes(...)handleDelete inside NoteManager runs and calls setNotes(...)

5React 记下 notes 的新值，标记这个组件需要重新渲染React records the new value of notes and marks this component for a re-render

来自From 列表渲染与 keyRendering a list, and the key prop · React 考试React exam

L1认出来Spot it这个列表该用什么当 keyWhat should this list use as its key

notes 里每条是 { id: number; title: string; content: string }，用户可以删除任意一条。下面哪个是最合适的 key?

Each item in notes is { id: number; title: string; content: string }, and the user can delete any of them. Which of these is the best key?

先选一个选项Pick an option first

来自From 列表渲染与 keyRendering a list, and the key prop · React 考试React exam

L1认出来Spot it哪一段什么都不会渲染Which one renders nothing at all

下面哪一段会导致表格里一行都不出现（而且不报错）？

Which of these makes the table show no rows at all, without reporting an error?

先选一个选项Pick an option first

来自From 派生数据与状态提升：什么不该做成 stateValues you can compute, and lifting state up: what should not be state · React 考试React exam

L1认出来Spot it哪个应该做成 stateWhich one should become state

假设要给 Notes Manager 加一个「显示当前有几条笔记」的文字。这个数字应该怎么实现？

Say you have to add a line to Notes Manager that shows how many notes there are right now. How should that number be produced?

先选一个选项Pick an option first

来自From 派生数据与状态提升：什么不该做成 stateValues you can compute, and lifting state up: what should not be state · React 考试React exam

L1认出来Spot it这个 state 该住哪Where should this state live

假设要加一个搜索框（在 NoteForm 上方，属于 NoteManager 的直接子元素），输入关键词后表格只显示匹配的笔记。搜索关键词这个 state 该放在哪？

Say you add a search box above NoteForm, as a direct child of NoteManager. Once a keyword is typed, the table shows only the notes that match. Where should the state holding that keyword go?

先选一个选项Pick an option first

来自From 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam

L1认出来Spot it哪一处改动会让测试挂掉Which change makes a test fail

README 只说了「不得修改任何 data-testid」。下面哪些改动也会让现有测试失败？（多选）

The README says only that no data-testid may be changed. Which of the changes below also break the existing tests? (more than one)

这题是多选。More than one answer is correct.

先选一个选项Pick an option first

来自From 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam

L1认出来Spot it题目没写但测试在查的是哪一条The requirement the task never states but a test checks

README 的三个 Task 里没提到某个要求，但四个测试里有一条专门在查它。是哪个？

One requirement is never mentioned in the three Tasks of the README, yet one of the four tests checks exactly that. Which one is it?

先选一个选项Pick an option first

来自From 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam

L1排顺序Order it把上手顺序排对Put the starting steps in order

拿到这个项目，最合理的动作顺序是什么？

You just received this project. What is the most sensible order to work in?

1写代码：三个 handler 逐个实现Write the code: implement the three handlers one at a time

2npm install，然后 npx vitest run 拿到基线npm install, then npx vitest run to get a baseline

3读 NoteForm / NoteTable / NoteItem，确认它们已经完整、不用改Read NoteForm / NoteTable / NoteItem and confirm they are already complete and need no change

4读 README + 读测试文件，抄下所有验收标准Read the README and the test file, and write down every acceptance criterion

5npx vitest run 验证，再 npm run dev 手动点一遍Verify with npx vitest run, then npm run dev and click through it by hand

6读 types/Note.ts，确认数据形状和 id 的类型Read types/Note.ts to confirm the shape of the data and the type of id

来自From 四个测试逐条读，以及它们的盲区The four tests read line by line, and what they fail to catch · React 考试React exam

L1认出来Spot it哪个实现能骗过全部四个测试但其实是错的Which implementation passes all four tests and is still wrong

下面哪个 handleDelete 能让四个测试全部通过，但明显违反题目要求？

Which handleDelete below makes all four tests pass while clearly breaking what the task asks for?

先选一个选项Pick an option first

来自From 四个测试逐条读，以及它们的盲区The four tests read line by line, and what they fail to catch · React 考试React exam

L1认出来Spot it这个测试失败是因为什么Why this test fails

你写的 handleSubmitNote 是 setNotes((prev) => [...prev, submittedNote])，但自己加的测试报「找不到 My Title」。测试代码是 userEvent.click(btn); expect(list).toHaveTextContent("My Title")。最可能的原因？

Your handleSubmitNote is setNotes((prev) => [...prev, submittedNote]), but the test you added reports that My Title cannot be found. The test code is userEvent.click(btn); expect(list).toHaveTextContent("My Title"). What is the most likely reason?

先选一个选项Pick an option first