安徽网站排名优化公司中国中国建设银行网站首页

useMemo 和 useCallback 接收的参数都是一样，第一个参数为回调，第二个参数为要依赖的数据。

相同部分：都是依赖数据发生变化，才会去更新缓存数据

不同部分：

useMemo缓存的是二次计算的数据，主要用于缓存计算结果的值，跟vue里面的computed大致相同的作用，这样避免组件重新渲染的时候，再重新执行整个函数，导致之前的二次计算也会重新执行一次

示例：

import { useMemo, useState } from 'react'export default function () {const [num, setNum] = useState(0)const [val, setVal] = useState("");const countNum = useMemo(function getCount() {console.log("getCount函数调用了")return num+ 100;},[num])return(<div><h1>总数:{ countNum }</h1><button onClick={() => setNum(num+ 1)}>+1</button><input value={val} type="text" onChange={e=>setVal(e.target.value)} /></div>)
}

useCallBack计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 useState 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

示例看我之前的这篇文章：react组件渲染性能优化之函数组件-useCallback使用-CSDN博客