React18中useMemo、useCallback和memo怎么使用

前言： 在React18中，useMemo、useCallback和memo是优化性能的三个重要的hook和高阶组件。它们可以帮助我们避免不必要的渲染，提升组件的效率。本文将详细介绍它们的使用方法和注意事项。 一、useMemo的使用 useMemo是一个在渲染过程中计算并返回值的hook。它接收两个参数，一个是计算函数，另一个是依赖项数组。只有依赖项数组中的值发生变化时，才会重新计算和返回新的值。

基本用法

下面是一个使用useMemo的基本示例：

import React, { useMemo } from 'react';

const MyComponent = ({ a, b }) => {
  const result = useMemo(() => {
    console.log('calculating...');
    return a + b;
  }, [a, b]);

  return 
{result}
;
};

在上述示例中，useMemo接收一个箭头函数，该函数的返回值是a和b的和。只有当a或b发生变化时，才会重新计算这个值。

性能优化

useMemo的作用是优化性能，避免不必要的计算和渲染，特别适用于在渲染过程中频繁执行的复杂计算操作。

举个例子，如果我们有一个列表组件，每次渲染时都需要根据列表长度计算一些高开销的数据，但是列表长度不频繁变化，我们可以使用useMemo来优化：

import React, { useMemo } from 'react';

const List = ({ data }) => {
  const expensiveCalculation = useMemo(() => {
    // 复杂的计算逻辑
    console.log('calculating...');
    return data.length * 2;
  }, [data]);

  return (
    

      
List length: {data.length}
      
Expensive calculation result: {expensiveCalculation}
    
  );
};

在这个例子中，只有当data的长度发生变化时，expensiveCalculation才会重新计算，而不是每次渲染都进行计算。这样可以节省计算资源，提升性能。

二、useCallback的使用 useCallback是一个返回记忆化函数的hook。它接收两个参数，一个是回调函数，另一个是依赖项数组。只有依赖项数组中的值发生变化时，才会返回新的函数。

基本用法

下面是一个使用useCallback的基本示例：

import React, { useCallback } from 'react';

const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    console.log('button clicked');
    onClick();
  }, [onClick]);

  return Click me;
};

在上述示例中，useCallback接收一个回调函数和一个依赖项数组。只有当依赖项数组中的值发生变化时，才会返回一个新的记忆化函数。

通过使用useCallback，我们可以确保每次渲染时，都使用相同的函数引用，避免不必要的函数重新创建。

使用场景

useCallback通常用于将函数作为props传递给子组件，确保子组件在依赖项变化时不会重新渲染：

import React, { useCallback } from 'react';

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('button clicked');
  }, []);

  return ;
}

const Child = React.memo(({ onClick }) => {
  console.log('child rendered');
  return Click me;
});

在上述示例中，由于handleClick使用了useCallback并且依赖项数组为空，所以每次渲染时都使用相同的函数引用，子组件不会因为依赖项变化而重新渲染。

三、memo的使用 memo是一个高阶组件，可以用来包装函数组件，将其转换为一个具有记忆功能的组件。它只在组件的props发生变化时进行重新渲染，否则使用之前的渲染结果。

基本用法

下面是一个使用memo的基本示例：

import React, { memo } from 'react';

const MyComponent = ({ value }) => {
  console.log('rendering...');
  return 
{value}
;
};

export default memo(MyComponent);

在上述示例中，MyComponent组件被memo包裹后，只有当value发生变化时，才会重新渲染。否则会使用之前的渲染结果。

memo的使用非常简单，只需要将组件传入memo函数中即可。但需要注意的是，memo只对props进行浅比较，如果props中包含了引用类型的值，需要自行进行深比较。

使用场景

memo通常用于优化无状态的函数组件，避免不必要的重新渲染。比如：

import React, { memo } from 'react';

const List = memo(({ data }) => {
  console.log('rendering List...');
  return (
    

      {data.map(item => (
        
{item}
      ))}
    
  );
});

在这个例子中，List组件是一个无状态的函数组件，由于使用了memo进行包装，只有当data发生变化时，才会重新渲染。

总结： 在React18中，useMemo、useCallback和memo是优化性能的重要工具。使用useMemo可以避免不必要的计算和渲染，提升组件的效率；使用useCallback可以确保每次渲染都使用相同的函数引用，避免不必要的函数重新创建；使用memo可以将函数组件转换为具有记忆功能的组件，减少不必要的重新渲染。在使用这些工具时，需要注意它们的使用场景和依赖项的处理，避免出现错误的性能优化。希望本文对你理解和使用useMemo、useCallback和memo有所帮助。