主题切换（Context + value 记忆化）Theme switch (Context plus a memoised value)

React中等 · Medium约 30 分钟~30 min浏览器里能跑Runs in the browser

§01

题面The problem

先把要求读完，再动手。Read every requirement before you start.

类型已给好。写出 context、Provider、自定义 hook 三部分。检查器会查记忆化、函数式更新和守卫。

The types are given. Write all three parts: the context, the Provider, and the custom hook. The checker looks for the memoization, the updater form and the guard.

验收标准Acceptance criteria

默认 light：卡片显示 light，按钮文字是 Switch to Dark；切到 dark 后变 Switch to LightThe default is light: the card shows light and the button reads Switch to Dark. After switching to dark the button reads Switch to Light
卡片底色跟着主题走 —— light → #fff，dark → #222The card background follows the theme: light uses #fff, dark uses #222
同一个 Provider 下的多个消费者一起变（这才是 Context 的意义）Several consumers under the same Provider all change together. That is the whole reason Context exists
没套 Provider 就调 useTheme() 必须立刻抛错，信息里要出现 ThemeProviderCalling useTheme() with no Provider around it must throw immediately, and the message must contain ThemeProvider
toggleTheme 引用稳定：theme 变了它也不变（useCallback）toggleTheme keeps a stable identity: it stays the same function when theme changes (useCallback)
theme 没变时 context value 不换新对象（useMemo）While theme has not changed, the context value must not be a new object (useMemo)
一次事件里连调两次 toggleTheme 要回到原点 —— 必须用函数式更新Calling toggleTheme twice inside one event must land back on the starting theme. That needs the updater form

预计 30 分钟。这个数字是照「读完题就开始写、不查资料」估的 —— 第一次超时很正常，第二次要压进去。Budget 30 minutes. Overrunning on the first pass is normal; the second pass should fit.

§02

工作区Workspace

工作区是一个真的浏览器沙箱：左边写代码，右边实时预览，下面一个「跑测试」按钮。测试和本机那套是同一批断言，转写成了浏览器里能跑的写法。The workspace is a real in-browser sandbox: edit on the left, live preview on the right, one Run button below. The assertions are the same ones that pass on a real machine, rewritten for the browser runner.

需要联网。Requires an internet connection. 打包器和 npm 依赖都在 CodeSandbox 的远程服务上（评估过程见 docs/sandpack-evaluation.md），断网这块就起不来 —— 那就照下面的命令在本机跑。The bundler and the npm packages come from CodeSandbox's remote service, so this panel needs network access.

2 个起始文件 · 目标 8 passed2 starter files · target 8 passed

自己写出来、测试全绿之后再打勾。看懂答案不算。Tick this only after you wrote it yourself and the tests went green.

§03

展开讲解Walkthrough

下面是《变式五 · 主题切换：Context 怎么用》那一节的原文 —— 和课程里是同一份内容，不是另写的摘要。卡住了再展开。Below is the actual text of the lesson “变式五 · 主题切换：Context 怎么用” — the same content as in the course, not a rewritten summary. Expand it when you stall.

展开《变式五 · 主题切换：Context 怎么用》（7 段 · 约 20 分钟）Expand “变式五 · 主题切换：Context 怎么用” (7 sections · ~20 min)

完整那一节（含练习、常见错误、迁移模式）在The full lesson (with exercises, common mistakes and transfer patterns) is at 变式五 · 主题切换：Context 怎么用。

§01

为什么要 Context：props 传不动了Why Context exists: props cannot carry the value that far

Context 解决的是「跨很多层传同一个值」，不是「状态管理」。Context solves one problem: passing the same value through many levels. It is not state management.

中文English

前面讲过 props 往下流、事件往上报。这套规则在两三层内很好用，但主题这种东西整棵树都要读：

中间那些组件根本不关心主题，却被迫接一个theme 再往下递。这叫props 层层透传（prop drilling）。加一个 toggleTheme 就得再透传一次。

Context 的作用就是跳过中间层： Provider 在上面放一个值，子树里任何深度的组件直接取。

但别把它当状态管理器用。判断标准很简单：

该用：整棵树都要读、而且不常变的东西 —— 主题、当前用户、语言、路由。
不该用：只有两三层要用的（直接传 props）；或者每秒都在变的（context 一变，所有消费者都重渲染，会卡）。

Earlier we said props flow down, events report up. That rule works nicely for two or three levels, but something like a theme has to be readable by the whole tree:

The components in the middle do not care about the theme at all, yet they are forced to take a theme and hand it further down. That is prop drilling. Add a toggleTheme and you drill it all over again.

What Context does is skip the middle: a Provider puts a value up top, and a component at any depth in the subtree reads it directly.

But do not use it as a state manager. The test is simple:

Use it for things the whole tree reads that rarely change — theme, current user, language, route.
Do not use it for something only two or three levels need (pass props); or for something that changes every second (when a context changes, every consumer re-renders, and it drags).

TSX两种传法Two ways to pass it down示意Illustrative

1// ✗ prop drilling：中间三层根本不用 theme，只是被迫往下递

2<App theme={theme}>

3 <Layout theme={theme}>

4 <Sidebar theme={theme}>

5 <ThemedCard theme={theme} /> {/* 只有这里真的要用 */}

6 </Sidebar>

7 </Layout>

8</App>

10// ✓ Context：中间层什么都不用管

11<ThemeProvider>

12 <Layout>

13 <Sidebar>

14 <ThemedCard /> {/* 自己去 context 里取 */}

15 </Sidebar>

16 </Layout>

17</ThemeProvider>

1// ✗ prop drilling: the three middle layers never use theme, they just hand it on

2<App theme={theme}>

3 <Layout theme={theme}>

4 <Sidebar theme={theme}>

5 <ThemedCard theme={theme} /> {/* 只有这里真的要用 */}

6 </Sidebar>

7 </Layout>

8</App>

10// ✓ Context: the middle layers have nothing to do

11<ThemeProvider>

12 <Layout>

13 <Sidebar>

14 <ThemedCard /> {/* 自己去 context 里取 */}

15 </Sidebar>

16 </Layout>

17</ThemeProvider>

§02

Context 只有三个动作，加一个自定义 hookContext has only three moves, plus a custom hook

createContext 造管道、Provider 灌值、useContext 取值。第四步是自己包一层。createContext builds the pipe, Provider puts a value into it, useContext takes the value out. The fourth step is a wrapper you write yourself.

中文English

1. createContext—— 造一根管道。参数是「没有 Provider 时的默认值」。

2. <Ctx.Provider value={...}>—— 往管道里灌值。只有它的子树能取到。

3. useContext(Ctx)—— 取值。取到的是「最近的那个 Provider」给的值。

4. 包成 useTheme()。这一步不是可选的装饰，它有两个实际好处：消费者不用 import 那个 context 对象，以及可以在这里放守卫。

关于默认值，三种写法差别很大：

写法	忘了套 Provider 时
`createContext()`（题目给的参考结构）	拿到 `undefined`，在解构那一行炸出一句很难读的 `Cannot destructure property…`
`createContext({ theme: "light", toggleTheme: () => {} })`	不报错，界面正常显示浅色，点按钮没反应 —— 最难查的一种
`createContext<T \| undefined>(undefined)`+ hook 里守卫	抛一句人能看懂的话：`useTheme 必须在 <ThemeProvider> 里面用`

第三种是推荐写法。TS strict 下它还有个附带好处：守卫之后类型自动收窄，消费者拿到的是 ThemeContextValue 而不是可能为 undefined 的联合类型，不用到处写 ?.。

1. createContext — build the pipe. Its argument is the value used when there is no Provider.

2. <Ctx.Provider value={...}> — pour a value into the pipe. Only its subtree can read it.

3. useContext(Ctx) — read the value. You get whatever the nearest Provider handed down.

4. Wrap it in useTheme(). This step is not optional decoration; it buys two real things: consumers never import the context object, and you get a place to put the guard.

About the default value, the options differ a lot:

How it is written	When the Provider is missing
`createContext()` (the reference shape in the question)	You get `undefined` and it throws on the destructuring line with an unreadable `Cannot destructure property…`
`createContext({ theme: "light", toggleTheme: () => {} })`	No error at all, the UI renders light happily, the button does nothing — the hardest kind to track down
`createContext<T \| undefined>(undefined)` plus a guard in the hook	Throws a sentence a human can read — the error text written into the `useTheme` guard

The third one is the recommended shape. Under TS strict it has a bonus: the type narrows automatically after the guard, so consumers get ThemeContextValue instead of a union that might be undefined, and nobody has to sprinkle ?. everywhere.

TSX自定义 hook + 守卫A custom hook plus a guard已跑通Verified

1const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

3export function useTheme(): ThemeContextValue {

4 const ctx = useContext(ThemeContext);

5 // 守卫：一是给出人能看懂的报错，二是让 TS 把类型收窄到非 undefined

6 if (!ctx) throw new Error("useTheme 必须在 <ThemeProvider> 里面用");

7 return ctx;

1const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

3export function useTheme(): ThemeContextValue {

4 const ctx = useContext(ThemeContext);

5 // The guard does two things: gives a readable error, and narrows the type away from undefined

6 if (!ctx) throw new Error("useTheme has to be used inside <ThemeProvider>");

7 return ctx;

§03

toggleTheme：又是函数式更新toggleTheme: the updater function form again

和计时器那道题同一个道理，只是这次藏在 context 里。The same reason as in the timer question, only this time it is hidden inside the context.

中文English

toggleTheme 要读旧值算新值，所以必须用函数式更新：

写成 setTheme(theme === "light" ? "dark" : "light")在「点一下」这种场景下也能跑，但只要一次事件里连调两次就露馅 —— 两次都读到同一个旧 theme，结果只翻转了一次。

测试里专门有一条抓这个：一个按钮的 onClick 里调两次toggleTheme()，正确实现应该原样回到 light。这条测试是 DrillLab 加的，很多教程版本过不去。

另外 toggleTheme 要包useCallback(..., [])。依赖是空数组 —— 因为它内部只用函数式更新，不读任何外部变量，所以永远不需要重建。这一步是下一节 useMemo 生效的前提。

toggleTheme reads the old value to compute the new one, so it has to use the updater form:

Writing setTheme(theme === "light" ? "dark" : "light") also works for a single click, but call it twice inside one event and it gives itself away — both calls read the same old theme, so it only flips once.

One test targets exactly this: a button whose onClick calls toggleTheme() twice, and a correct implementation ends back on light. DrillLab added that test, and a lot of tutorial versions fail it.

toggleTheme also needs to be wrapped in useCallback(..., []). The dependency list is empty because the body only uses the updater form and reads no outside variable, so it never needs rebuilding. This step is what makes the useMemo in the next section work.

TSXtoggleTheme已跑通Verified

1const toggleTheme = useCallback(() => {

2 setTheme((prev) => (prev === "light" ? "dark" : "light"));

3}, []); // 空依赖：内部不读任何外部变量，所以永远不用重建

1const toggleTheme = useCallback(() => {

2 setTheme((prev) => (prev === "light" ? "dark" : "light"));

3}, []); // empty deps: the body reads no outside variable, so it never needs rebuilding

TSX示意Illustrative

1// ✗ 读闭包里的 theme

2const toggleTheme = () => {

3 setTheme(theme === "light" ? "dark" : "light");

4};

6// 单次点击看不出问题，但：

7onClick={() => { toggleTheme(); toggleTheme(); }}

8// 期望回到 light，实际停在 dark —— 两次都读到同一个旧值

1// ✗ Reading theme out of the closure

2const toggleTheme = () => {

3 setTheme(theme === "light" ? "dark" : "light");

4};

6// One click hides the problem, but:

7onClick={() => { toggleTheme(); toggleTheme(); }}

8// You expect light again; it stops on dark, because both calls read the same old value

§04

最容易漏的一步：value 必须记忆化The step people miss most: the value has to be memoized

这行代码看着无害，会让整棵子树每次都重渲染。This line looks harmless, and it makes the whole subtree re-render every time.

中文English

很多人这么写 Provider：

问题在于 { theme, toggleTheme } 是字面量对象 —— 每次 Provider 渲染都是一个新对象。 Context 判断「值变没变」用的是引用比较（Object.is），新对象就是「变了」。

后果：只要 Provider 的父层因为任何别的原因重渲染，所有 useTheme() 的组件都会跟着重渲染 —— 哪怕主题一动没动。子树越大越明显，而且 React.memo 也挡不住（memo 挡的是 props，context 走的是另一条路）。

正解是 useMemo，配合上一节的 useCallback：只有 theme 真的变了，才产生新的 value。

这条能被测出来 —— 测试里放一个探针组件，记录每次拿到的 value，父层重渲染后断言引用没变。把 useMemo 删掉真跑一遍：

Plenty of people write the Provider like this:

The problem is that { theme, toggleTheme } is an object literal — a brand new object on every Provider render. Context decides “did the value change” by reference (Object.is), and a new object counts as changed.

The result: whenever the Provider’s parent re-renders for any unrelated reason, every component calling useTheme() re-renders with it — even though the theme never moved. The bigger the subtree, the more obvious it gets, and React.memo cannot stop it either (memo guards props; context takes a different route).

The fix is useMemo, together with the useCallback from the last section: a new value only appears when theme really changes.

And this is testable — the test drops in a probe component that records every value it receives, then asserts the reference is unchanged after the parent re-renders. Delete the useMemo and run it for real:

TSX示意Illustrative

1// ✗ 每次渲染都是新对象 -> 所有消费者跟着重渲染

2return (

3 <ThemeContext.Provider value={{ theme, toggleTheme }}>

4 {children}

5 </ThemeContext.Provider>

6);

1// ✗ A new object on every render -> every consumer re-renders with it

2return (

3 <ThemeContext.Provider value={{ theme, toggleTheme }}>

4 {children}

5 </ThemeContext.Provider>

6);

TSX记忆化之后After memoizing it已跑通Verified

1// ✓ theme 不变时 value 就是同一个对象

2const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

4return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

1// ✓ While theme does not change, value stays the very same object

2const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

4return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

Terminal本机实测：漏掉 useMemo 的后果Measured here: what a missing useMemo costs已跑通Verified

1# 把 useMemo 删掉、直接传字面量对象之后的真实输出

2$ npx vitest run src/Theme.test.tsx

4 ✕ theme 没变时 context value 不换新对象（useMemo 生效）

5 AssertionError: expected 2 to be 1 // Object.is equality

7 Tests 1 failed | 7 passed (8)

9# 注意：功能测试全都还是绿的 —— 主题该切也切，颜色该变也变。

10# 挂掉的只有这条性能相关的。这正是「测试通过 ≠ 做对了」。

1# The real output after deleting useMemo and passing the object literal straight through

2$ npx vitest run src/Theme.test.tsx

4 ✕ theme 没变时 context value 不换新对象（useMemo 生效）

5 AssertionError: expected 2 to be 1 // Object.is equality

7 Tests 1 failed | 7 passed (8)

9# Note: every functional test is still green. The theme switches, the colours change.

10# The only failure is the one about performance. That is exactly why passing tests are not proof.

§05

两个消费者The two consumers

按钮和卡片都只做一件事：取值、用值。The button and the card each do one thing: read the value, then use it.

中文English

按钮的文字是「要切到哪」，不是「现在是哪」。当前 light，就显示 Switch to Dark。这一点很多人会写反 —— 题目明确要求了，读题的时候就要把这句话圈出来。

onClick={toggleTheme} 直接传函数引用，不用写 () => toggleTheme()—— 后者每次渲染造一个新函数，没必要。

卡片只解构 theme，不取toggleTheme——只拿自己要用的。

data-theme={theme} 这个属性是给测试用的：比对 style 里的颜色值更稳，改配色不用改测试。真实项目里也常这么干（本站的深色模式就是靠document.documentElement.setAttribute("data-theme", next)驱动 CSS 变量的）。

The button’s label says where you are going, not where you are. On light it reads Switch to Dark. A lot of people get this backwards — the question states it outright, so circle that sentence while you read.

onClick={toggleTheme} passes the function reference straight through. No need for () => toggleTheme() — that builds a new function on every render for nothing.

The card destructures only theme and leaves toggleTheme alone — take only what you use.

The data-theme={theme} attribute is there for the tests: it is steadier than comparing colour values in style, and changing the palette does not mean changing the tests. Real projects do the same thing (dark mode on this site runs on document.documentElement.setAttribute("data-theme", next) driving CSS variables).

TSXsrc/components/ThemeToggleButton/index.tsx已跑通Verified

1import React from "react";

2import { useTheme } from "../../context/ThemeContext";

4const ThemeToggleButton: React.FC = () => {

5 const { theme, toggleTheme } = useTheme();

7 return (

8 <button onClick={toggleTheme} data-testid="theme-toggle">

9 {theme === "light" ? "Switch to Dark" : "Switch to Light"}

10 </button>

11 );

12};

14export default ThemeToggleButton;

TSXsrc/components/ThemedCard/index.tsx已跑通Verified

1import React from "react";

2import type { ReactNode } from "react";

3import { useTheme } from "../../context/ThemeContext";

5const ThemedCard: React.FC<{ children?: ReactNode }> = ({ children }) => {

6 const { theme } = useTheme();

8 return (

9 <div

10 data-testid="themed-card"

11 data-theme={theme}

12 style={{

13 background: theme === "dark" ? "#222" : "#fff",

14 color: theme === "dark" ? "#eee" : "#222",

15 border: "1px solid #ccc",

16 padding: 16,

17 }}

18 >

19 <span data-testid="theme-name">{theme}</span>

20 {children}

21 </div>

22 );

23};

25export default ThemedCard;

§06

完整答案The complete answer

8 个测试全过。All 8 tests pass.

中文English

ThemeProvider 里 children 的类型是ReactNode—— 这是「任何能渲染的东西」的标准类型，字符串、数字、元素、数组、null 都算。

Provider 必须包在最外层。只有它的子树能 useTheme()；ThemeProvider 组件自己内部也不能用（那时 Provider 还没渲染出来）。

Inside ThemeProvider, children is typed ReactNode — the standard type for “anything that can be rendered”: strings, numbers, elements, arrays, null.

The Provider has to wrap the outermost layer. Only its subtree can call useTheme(); the ThemeProvider component cannot use it inside itself either (at that point the Provider has not rendered yet).

TSXsrc/context/ThemeContext.tsx（实测 8/8 通过）src/context/ThemeContext.tsx (8 of 8 pass here)已跑通Verified

1import { createContext, useCallback, useContext, useMemo, useState } from "react";

2import type { ReactNode } from "react";

4export type Theme = "light" | "dark";

6export interface ThemeContextValue {

7 theme: Theme;

8 toggleTheme: () => void;

11// 默认值给 undefined，配合下面 useTheme 里的守卫：

12// 「忘了套 Provider」会立刻炸，而不是静默用一个假的默认主题。

13const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

15export function ThemeProvider({ children }: { children: ReactNode }) {

16 const [theme, setTheme] = useState<Theme>("light");

18 // 函数式更新：一次事件里连调两次也能正确地翻回来

19 const toggleTheme = useCallback(() => {

20 setTheme((prev) => (prev === "light" ? "dark" : "light"));

21 }, []);

23 // value 必须记忆化。不然每次 Provider 渲染都是一个新对象，

24 // 所有 useTheme() 的组件都会重渲染 —— 哪怕 theme 根本没变。

25 const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

27 return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

28}

30export function useTheme(): ThemeContextValue {

31 const ctx = useContext(ThemeContext);

32 if (!ctx) throw new Error("useTheme 必须在 <ThemeProvider> 里面用");

33 return ctx;

34}

1import { createContext, useCallback, useContext, useMemo, useState } from "react";

2import type { ReactNode } from "react";

4export type Theme = "light" | "dark";

6export interface ThemeContextValue {

7 theme: Theme;

8 toggleTheme: () => void;

11// The default value is undefined, to pair with the guard inside useTheme below:

12// a missing Provider fails at once instead of quietly using a made-up theme.

13const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

15export function ThemeProvider({ children }: { children: ReactNode }) {

16 const [theme, setTheme] = useState<Theme>("light");

18 // Updater form: called twice inside one event, it still flips back correctly

19 const toggleTheme = useCallback(() => {

20 setTheme((prev) => (prev === "light" ? "dark" : "light"));

21 }, []);

23 // The value has to be memoized. Otherwise every Provider render builds a new

24 // object and every component calling useTheme() re-renders, theme unchanged.

25 const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

27 return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

28}

30export function useTheme(): ThemeContextValue {

31 const ctx = useContext(ThemeContext);

32 if (!ctx) throw new Error("useTheme has to be used inside <ThemeProvider>");

33 return ctx;

34}

TSXsrc/components/ThemeApp/index.tsx已跑通Verified

1import React from "react";

2import { ThemeProvider } from "../../context/ThemeContext";

3import ThemeToggleButton from "../ThemeToggleButton";

4import ThemedCard from "../ThemedCard";

6// App 整个套在 Provider 里 —— 只有 Provider 的子树才能 useTheme()

7const ThemeApp: React.FC = () => (

8 <ThemeProvider>

9 <ThemeToggleButton />

10 <ThemedCard>

11 <p>卡片内容</p>

12 </ThemedCard>

13 </ThemeProvider>

14);

16export default ThemeApp;

1import React from "react";

2import { ThemeProvider } from "../../context/ThemeContext";

3import ThemeToggleButton from "../ThemeToggleButton";

4import ThemedCard from "../ThemedCard";

6// The whole App sits inside the Provider: only its subtree can call useTheme()

7const ThemeApp: React.FC = () => (

8 <ThemeProvider>

9 <ThemeToggleButton />

10 <ThemedCard>

11 <p>Card content</p>

12 </ThemedCard>

13 </ThemeProvider>

14);

16export default ThemeApp;

§07

怎么验证How to check it

Context 怎么测？测的是「消费者看到了什么」，不是 context 本身。How do you test Context? You test what a consumer sees, not the context itself.

中文English

关键心态：不要去测 context 对象，测「套在 Provider 里的组件表现对不对」。所以每个测试都自己组装一小棵树。

三个值得学的写法：

探针组件—— 在测试文件里现写一个只调 useTheme()然后把结果 push 进数组的组件。想断言「引用有没有变」只能这么干。
断言抛错要静音 console—— React 渲染中抛错会额外打一堆 console.error，vi.spyOn(console, "error")临时挡掉，测完 mockRestore()。
多消费者一起断言——getAllByTestId 拿一组，比较整个数组。这条测的正是 Context 的核心价值：一处改、处处变。

The mindset that matters: do not test the context object, test whether the components wrapped in the Provider behave correctly. So every test assembles its own little tree.

Three techniques worth stealing:

A probe component — write one right there in the test file that only calls useTheme() and pushes the result into an array. If you want to assert “did the reference change”, this is the only way.
Silence the console when asserting a throw — React logs a pile of console.error when a render throws; vi.spyOn(console, "error") blocks it temporarily, and mockRestore() puts it back when the test is done.
Assert on several consumers at once — getAllByTestId grabs the group and you compare the whole array. That test covers the actual point of Context: change it in one place, it changes everywhere.

Terminal验证命令已跑通Verified

1npx vitest run src/Theme.test.tsx # 8 passed

TSXsrc/Theme.test.tsx（DrillLab 自出，本机跑过）src/Theme.test.tsx (written for DrillLab, run here)已跑通Verified

1import { render, screen } from "@testing-library/react";

2import userEvent from "@testing-library/user-event";

3import { expect, test, vi } from "vitest";

4import ThemeApp from "./components/ThemeApp";

5import ThemedCard from "./components/ThemedCard";

6import ThemeToggleButton from "./components/ThemeToggleButton";

7import { ThemeProvider, useTheme } from "./context/ThemeContext";

9test("默认是 light，按钮说 Switch to Dark", () => {

10 render(<ThemeApp />);

11 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

12 expect(screen.getByTestId("theme-toggle")).toHaveTextContent("Switch to Dark");

13 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#fff" });

14});

16test("点一下变 dark：按钮文字和卡片底色一起变", async () => {

17 render(<ThemeApp />);

18 await userEvent.click(screen.getByTestId("theme-toggle"));

20 expect(screen.getByTestId("theme-name")).toHaveTextContent("dark");

21 expect(screen.getByTestId("theme-toggle")).toHaveTextContent("Switch to Light");

22 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#222" });

23});

25test("再点一下切回 light", async () => {

26 render(<ThemeApp />);

27 await userEvent.click(screen.getByTestId("theme-toggle"));

28 await userEvent.click(screen.getByTestId("theme-toggle"));

30 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

31 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#fff" });

32});

34test("同一个 Provider 下的多个消费者一起变（这才是 Context 的意义）", async () => {

35 render(

36 <ThemeProvider>

37 <ThemeToggleButton />

38 <div data-testid="a"><ThemedCard /></div>

39 <div data-testid="b"><ThemedCard /></div>

40 </ThemeProvider>,

41 );

43 const names = () => screen.getAllByTestId("theme-name").map((n) => n.textContent);

44 expect(names()).toEqual(["light", "light"]);

46 await userEvent.click(screen.getByTestId("theme-toggle"));

47 expect(names()).toEqual(["dark", "dark"]);

48});

50test("没套 Provider 就用 useTheme()，必须立刻报错", () => {

51 // 期望的报错会被 React 打到 console.error，这里静音免得刷屏

52 const spy = vi.spyOn(console, "error").mockImplementation(() => {});

53 expect(() => render(<ThemedCard />)).toThrow("useTheme 必须在 <ThemeProvider> 里面用");

54 spy.mockRestore();

55});

57test("toggleTheme 是稳定引用：theme 变了它也不变", async () => {

58 const seen: (() => void)[] = [];

59 const Probe = () => {

60 const { toggleTheme } = useTheme();

61 seen.push(toggleTheme);

62 return <button onClick={toggleTheme} data-testid="probe">go</button>;

63 };

65 render(<ThemeProvider><Probe /></ThemeProvider>);

66 await userEvent.click(screen.getByTestId("probe"));

68 expect(seen.length).toBeGreaterThan(1); // 确实重渲染过

69 expect(new Set(seen).size).toBe(1); // 但 toggleTheme 始终是同一个函数

70});

72test("theme 没变时 context value 不换新对象（useMemo 生效）", () => {

73 const values: unknown[] = [];

74 const Probe = () => {

75 values.push(useTheme());

76 return null;

77 };

79 const { rerender } = render(<ThemeProvider><Probe /></ThemeProvider>);

80 rerender(<ThemeProvider><Probe /></ThemeProvider>); // 父层重渲染，但 theme 没动

82 expect(values.length).toBeGreaterThan(1);

83 expect(new Set(values).size).toBe(1);

84});

86test("一次事件里连调两次 toggleTheme，应该原样回来（函数式更新的证据）", async () => {

87 const Twice = () => {

88 const { toggleTheme } = useTheme();

89 return (

90 <button

91 data-testid="twice"

92 onClick={() => {

93 toggleTheme();

94 toggleTheme();

95 }}

96 >

97 go

98 </button>

99 );

100 };

101

102 render(

103 <ThemeProvider>

104 <Twice />

105 <ThemedCard />

106 </ThemeProvider>,

107 );

108

109 await userEvent.click(screen.getByTestId("twice"));

110 // 两次翻转 = 回到原点。若写成 setTheme(theme === "light" ? ... )，

111 // 两次都读到同一个旧 theme，结果会停在 dark

112 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

113});

1import { render, screen } from "@testing-library/react";

2import userEvent from "@testing-library/user-event";

3import { expect, test, vi } from "vitest";

4import ThemeApp from "./components/ThemeApp";

5import ThemedCard from "./components/ThemedCard";

6import ThemeToggleButton from "./components/ThemeToggleButton";

7import { ThemeProvider, useTheme } from "./context/ThemeContext";

9test("默认是 light，按钮说 Switch to Dark", () => {

10 render(<ThemeApp />);

11 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

12 expect(screen.getByTestId("theme-toggle")).toHaveTextContent("Switch to Dark");

13 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#fff" });

14});

16test("点一下变 dark：按钮文字和卡片底色一起变", async () => {

17 render(<ThemeApp />);

18 await userEvent.click(screen.getByTestId("theme-toggle"));

20 expect(screen.getByTestId("theme-name")).toHaveTextContent("dark");

21 expect(screen.getByTestId("theme-toggle")).toHaveTextContent("Switch to Light");

22 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#222" });

23});

25test("再点一下切回 light", async () => {

26 render(<ThemeApp />);

27 await userEvent.click(screen.getByTestId("theme-toggle"));

28 await userEvent.click(screen.getByTestId("theme-toggle"));

30 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

31 expect(screen.getByTestId("themed-card")).toHaveStyle({ backgroundColor: "#fff" });

32});

34test("同一个 Provider 下的多个消费者一起变（这才是 Context 的意义）", async () => {

35 render(

36 <ThemeProvider>

37 <ThemeToggleButton />

38 <div data-testid="a"><ThemedCard /></div>

39 <div data-testid="b"><ThemedCard /></div>

40 </ThemeProvider>,

41 );

43 const names = () => screen.getAllByTestId("theme-name").map((n) => n.textContent);

44 expect(names()).toEqual(["light", "light"]);

46 await userEvent.click(screen.getByTestId("theme-toggle"));

47 expect(names()).toEqual(["dark", "dark"]);

48});

50test("没套 Provider 就用 useTheme()，必须立刻报错", () => {

51 // React prints the expected error to console.error, so silence it here

52 const spy = vi.spyOn(console, "error").mockImplementation(() => {});

53 expect(() => render(<ThemedCard />)).toThrow("useTheme has to be used inside <ThemeProvider>");

54 spy.mockRestore();

55});

57test("toggleTheme 是稳定引用：theme 变了它也不变", async () => {

58 const seen: (() => void)[] = [];

59 const Probe = () => {

60 const { toggleTheme } = useTheme();

61 seen.push(toggleTheme);

62 return <button onClick={toggleTheme} data-testid="probe">go</button>;

63 };

65 render(<ThemeProvider><Probe /></ThemeProvider>);

66 await userEvent.click(screen.getByTestId("probe"));

68 expect(seen.length).toBeGreaterThan(1); // it really did re-render

69 expect(new Set(seen).size).toBe(1); // but toggleTheme stayed one function

70});

72test("theme 没变时 context value 不换新对象（useMemo 生效）", () => {

73 const values: unknown[] = [];

74 const Probe = () => {

75 values.push(useTheme());

76 return null;

77 };

79 const { rerender } = render(<ThemeProvider><Probe /></ThemeProvider>);

80 rerender(<ThemeProvider><Probe /></ThemeProvider>); // parent re-renders, theme unchanged

82 expect(values.length).toBeGreaterThan(1);

83 expect(new Set(values).size).toBe(1);

84});

86test("一次事件里连调两次 toggleTheme，应该原样回来（函数式更新的证据）", async () => {

87 const Twice = () => {

88 const { toggleTheme } = useTheme();

89 return (

90 <button

91 data-testid="twice"

92 onClick={() => {

93 toggleTheme();

94 toggleTheme();

95 }}

96 >

97 go

98 </button>

99 );

100 };

101

102 render(

103 <ThemeProvider>

104 <Twice />

105 <ThemedCard />

106 </ThemeProvider>,

107 );

108

109 await userEvent.click(screen.getByTestId("twice"));

110 // Two flips = back to the start. Written as setTheme(theme === "light" ? ... ),

111 // both calls read the same old theme and it stops on dark

112 expect(screen.getByTestId("theme-name")).toHaveTextContent("light");

113});

§04

参考答案Reference solution

提示是一级一级放的。四级看完还写不出来，再开答案门。The hints come one level at a time. If all four leave you stuck, open the answer.

提示Hints共 4 级，已看 0 级4 levels, 0 opened

先自己想两分钟。想不出来再点右上角 —— 提示是一级一级放的，不会一次给完。Think for two minutes first. Then use the button above — hints come one level at a time, never all at once.

这份答案在本机真跑过测试。但先确认你自己动手写过一遍 —— 读懂答案和写出答案是两种能力，考场上考的是后一种。This answer really was run here and its tests passed. But write it yourself first — reading an answer and producing one are two different skills, and the exam tests the second.