React里面useMemo和useCallBack的区别

Alan-Xia2024-05-22 8:25

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

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

不同部分：

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

示例：

javascript 复制代码

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博客