浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别

2024-06-04 19:04

本文主要是介绍浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、memo()与PureComponent类组件的区别
  • 二、memo()与useMemo()的区别
  • 三、useMemo() 和 useEffect() 的区别
  • 四、useMemo() 和 useCallback() 的区别


前言

在现在的react开发中,我们经常会使用的一些比较型的hook,都是为了提升性能,起到优化的目的。但是不能为了用而用,这东西不是用的越多越好,要视情况而定。下面讲几个常用的,并对比之间的区别。

一、memo()与PureComponent类组件的区别

(1)memo()是后面hook时代推出的,等同于class component时代的PureComponent类组件,但有差别。memo()不传参数时,和PureComponent类组件效果一样,都是浅比较
(2)当传入参数时,memo()可进行深度比较,可利用第二个参数传参。在class 时代时,也可利用shouldComponentUpdate()进行深度比较。现在提倡用memo(),使用起来更方便

二、memo()与useMemo()的区别

(1)React.memo()针对的是整个组件间的状态比较
(2)假如我们只想组件的某个部分HTML代码不进行re-render,这时候就要使用useMemo()进行针对性比较,它接收一个依赖数组,只有当数组检测到变化时,才会进行re-render

三、useMemo() 和 useEffect() 的区别

(1)useMemo()是在渲染期间执行的,不能执行一些额外副操作,否则会造成死循环,反复操作dom元素,导致浏览器卡死。比如网络请求,setState等
(2)如果要执行一些"副作用"操作,就得使用useEffect()。这个函数主要是在DOM更改后执行副作用操作,即在渲染结束后执行

四、useMemo() 和 useCallback() 的区别

(1)useCallback和useMemo都是为了做数据缓存,useCallback返回一个函数,作为要执行的函数,useMemo返回一个值,用于使用
(2)useCallback() 主要作用于缓存一个回调函数,多用于父组件传递子组件的函数。仅当依赖值发生变更时,才会创建新的回调函数,避免了不必要渲染

这篇关于浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1030855

相关文章

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

浅谈配置MMCV环境,解决报错,版本不匹配问题

《浅谈配置MMCV环境,解决报错,版本不匹配问题》:本文主要介绍浅谈配置MMCV环境,解决报错,版本不匹配问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录配置MMCV环境,解决报错,版本不匹配错误示例正确示例总结配置MMCV环境,解决报错,版本不匹配在col

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

浅谈mysql的sql_mode可能会限制你的查询

《浅谈mysql的sql_mode可能会限制你的查询》本文主要介绍了浅谈mysql的sql_mode可能会限制你的查询,这个问题主要说明的是,我们写的sql查询语句违背了聚合函数groupby的规则... 目录场景:问题描述原因分析:解决方案:第一种:修改后,只有当前生效,若是mysql服务重启,就会失效;

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab