React钩子函数useMemo和useCallback的详解与示例代码

React是一个流行的JavaScript库，用于构建用户界面。它提供了许多钩子函数，以帮助开发者更方便地管理组件的状态和性能。本文将重点介绍React中的两个重要钩子函数：useMemo和useCallback。

1. useMemo钩子函数

useMemo钩子函数用于优化组件的性能。它接收两个参数：一个回调函数和一个依赖数组。在组件重新渲染时，useMemo会执行回调函数，并返回其结果。然而，当依赖数组的值没有发生变化时，useMemo会直接返回上一次的结果，而不会重新执行回调函数。

useMemo的作用是避免在每次渲染时都计算昂贵的计算或者重新创建相同的对象。它适用于那些具有高计算成本的操作，例如数据转换、复杂的计算或者调用耗时的函数。

下面是一个使用useMemo的示例代码：

import React, {
   
    useMemo } from 'react';

const