React.memo()和 useMemo()的用法是什么，有哪些区别

React.memo() 和 React.useMemo() 是 React 中用于优化性能的两个工具，但它们的用途和实现方式有所不同。以下分别介绍它们的用法和区别。

1. React.memo()

用法

React.memo() 是一个高阶组件（HOC），由于react组件默认的渲染机制：只要父组件渲染子组件就会重新渲染
于是用于优化函数组件的渲染性能。它通过缓存组件的渲染结果，避免不必要的重新渲染。

作用

允许组件在Prop 没有改变的情况下跳过渲染

• 基本语法：

  const MemoizedComponent = React.memo(FunctionComponent);
  

• 带比较函数的用法：

  const MemoizedComponent = React.memo(FunctionComponent, arePropsEqual);
  

  其中，arePropsEqual 是一个比较函数，在使用memo缓存组件之后，react 会对每一个prop 使用Object.is 比较新值和老值 用于比较新旧 props 是否相等。如果返回 true，则组件不会重新渲染。

示例

import React from 'react';

const MyComponent = ({ name }) => {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}</div>;
};

const MemoizedComponent = React.memo(MyComponent);

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

  return (
    <div>
      <MemoizedComponent name="Alice" />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;

在这个例子中，MemoizedComponent 只会在 name 属性发生变化时重新渲染，而不会因为 count 的变化而重新渲染。

注意事项

• React.memo() 只对组件的 props 进行浅比较。如果需要更复杂的比较逻辑，可以通过 arePropsEqual 函数来实现。
• 它只适用于函数组件，不适用于类组件。
• 它不会影响子组件的渲染行为，子组件仍然会根据自己的 props 或 state 变化而重新渲染。

2. React.useMemo()

用法

React.useMemo() 是一个 Hook，用于缓存计算结果，避免在组件重新渲染时重复计算。它通常用于优化性能，尤其是在计算复杂或耗时的场景中。

• 基本语法：

  const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

  其中，computeExpensiveValue 是一个计算函数，[a, b] 是依赖数组，当依赖数组中的值发生变化时，才会重新计算。

示例

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

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

  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>{`Name: ${name}`}</p>
      <p>{`Count: ${count}`}</p>
      <p>{`Memoized Value: ${memoizedValue}`}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName('Alice')}>Change Name</button>
    </div>
  );
};

export default App;

在这个例子中，expensiveCalculation 只会在 count 发生变化时重新计算，而不会因为 name 的变化而重新计算。

注意事项

• useMemo 的依赖数组非常重要。如果依赖数组为空（[]），则计算结果只会计算一次，类似于 useEffect 的空依赖数组。
• 如果依赖数组中的值发生变化，useMemo 会重新计算并返回新的值。
• useMemo 并不会阻止组件的重新渲染，它只是缓存计算结果，减少不必要的计算。

区别

总结

• 使用 React.memo() 来优化组件的渲染性能，尤其是当组件的 props 没有变化时，避免不必要的重新渲染。
• 使用 React.useMemo() 来优化组件内的计算逻辑，避免重复计算，尤其是在计算复杂或耗时的场景中。

根据具体的性能优化需求，选择合适的工具来提升应用的性能。