React.memo 小练习题 + 参考答案

🧩 React.memo 小练习题 + 参考答案

练习 1：基本使用

题目：
创建一个父组件，里面有两个状态：count 和 message。
父组件渲染一个子组件 Message，它只接收 message 作为 props，并在渲染时打印 "Message render"。
点击按钮改变 count，观察子组件是否重新渲染。
用 React.memo 优化 Message，观察差异。

答案代码：

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 onClic