React里面useMemo和useCallBack的区别

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

相关推荐
半点寒12W3 分钟前
uniapp全局状态管理实现方案
前端
Vertira4 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL38 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端
LinHan1 小时前
我的浏览器插件 Horizon-Hop 又又又更新啦!
前端