React.memo和useMemo是如何发挥优化作用的？

2024-02-19 13:02:21

React.memo和useMemo都是React中用于性能优化的工具。React.memo用于优化组件的渲染，而useMemo用于优化函数的执行。

React.memo

React.memo是一个高阶组件，用于优化组件的渲染。它接受一个组件作为参数，并返回一个新的组件。这个新的组件会在其父组件重新渲染时进行检查，如果其props没有发生变化，则不会重新渲染。这可以极大地提高组件的性能，尤其是在组件树很深的情况下。

import React, { memo } from 'react';

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

在上面的示例中，MyComponent是一个使用React.memo优化的组件。当其父组件重新渲染时，MyComponent只会重新渲染一次，前提是其props没有发生变化。这可以极大地提高组件的性能，尤其是在组件树很深的情况下。

useMemo

useMemo是一个React hook，用于优化函数的执行。它接受一个函数和一个依赖项数组作为参数，并返回函数的执行结果。如果依赖项数组没有发生变化，则函数不会重新执行。这可以极大地提高函数的性能，尤其是在函数的执行成本很高的情况下。

import React, { useMemo } from 'react';

const MyComponent = () => {
  const expensiveCalculation = useMemo(() => {
    console.log('Expensive calculation performed');
    return 42;
  }, []);

  return <div>The answer is {expensiveCalculation}.</div>;
};