ReactuseMemo和useCallback做到性能优化
useMemo
useMemo用来缓存值,保存每次渲染时,不会发生变化的值,减少计算。在一些开销较大且值不会变的场景下特别有用。
useCallback
useCallback用来缓存函数。通常用于父子组件中,父组件传给子组件一个函数,父组件更新时,传递给子组件的函数也会被 重新创建。有时候传递给子组件的函数没必要重新创建,useCallback就可以缓存这个函数,不使这个函数重新被创建。
这两个hooks的作用就是进行数据缓存,避免页面重新渲染时不必要的参数重复更新。
它们的适用场景就是对于只需要单次进行复杂计算的内容进行数据存储,从而减少页面性能开销。
useMemo和useCallback两个hooks的出现,针对的痛点就是useEffect的执行时期是在页面渲染之后执行的,因此即使是不需要进行重复更新的参数,也会在页面重新渲染时再次更新,这是非常不友好的。当然,我们可以通过useEffect的第二个参数来阻止第一个参数的执行,但是它的执行时期仍然是页面渲染之后。
但useMemo和useCallback这两个hooks也有自己的缺点,那就是它们为了进行数据存储需要一直维护第二个参数,也就是依赖数组
useMemo返回的是一个变量的值,useCallback返回的是一个函数。对应到function组件最后要return的html代码部分,useMemo就是作为一个值来使用的,而useCallback则是被绑定到onClick上,作为要执行的函数。这就是它俩的本质区别。
hooks的useCallback
返回一个需要缓存的函数
传递需要更新的依赖项,一般回调函数内部使用的数据,都需要添加在依赖项中,避免父子之间,子级生成新的props函数,从而刷新子组件。
当父级组件传递给子级组件一个函数时,无状态组件每次都会重新生成新的props函数,导致子组件刷新,一般联合useMemo一起使用。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghaej
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13