当前位置：首页 > article >正文

memo和useMemo的区别

article 2024/11/12 17:12:03

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]）中的值发生变化时，才会重新计算缓存的值，否则会返回之前缓存的结果。