React中memo的用法

// 引入 React 的 useState 和 memo API
import { useState, memo } from 'react';

// 使用 memo 包裹 Header 组件以优化性能
// memo 让组件只在 props 变化时重新渲染，避免不必要的渲染
const Header = memo(function Header() {
  return (
    // 每次组件渲染时，Math.random() 都会生成一个新的随机数
    // 这里用来演示 memo 的效果：当 App 状态更新但 Header 的 props 没有变化时，Header 不会重新渲染
    <div>hello header, {Math.random()}</div>
  );
});

// 主组件 App
function App() {
  // 使用 useState Hook 创建一个状态 count 和对应的更新函数 setCount
  const [count, setCount] = useState(0);

  // 定义点击按钮时的回调函数
  // 它会调用 setCount 来增加 count 的值
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <>
      {/* 页面主体内容 */}
      hello App

      {/* 按钮组件，点击触发 handleClick 函数 */}
      <button onClick={handleClick}>点击</button>

      {/* 引入并渲染 Header 组件 */}
      <Header />
    </>
  );
}

// 导出 App 组件，以便其他模块可以使用它
export default App;