hooks当中的usememo_hooks usememo-CSDN博客

本文详细介绍了React Hooks中的useMemo和useCallback，它们都是用于优化性能的工具。useMemo主要用于缓存计算结果，避免不必要的重新计算，而useCallback则缓存函数，减少不必要的函数创建，提高组件更新效率。通过示例代码，解释了这两个Hook的正确使用方式及其在状态管理中的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useMemo

useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态

import React, { useState, useMemo } from 'react';
 
function Info(props) {
  let [personalInfo , setPersonalInfo] = useState({
    name: 'kevin kang',
    gender: 'male'
  })
 
  function formatGender(gender) {
    console.log('---调用了翻译性别的方法---')
    return gender === 'male' ? '男' : '女'
  }
 
 
  // BAD 
  // 不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源
  // let gender =  formatGender(personalInfo.gender)
 
  // GOOD
  let gender = useMemo(()=>{
    return formatGender(personalInfo.gender)
  }, 
  [personalInfo.gender])
 
  return (
    <>
        <div>
          姓名： {personalInfo.name} -- 性别:  { gender } <br/>
          <button onClick={ 
            ()=> { 
              setPersonalInfo({
                ...personalInfo,
                name: 'Will Kang'
              }) 
            }  
          }> 点击修改名字</button>
        </div>
    </>
  )
}
 
export default Info

useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据。

共同作用
在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用

两者的区别
useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数式没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费
原文链接：https://blog.csdn.net/qq_35770417/article/details/110000491