16 道题逐题对照The 16 problems, compared one by one
哪些已经写过、哪些是缺口、缺的那道到底在考什么。Which ones you have already written, which ones are gaps, and what the missing ones actually test.
这一页有什么On this page3
- 知道这 16 道题分别对应本站哪一节课Know which lesson on this site each of the 16 problems maps to
- 识别出「换了个业务壳但考点相同」的题Recognise problems that only change the story around them and test the same thing
- 说清 7 道缺口题各自新增的是什么考点Say what each of the 7 gap problems adds that the others do not test
coding 题的名字千变万化，考点其实很少。把 16 道题归成几类之后你会发现：能独立写出 Q1 的 CRUD、变式三的 fetch 三态、变式五的 Context，题库里一半的题就自动会了。这一节的用处是让你不要重复刷同类题。Coding problems come with endless different names, but they test very few things. Once you sort the 16 into groups you can see it: if you can write the CRUD of Q1, the three fetch states of variant three and the Context of variant five on your own, half the question bank is already answered. This lesson is here so you do not practise the same problem over and over.
覆盖对照表The coverage table
9 道已覆盖，7 道补进来。9 are already covered; 7 are added here.
「已覆盖」的判断标准是： 能不能用本站某一节课里真跑过测试的那套解法原样解决。只是「概念讲过」不算。
| # | 题目 | 本站哪里 | 结论 |
|---|---|---|---|
| 363 | Counter Component | React 考试 ·「useState：让界面跟着数据变」 | 已覆盖 |
| 364 | Toggle Switch | 变式一 TodoList 的 toggle + 变式五主题切换 | 已覆盖 |
| 365 | Search Bar | 「受控输入：value + onChange 的闭环」 | 已覆盖 |
| 366 | Dropdown Menu | — | 补：点击外部关闭需要useRef 拿 DOM +document 监听 + 清理 |
| 367 | Tabs Component | — | 补：只存「哪个激活」， 面板是派生的；顺带 ARIA |
| 368 | Star Rating | — | 补：hover 预览 + 已选值 两个状态叠加，受控/非受控双模式 |
| 369 | GET openlibrary.org | 变式三 · fetch 取数（三态 + 竞态 + abort） | 已覆盖 |
| 370 | GET jsonplaceholder | 同上 —— 换了个 URL，考点一样 | 已覆盖 |
| 371 | Todo + Redux Toolkit | 变式一是 useState 版；Redux 只在八股里讲过 | 补：同一个业务换成createSlice + selector |
| 372 | Context API for Global State | 变式五 · 主题切换（含 value 记忆化） | 已覆盖 |
| 373 | Music Player（useRef） | — | 补：useRef的另一种用法 —— 拿 DOM 节点调命令式 API |
| 374 | Search Filter for Users | 变式三取数 + 变式一筛选，两节拼起来 | 已覆盖（可当组合练习） |
| 375 | Create a Custom Hook | 八股 #340 讲了理论，但没有动手练习 | 补：写一个 useLocalStorage |
| 376 | parent and child component | 「props：数据往下流，事件往上报」+ Q1 | 已覆盖 |
| 377 | Task Management Dashboard | Q1 CRUD + 模拟考 A（Support Tickets） | 已覆盖（模拟考就是它的同类） |
| 378 | Kanban board | — | 补：跨列移动 =一次操作同时改两个数组 |
The bar for “already covered” is this: can you solve the question as-is with a solution from a lesson here that really passed its tests. “We explained the concept” does not count.
| # | Question | Where on this site | Verdict |
|---|---|---|---|
| 363 | Counter Component | React exam · “useState: let the UI follow the data” | covered |
| 364 | Toggle Switch | the toggle in variant 1 TodoList + the theme switch in variant 5 | covered |
| 365 | Search Bar | “Controlled inputs: the value + onChange loop” | covered |
| 366 | Dropdown Menu | — | new: closing on an outside click needs useRef for the DOM node, a document listener, and cleanup |
| 367 | Tabs Component | — | new: store only “which one is active”, the panel is derived; ARIA on top |
| 368 | Star Rating | — | new: hover preview stacked on the picked value, controlled and uncontrolled in one component |
| 369 | GET openlibrary.org | variant 3 · fetching data (three states + races + abort) | covered |
| 370 | GET jsonplaceholder | same as above — different URL, same point | covered |
| 371 | Todo + Redux Toolkit | variant 1 is the useState version; Redux only came up in interview prep | new: the same feature rebuilt on createSlice + selectors |
| 372 | Context API for Global State | variant 5 · theme switching (with a memoized value) | covered |
| 373 | Music Player (useRef) | — | new: the other use of useRef — grab a DOM node and call its imperative API |
| 374 | Search Filter for Users | fetching from variant 3 + filtering from variant 1, glued together | covered (works as a combo drill) |
| 375 | Create a Custom Hook | interview #340 covered the theory but had no hands-on drill | new: write a useLocalStorage |
| 376 | parent and child component | “props: data flows down, events report up” + Q1 | covered |
| 377 | Task Management Dashboard | Q1 CRUD + mock exam A (Support Tickets) | covered (the mock exam is the same species) |
| 378 | Kanban board | — | new: moving across columns = changing two arrays in one operation |
16 道题其实只有五类考点The 16 problems really test only five things
认出类别，就不用一道道刷。Once you can name the group, you do not have to practise them one by one.
- 受控输入 + 列表 CRUD—— 363 / 364 / 365 / 371 / 374 / 376 / 377。七道题一个考点：
value+onChange、 三种不可变更新、派生数据。Q1 那道真题就是它的完整版。 - 异步取数三态—— 369 / 370 / 374。 loading / error / data， 加上
res.ok和竞态。变式三覆盖。 - 跨层共享状态—— 372 / 371。 Context 或状态库。变式五覆盖 Context，371 补 Redux。
- 组件内部的交互状态机—— 366 / 367 / 368。 开关、激活项、hover 预览。这一类之前完全没有，是最大的缺口。
- 命令式逃逸口—— 373。
useRef拿 DOM 节点。 React 里唯一「不走声明式」的地方。
378（Kanban）是第 1 类的升级版： 普通 CRUD 改一个数组， 跨列移动要同时改两个数组， 这一步很多人会写成先删再加两次setState， 导致中间态被渲染出来。
怎么用这一节：如果你能独立写出 Q1、变式三、变式五，1 / 2 / 3 三类的九道题都不用再刷。 直接做下面四节补的题。
- Controlled input + list CRUD — 363 / 364 / 365 / 371 / 374 / 376 / 377. Seven questions, one point:
value+onChange, the three immutable updates, derived data. Q1 in the real exam is the full version of it. - The three states of async fetching — 369 / 370 / 374. loading / error / data, plus
res.okand races. Variant 3 covers it. - State shared across layers — 372 / 371. Context or a state library. Variant 5 covers Context, 371 adds Redux.
- A widget’s own interaction state machine — 366 / 367 / 368. Open or closed, active item, hover preview. Nothing here touched this class before, so it was the biggest gap.
- The imperative escape hatch — 373.
useRefto reach a DOM node. The one place in React that is not declarative.
378 (Kanban) is class 1 leveled up: plain CRUD changes one array, moving across columns has to change two arrays at once. Plenty of people write that step as delete-then-add with two setState calls, which renders the in-between state.
How to use this lesson: if you can write Q1, variant 3 and variant 5 on your own, the nine questions in classes 1 / 2 / 3 need no more drilling. Go straight to the four lessons below.
动手做Get your hands on it
填空只是过渡。真正掌握的标准，是在没有答案的时候从头写出来 —— 所以做完 L2 之后一定要往 L3、L4 走。Filling blanks is a stepping stone. The real bar is writing it from nothing, so once L2 is comfortable, push on to L3 and L4.
面试官出题：「实现一个 Kanban 看板，卡片可以在三列之间移动。」 这道题最核心的考点是哪一个？
The interviewer says: “Build a Kanban board where a card can move between three columns.” Which is the central point this question tests?
- 16 道题里 9 道已被 Q1、Q2、五道变式题和两套模拟考覆盖，别重复刷。9 of the 16 problems are already covered by Q1, Q2, the five variant tasks and the two mock exams — do not practise them again.
- 五类考点：受控输入+CRUD（七道）、异步三态、跨层共享、组件内交互状态机、useRef 命令式。Five things are tested: controlled inputs plus CRUD (seven problems), the three async states, sharing state across levels, interaction state inside one component, and useRef for direct DOM calls.
- 最大的缺口是第四类「组件内部交互状态机」—— Dropdown / Tabs / 星级评分。The largest gap is the fourth one, interaction state inside a single component — Dropdown, Tabs and star rating.
- Kanban 是 CRUD 的升级版：一次操作同时改两个数组，要写成一个纯函数。Kanban is CRUD one step up: one action changes two arrays at the same time, and it should be written as one pure function.