当前位置: 首页 > news >正文

React里面useMemo和useCallBack的区别

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

相关文章:

  • Hsql每日一题 | day02
  • 【simple-admin】simple-admin-core 首次服务启动 如何配置mysql数据库表 | 如何docker启动core
  • Linux安装Mysql
  • 【MySQL精通之路】InnoDB(7)-锁和事务模型
  • Docker镜像源自动测试镜像速度,并选择速度最快的镜像
  • vb.net打开CAD指指定路径文件
  • 抽象工厂模式(AbstractFactoryPattern)
  • SQL刷题笔记day2
  • Convolutional Occupancy Networks【ECCV2020】
  • 《主对角线求和》
  • 2024云曦期中考(部分复现)
  • 【图论及其运用 — 电子科技大学】(四)第四章 欧拉图与哈密尔顿图(Euler 图与 Hamilton 图)
  • 电子招投标系统源码实现与立项流程:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台
  • 炫酷网页设计:HTML5 + CSS3打造8种心形特效
  • 如何通过IP地址来防范“杀猪盘”?
  • #Java异常处理
  • 【140天】尚学堂高淇Java300集视频精华笔记(86-87)
  • 【知识碎片】第三方登录弹窗效果
  • 2017 年终总结 —— 在路上
  • Angular2开发踩坑系列-生产环境编译
  • ES10 特性的完整指南
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • JavaScript类型识别
  • linux安装openssl、swoole等扩展的具体步骤
  • ReactNative开发常用的三方模块
  • SQLServer之索引简介
  • Travix是如何部署应用程序到Kubernetes上的
  • TypeScript实现数据结构(一)栈,队列,链表
  • Vue.js源码(2):初探List Rendering
  • 爱情 北京女病人
  • 观察者模式实现非直接耦合
  • 京东美团研发面经
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 收藏好这篇,别再只说“数据劫持”了
  • 树莓派 - 使用须知
  • 温故知新之javascript面向对象
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ​香农与信息论三大定律
  • #pragma once与条件编译
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (day6) 319. 灯泡开关
  • (HAL库版)freeRTOS移植STMF103
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (附源码)springboot建达集团公司平台 毕业设计 141538
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (五)大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • .aanva
  • .Net OpenCVSharp生成灰度图和二值图
  • .Net 垃圾回收机制原理(二)
  • .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)