DrillLab
开始StartNode.js, npm, node_modules and the lockfile
练习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
筛一下Filter these面试八股Interview questionsL2L2
课程Course全部All地基 · 项目与语言Foundations · project and languageReact 考试React examFederation 考试Federation exam面试八股Interview questionsCab BookingCab Booking
难度LevelL1 → L4 和上面四档同一个意思：给你的东西越来越少L1 → L4: the same idea as the four tiers above — less is handed to you全部难度All levelsL1L1L2L2L3L3L4L4
类型Kind全部类型All kinds认出来Spot it排顺序Order it填空Fill the blanks写整块Write a blockDebug LabDebug Lab从零重写Rebuild from scratch

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

练习Exercises

筛出 2 个练习（共 148 个）。Showing 2 of 148.
来自From 缺口一 · Dropdown、Tabs、星级评分Gap 1 · dropdown, tabs and star rating · 面试八股Interview questions
L2填空Fill the blanks补全「点外面关掉」Fill in "click outside closes it"DrillLab 自出Written by DrillLab

四个空。第 2 个用错会导致「点自己内部也关掉」， 第 4 个漏了会泄漏监听器。

Four blanks. Get the 2nd one wrong and a click inside the dropdown closes it too; miss the 4th one and you leak a listener.

TSXsrc/components/Dropdown/index.tsx4 个空4 blanks
1const boxRef = <HTMLDivElement>(null);
2
3useEffect(() => {
4 if (!open) return;
5
6 const onDocClick = (e: MouseEvent) => {
7 if (boxRef.current && !boxRef.current.(e.target as Node)) {
8 setOpen(false);
9 }
10 };
11
12 document.addEventListener("", onDocClick);
13 return () => document.("", onDocClick);
14}, [open]);
把 4 个空都填上才能检查（还差 4 个）Fill all 4 blanks to check (4 to go)
来自From 缺口三 · 同一个 Todo 换成 Redux ToolkitGap 3 · the same Todo app, moved to Redux Toolkit · 面试八股Interview questions
L2填空Fill the blanks补全 createSliceFill in createSliceDrillLab 自出Written by DrillLab

四个空。第 3 个空是这道题的加分点， 第 4 个空写错会让 reducer 不纯。

Four blanks. The 3rd one is the bonus point of this question; get the 4th one wrong and the reducer is no longer pure.

TSsrc/store/todosSlice.ts4 个空4 blanks
1const todosSlice = ({
2 name: "todos",
3 initialState,
4 reducers: {
5 added: {
6 reducer(state, action: PayloadAction<Todo>) {
7 state.items.(action.payload);
8 },
9 (text: string) {
10 return { payload: { id: (), text: text.trim(), done: false } };
11 },
12 },
13 toggled(state, action: PayloadAction<string>) {
14 const t = state.items.find((x) => x.id === action.payload);
15 if (t) t.done = !t.done;
16 },
17 },
18});
把 4 个空都填上才能检查（还差 4 个）Fill all 4 blanks to check (4 to go)