useCallback与useMemo使用场景
2024-10-21 16:36:02
疑问:为什么需要useCallback和useMemo
答: 父组件变化,会引起子组件的 re-render,为了阻止子组件不必要的 re-render,需要满足两个条件:
1、子组件用 react.memo包裹
2、子组件的属性没有发生变化。useCallback和useMemo就是为了实现函数或者对象数据重复声名导致新旧函数或者对象判定为不同属性的情况。
Code Pen示例:
子组件的props是函数和obj数据的时候: codepen案例
子组件被react.memo包裹的时候:codepen案例
子组件被react.memo包裹的时候并且函数props和对象props使用useCallback和useMemo: codepen案例
大家查看案例的时候一定要看输出的日志,观察到底何时child component会re-render
疑问:父组件变化是指什么情况
答:父组件的props变化或者state变化。
疑问:父组件变化一定会引起子组件的re-render吗
答:从子组件不做特殊处理,父组件变化一定会影响子组件的re-render,注意这里的re-render不一定会引起浏览器的重新渲染。这里有一个示意案例: https://codepen.io/dog/pen/mdKzXrY?editors=1111
疑问:子组件re-render是什么意思,会引起页面重新渲染吗
答:re-render是指子组件会进行新旧dom比较。如果是函数是组件可以在 return之前打印日志,这时候日志会输出的,也就是函数组件会执行一次,但是页面不一定会重新渲染
疑问:只要是函数或者对象数据做为props的时候就需要用useCallback和useMemo吗
答:并非。因为useCallback和useMemo创建和保存也是有成本的。并且普通的函数与对象创建几乎不会有太多的性能影响。
这是官网的介绍:https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render
疑问:什么场景适合使用 useCallback和useMemo
1、子组件中有hooks把props传过来的函数或者object当做依赖的时候
使用场景案例:注意点击按钮的时候比较一下与上一个案例输出日志的区别。这个案例不会重复输出日志。
2、子组件re-render十分昂贵的时候
最新文章
- 深入浅出node(2) 模块机制
- 基于NPOI导出和导入Excel
- UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)!
- Android笔记——我的Android课的开始
- 用命令行导出和导入MySQL数据库
- LRU算法实现
- main函数的正确格式
- html5 geolocation API
- C#利用Emit反射实现AOP,以及平台化框架封装思路
- Spark Graphx编程指南
- Mysql 中文乱码问题完美解决方案
- SpringCloud的注解:汇总篇
- Pompholyx - Causes, Symptoms and Treatment
- win10常用快捷键
- 一次Linux自动化部署尝试
- Confluence 6 查看索引和提示
- Brainfuck解析器(Python)
- Spring Batch JSON 支持
- MySQL API函数
- mysql zerofill 的使用
热门文章
- 524. 通过删除字母匹配到字典里最长单词 (Medium)
- C++ MFC学习 (二)
- CodeGym自学笔记03——变量、数据类型
- 使用Mockito 对方法中的私有void方法
- iOS开发之长按浮动操作选择项
- git连接不上,使用git镜像
- 容器之 docker的监控平台(prometheus + Grafana)
- 【转载】C++标准库容器与C#容器对比
- C 数值类型与字节数组相互转化
- 安装kvm后,在windows主机启动virt-manger后报错(no polkit agent available to authenticate action org.libvirt.unix.manage)