React.memo 跟 useMemo 分別怎么使用？差別在哪里？

memo 和 useMemo 是 React 中用于优化性能的两个不同的工具，它们在使用方法和适用场景上有显著的差别。下面分别介绍它们的使用方法和区别。

React.memo

用途

React.memo 是一个高阶组件（Higher-Order Component），用于优化函数组件的性能。当组件的 props 没有变化时，React.memo 可以防止组件的重新渲染。

使用方法

import React from 'react';

const MyComponent = React.memo((props) => {
  return (
    <div>{props.name}</div>
  );
});

export default MyComponent;

解释

• React.memo 包装了一个函数组件，如果组件的 props 没有变化，React 将跳过这次渲染并直接复用上一次的渲染结果。
• 适用于需要防止不必要的重新渲染的纯函数组件。

useMemo

用途

useMemo 是一个 Hook，用于在函数组件中记住某个值的计算结果，只有在依赖项发生变化时才会重新计算该值。这对于性能优化非常有用，特别是对于需要进行昂贵计算的值。

使用方法

import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => {
    return a + b;
  }, [a, b]);

  return (
    <div>{memoizedValue}</div>
  );
}

export default MyComponent;

解释

• useMemo 接受两个参数：一个计算函数和一个依赖项数组。
• 只有当依赖项数组中的某个值发生变化时，计算函数才会重新执行，返回新的计算结果。否则，返回缓存的结果。
• 适用于计算开销较大的值或者需要避免不必要的计算的场景。

区别

1. 使用场景：

   • React.memo：用于防止组件在 props 没有变化时重新渲染。
   • useMemo：用于记住计算结果，避免在依赖项没有变化时进行不必要的计算。

2. 使用位置：

   • React.memo：用于组件级别的优化。
   • useMemo：用于组件内部的值计算优化。

3. 适用对象：

   • React.memo：包装整个函数组件。
   • useMemo：用于函数组件内部的任何计算。

示例对比

React.memo 示例

import React from 'react';

const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent rendered');
  return <div>{value}</div>;
});

function ParentComponent({ count }) {
  return <ChildComponent value={count} />;
}

export default ParentComponent;

在这个例子中，如果 ParentComponent 重新渲染，但传给 ChildComponent 的 value 没有变化，那么 ChildComponent 不会重新渲染。

useMemo 示例

import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value');
    return a + b;
  }, [a, b]);

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

export default MyComponent;

在这个例子中，如果 a 或 b 没有变化，那么 useMemo 会返回之前计算的值，避免重新执行加法操作。

总结

• 使用 React.memo 来优化组件级别的渲染，防止不必要的重新渲染。
• 使用 useMemo 来优化组件内部的值计算，避免不必要的重复计算。