React 考试准备React Assessment
在空文件夹里做完 Notes Manager 和并发任务调度器，并通过一套换了场景的模拟考。Build Notes Manager and the concurrent task runner in an empty folder, and pass a mock in a new scenario.
要考 React：组件、hooks、受控输入、列表、useEffect、Context。Facing a React assessment: components, hooks, controlled inputs, lists, useEffect, Context.
这条计划的全程The whole route
前置Prereq
前置：地基Prerequisites: Foundations
你在这You are hereReact 考试假设你会 npm、会读 package.json、会不改原数组地更新数据、会读 tsc 的报错。这一档就是这些。已经会了就直接勾掉。The React exam assumes you know npm, can read a package.json, can update an array without mutating it, and can read a tsc error. Tick these off if you already can.
- Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile
- package.json 逐字段读一遍package.json, field by field
- npm scripts：命令到底跑了什么npm scripts: what the command actually runs
看这一档全部 9 条View all 9 items
- Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile
- package.json 逐字段读一遍package.json, field by field
- npm scripts：命令到底跑了什么npm scripts: what the command actually runs
- 两个考试项目的目录，逐个说明The directory layout of both exam projects
- 数组与对象：不可变更新三件套Arrays and objects: three ways to update without changing the original
- 异步：Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled
- ESM:import / export 与那些莫名其妙的报错ESM: import / export, and the errors that look strange at first
- 类型、type 与 interfaceTypes, type and interface
- 泛型参数，以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error
学Learn
学：React 课文Learn: the React lessons
按原顺序走。第 3 部分是 Q1 逐题拆解，第 4 部分是 Q2，第 5 部分是五道高频变式。In their existing order. Part 3 takes Q1 apart task by task, Part 4 is Q2, and Part 5 is five variations that come up often.
- 组件就是一个返回界面的函数A component is a function that returns what you see on screen
- props：数据往下流，事件往上报props: data flows down, events go back up
- useState：让界面跟着数据变useState: making the screen follow the data
- 受控输入：value + onChange 的闭环Controlled inputs: the loop between value and onChange
- 列表渲染与 keyRendering a list, and the key prop
- useEffect：把 props 的变化同步进 stateuseEffect: copying a change in props into state
- 派生数据与状态提升：什么不该做成 stateValues you can compute, and lifting state up: what should not be state
- 先读题：三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests
- Task 1 · Add：提交表单，新笔记进入表格Task 1 · Add: submit the form and the new note appears in the table
- Task 2 · Delete：点 Delete，该行按 id 被移除Task 2 · Delete: click Delete and that one row is removed by id
- Task 3 · Edit：回填、改文字、就地更新、退出编辑Task 3 · Edit: refill the form, change the button text, update the row where it is, leave edit mode
- 四个测试逐条读，以及它们的盲区The four tests read line by line, and what they fail to catch
- 读题：三条要求，每一条都在指定一种写法Reading the question: three requirements, and each one decides how you write it
- 实现：worker pool（工人池）Building it: a worker pool, meaning a fixed number of workers sharing one queue
- 变式一 · Todo ListVariation 1 · Todo List
- 变式二 · 计时器：useEffect 的清理函数Variation 2 · a timer: the useEffect cleanup function
- 变式三 · fetch 取数：loading、error 与竞态Variation 3 · fetching data: loading, error, and the race between two requests
- 变式四 · 递归读取评论的评论Variation 4 · reading replies to replies with recursion
- 变式五 · 主题切换：Context 怎么用Variation 5 · theme switching: how to use Context
- Debug Lab · React 十种典型故障Debug Lab · ten typical React failures
- 从零重写：空文件夹到 4 个测试全过Write it again yourself: from an empty folder to 4 passing tests
背Review
背：React 方向的八股Review: the React questions
面试和考试的口头追问都从这 36 道里来。答不上来就标「不会」，抽认卡下一轮会先抽它。The spoken follow-up questions come from these 36. Mark the ones you miss; the next flashcard round puts them first.
过过一遍 0 / 36 · 其中标了「会」的 0 道。自评过一次就算过了这一档 —— 不用把每道都标成「会」才往下走。0 / 36 reviewed, 0 of them marked confident. One rating is enough to clear this stage — you do not have to reach confident on every question first.
覆盖方向：Topics covered: React 与生态React & ecosystem
36 格，一格一个真实条目 —— 鼠标停上去或用键盘走过去会读出它的标题。36 squares, one per real item — hover or tab to one and it reads out its title.
练Practice
练：React 的课内练习Practice: the React exercises
54 个，含 14 个 Debug Lab。检查是正则匹配，不跑代码 —— 它判得出你用没用 filter，判不出你写的跑不跑得通。54 of them, including 14 debug labs. The check is a regex match, not a run: it can tell whether you used filter, not whether your code works.
54 格，一格一个真实条目 —— 鼠标停上去或用键盘走过去会读出它的标题。54 squares, one per real item — hover or tab to one and it reads out its title.
写Code
写：React 的 Coding 题Code: the React coding problems
整块写完并跑绿。第二遍点「空白重来」—— 实现文件全清空、只留测试，那一遍才算验收。Write the whole thing and take the tests green. On the second pass hit start blank: every implementation file is emptied and only the tests remain. That pass is the one that counts.
- Todo List
- 计时器（useEffect 清理函数）Timer (useEffect cleanup)
- fetch 取数：loading、error 与竞态Fetching data: loading, error and race conditions
- 递归评论树 + 树形不可变更新Recursive comment tree, updated without changing the original
- 主题切换（Context + value 记忆化）Theme switch (Context plus a memoised value)
- Notes Manager 增删改（React 考试 Q1）Notes Manager: add, edit and delete (React exam Q1)
- 带并发上限的异步任务调度器（Q2）Async task scheduler with a concurrency limit (Q2)
空手做Rebuild
空手做：从零重写Rebuild: from an empty folder
Q1 和 Q2 各一道，计时、无提示、答案锁到交卷之后。这一档才是真实考试的样子。One for Q1 and one for Q2: timed, no hints, answers locked until you hand in. This tier is what the real thing looks like.
模拟考Assess
模拟考：Support Ticket BoardAssess: Support Ticket Board
考点和 Q1 一一对应，题面是新的。不许回头看 Q1 的答案。It tests the same things as Q1 on a new problem. Do not look back at your Q1 answer.
正在读这台浏览器里的进度…Reading your progress from this browser…
计划里每一格的完成状态都是已有进度的一个视图 —— 以前自己刷过的八股、做过的练习一条都不会白做，跟着计划做完的 也照样在 课程 里打勾。 换计划、不跟计划都不动任何记录。Every square here is a view of progress you already have. Questions you rated and exercises you solved before picking a plan all count, and anything you finish inside a plan is still ticked in the courses. Changing plans or stopping never touches a record.