React:memo有什么用途，useMemo和memo区别是什么?

memo和useMemo都是React中用于性能优化的工具，但它们的用途和使用方式有所不同。

memo是一个高阶组件（Higher-Order Component），用于优化函数组件的渲染性能。它可以包裹一个函数组件，并返回一个新的组件，该新组件会在接收到的props没有变化时，使用之前缓存的渲染结果，避免不必要的重新渲染。

以下是使用memo的示例：

import React, { memo } from 'react';

function MyComponent(props) {
  // 组件的渲染逻辑
  return <div>{props.data}</div>;
}

export default memo(MyComponent);

在上面的示例中，memo函数将MyComponent组件包裹起来，并返回一个新的组件。当MyComponent组件接收到的props没有变化时，新组件会使用之前缓存的渲染结果，避免不必要的重新渲染。

useMemo是一个钩子函数，用于在函数组件中进行记忆化计算。它接收一个计算函数和一个依赖数组作为参数，并返回计算结果。只有当依赖数组中的值发生变化时，useMemo才会重新计算并返回新的结果。

以下是使用useMemo的示例：

import React, { useMemo } from 'react';

function MyComponent(props) {
  const result = useMemo(() => {
    // 计算逻辑
    return props.data * 2;
  }, [props.data]);

  return <div>{result}</div>;
}

在上面的示例中，useMemo函数接收一个计算函数和一个依赖数组[props.data]。只有当props.data发生变化时，计算函数才会重新执行，并返回新的结果。否则，useMemo会返回之前缓存的结果。

区别总结：

• memo是一个高阶组件，用于优化函数组件的渲染性能。
• useMemo是一个钩子函数，用于在函数组件中进行记忆化计算。
• memo用于优化整个组件的渲染，而useMemo用于优化特定的计算。
• memo接收一个组件作为参数，返回一个新的组件，而useMemo返回计算结果。
• memo通过比较props的变化来决定是否重新渲染组件，而useMemo通过依赖数组来决定是否重新计算结果。