一：概述

React 中的这两个函数都带有 memo，看着比较相似，但是作用和使用场景却不一致，那么有什么不一样呢

二：内容

（一）useMemo

1：定义：用来进行性能优化的钩子函数之一，

2：作用：用来缓存计算结果，只有在依赖项发生变化时才重新计算，可以有效减少不必要的计算开销。

3：使用场景：需要进行大量计算或者复杂逻辑组件

4：参数：

（1）callback：计算结果的执行函数

（2）deps：相关依赖项数组

（二）memo

1：定义：当组件中的state数据发生变化时，重新渲染该组件，

2：作用：会浅比较当前组件的props和上次的是否一样，进行决定是否重新渲染

3：使用场景：解决子组件重新渲染造成不必要开销

4：参数：

（1）：WrapComponent：你要优化的组件

（2）：(prev, next) => boolean：通过对比 prev（旧 props），next（新 props）是否一致，返回 true（不更新）、false（更新）

三：代码

（一）useMemo

import React, { useState, useMemo } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  // 通过 useMemo 缓存计算结果
  const doubledCount = useMemo(() => {
    return count * 2;
  }, [count]);


  return (
    <div>
      <h1>useMemo Example</h1>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubledCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
};

export default App;

（二）memo

import { useState,memo } from 'react';

// 一个纯函数组件
const MyComponent = memo(({ name, age }) => {
  console.log('MyComponent rendered');
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
});

const App = () => {
  const [person, setPerson] = useState({ name: 'John', age: 30 });
  const [count, setCount] = useState(0);

  const handleChangeAge = () => {
    setPerson({ ...person, age: person.age + 1 });
  };

  const handleChangeCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <MyComponent name={person.name} age={person.age} />
      <button onClick={handleChangeAge}>Change Age</button>
      <button onClick={handleChangeCount}>Change Count</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

四：总结

1：useMemo是钩子函数，memo 是高阶函数

2：useMemo 是对计算的结果进行缓存，当缓存结果不变时，会使用缓存结果

3：被 memo 包裹的组件只有在 props 改变后，才会重新渲染