React中使用useMemo对计算结果进行缓存

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

// 使用 memo 包裹 Header 组件以优化渲染性能
// memo 会阻止组件在 props 不变时不必要的重新渲染
const Header = memo(function Header() {
  return (
    // Math.random() 用于演示组件是否被重新渲染
    
hello header, {Math.random()}
  );
});

// 主组件 App
function App() {
  // 定义两个状态：count（数字）和 msg（字符串）
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('hello react');

  // 使用 useMemo 缓存 list，避免每次组件渲染时重复创建新数组
  // 第二个参数 [] 表示依赖项为空，只在组件挂载时计算一次
  // 如果依赖项不为空，则当依赖值变化时才会重新计算
  const list = useMemo(() => [msg.toUpperCase(), msg.toLowerCase()], []);

  // 点击按钮时更新 count 的函数
  const handleClick = () => {
    setCount(count + 1);
  };

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

      {/* 按钮组件，点击触发 handleClick 函数 */}
      点击

      {/* 渲染 Header 组件，并传入缓存后的 list 数据作为 prop */}
      

    
  );
}

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

关键点说明：

• useMemo 被用来缓存 list 数组，避免每次 App 组件渲染时都重新创建。
• memo(Header) 防止 Header 在父组件更新但 list 没有变化时进行不必要的渲染。
• 若将 useMemo 的依赖数组设为 [msg]，则当 msg 变化时才会重新计算 list。