memo和useMemo的区别

memo 和 useMemo 是 React 中用于优化性能的两个不同 API，它们有不同的应用场景和用途。下面是它们的区别：

1. memo

• 作用：memo 是一个高阶组件（HOC），用于优化函数组件的渲染，避免不必要的重新渲染。
• 用法：当一个组件的 props 没有发生变化时，memo 会阻止该组件重新渲染。
• 适用场景：适用于函数组件，尤其是那些在父组件重新渲染时不需要更新的子组件。

import React, { memo } from 'react';

const MyComponent = ({ name }) => {
  console.log('Component re-rendered');
  return <div>{name}</div>;
};

export default memo(MyComponent); // 使用 memo

工作原理：memo 会对传递给组件的 props 进行浅层对比，如果 props 没有变化，就跳过该组件的重新渲染。

总结：

• memo 是用于避免组件的重复渲染。
• 用于包装整个组件，依赖 props 变化。

2. useMemo

• 作用：useMemo 是一个 React hook，用于缓存函数的返回值，以避免每次渲染都重复计算开销较大的值。
• 用法：当计算结果依赖于某些值（通常是 props 或 state），但这些值在某些渲染中保持不变时，useMemo 可以缓存该计算结果。
• 适用场景：适用于在渲染过程中需要执行昂贵计算的场景，如过滤、排序、复杂运算等。

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const sortedData = useMemo(() => {
    console.log('Sorting data');
    return data.sort(); // 模拟一个耗时的排序操作
  }, [data]);

  return <div>{sortedData.join(', ')}</div>;
};

工作原理：useMemo 只有在其依赖项数组（[data]）中的值发生变化时，才会重新计算缓存的值，否则会返回之前缓存的结果。

总结：

• useMemo 是用于缓存某个计算结果，避免每次渲染都重复执行这个计算。
• 它缓存的是一个值，而不是整个组件。

总体区别：

• memo 用于组件的优化，通过对比 props 来决定是否重新渲染组件。
• useMemo 用于缓存函数的计算结果，避免不必要的重复计算。

简单理解：

• memo 是用于控制组件的重新渲染。
• useMemo 是用于缓存复杂计算的结果。