🧩 React.memo 小练习题 + 参考答案
练习 1：基本使用
题目 ：
创建一个父组件，里面有两个状态：count 和 message。
父组件渲染一个子组件 Message，它只接收 message 作为 props，并在渲染时打印 "Message render"。
点击按钮改变 count，观察子组件是否重新渲染。
用 React.memo 优化 Message，观察差异。
答案代码：
jsx
import React, { useState } from "react";
const Message = React.memo(({ message }) => {
console.log("Message render");
return <h2>{message}</h2>;
});
export default function App() {
const [count, setCount] = useState(0);
const [message, setMessage] = useState("Hello");
return (
<div>
<h1>Count: {count}</h1>
<Message message={message} />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<button onClick={() => setMessage(message + "!")}>Change Message</button>
</div>
);
}练习 2：浅比较的局限性
题目 ：
父组件中维护一个 user = { name: "Tom" }，把它作为 props 传给 UserCard。
点击按钮时执行 setUser({ name: "Tom" })。
观察即使数据没变，子组件还是会重新渲染。
尝试用 useMemo 固定对象引用，避免重新渲染。
答案代码：
jsx
import React, { useState, useMemo } from "react";
const UserCard = React.memo(({ user }) => {
console.log("UserCard render");
return <h2>User: {user.name}</h2>;
});
export default function App() {
const [count, setCount] = useState(0);
// ❌ 没优化
// const user = { name: "Tom" };
// ✅ 优化
const user = useMemo(() => ({ name: "Tom" }), []);
return (
<div>
<h1>Count: {count}</h1>
<UserCard user={user} />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
}练习 3：结合 useCallback
题目 ：
父组件定义一个回调函数 handleClick，传给子组件 ButtonChild。
不使用 useCallback 时，子组件每次都会重新渲染。
用 useCallback 包装后，子组件不再重复渲染。
答案代码：
jsx
import React, { useState, useCallback } from "react";
const ButtonChild = React.memo(({ onClick }) => {
console.log("ButtonChild render");
return <button onClick={onClick}>Child Button</button>;
});
export default function App() {
const [count, setCount] = useState(0);
// ❌ 每次 App 渲染都会生成新函数
// const handleClick = () => console.log("clicked");
// ✅ useCallback 固定引用
const handleClick = useCallback(() => console.log("clicked"), []);
return (
<div>
<h1>Count: {count}</h1>
<ButtonChild onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
}练习 4：列表优化
题目 ：
创建一个父组件，渲染 100 个用户，每个用户是一个子组件 UserRow。
点击"刷新时间"按钮，观察整个列表是否重新渲染。
给 UserRow 添加 React.memo，避免不必要的渲染。
答案代码：
jsx
import React, { useState } from "react";
const UserRow = React.memo(({ name }) => {
console.log("Render UserRow:", name);
return <li>{name}</li>;
});
export default function App() {
const [time, setTime] = useState(Date.now());
const users = Array.from({ length: 100 }, (_, i) => `User ${i + 1}`);
return (
<div>
<h1>Time: {time}</h1>
<button onClick={() => setTime(Date.now())}>Refresh Time</button>
<ul>
{users.map((u) => (
<UserRow key={u} name={u} />
))}
</ul>
</div>
);
}练习 5：自定义比较函数
题目 ：
创建一个子组件 Profile，接收 name 和 age。
要求：只有 age 改变时才重新渲染。
使用 React.memo 的第二个参数实现。
答案代码：
jsx
import React, { useState } from "react";
const Profile = React.memo(
({ name, age }) => {
console.log("Profile render");
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
},
(prevProps, nextProps) => {
return prevProps.age === nextProps.age; // 只在 age 改变时重新渲染
}
);
export default function App() {
const [name, setName] = useState("Tom");
const [age, setAge] = useState(20);
return (
<div>
<Profile name={name} age={age} />
<button onClick={() => setName(name + "!")}>Change Name</button>
<button onClick={() => setAge(age + 1)}>Increment Age</button>
</div>
);
}练习 6：性能对比（进阶）
题目 ：
渲染一个 5000 行的大列表，每一行是 ItemRow。
点击按钮时更新一个无关的状态，看看没有 React.memo 时所有子组件是否重新渲染。
加上 React.memo 后，对比性能变化。
答案代码：
jsx
import React, { useState } from "react";
const ItemRow = React.memo(({ value }) => {
console.log("Render:", value);
return <div>{value}</div>;
});
export default function App() {
const [tick, setTick] = useState(0);
const items = Array.from({ length: 5000 }, (_, i) => `Item ${i}`);
return (
<div>
<h1>Tick: {tick}</h1>
<button onClick={() => setTick(tick + 1)}>Update Tick</button>
{items.map((item) => (
<ItemRow key={item} value={item} />
))}
</div>
);
}