useEffect、useMemo、useCallback使用场景分析

useEffect：会在组件渲染完毕后执行，和渲染无关的副作用。
useMemo：会在在组件首次加载和重渲染期间执行，执行的函数需要和渲染相关的。
useCallback：会在渲染期间执行，返回一个函数。

一、区别

useCallback 和 useMemo 的参数跟 useEffect 一致，他们之间最大的区别有是 useEffect 会用于处理副作用，而前两个hooks不能。
useCallback 和 useMemo 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行。
并且这两个hooks都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。
如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。
React.useMemo将调用fn函数并返回其结果，而React.useCallback将返回fn函数而不调用它：useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
useMemo缓存的变量所代表的意义不是组件的state，组件的state改变会触发组件重渲染，而useMemo缓存的变量可能会因state改变而改变，是“被动的”；

二、使用场景

function App() {const [name, setName] = useState('')const getName = () => {console.log('getName-----')if (name === '') {return "张三"} else {return name}}return (<div className="App"><p>名称：</p><p>{getName()}</p><p onClick={() => setName('哈哈')}><button>改变Name</button></p></div>);
}<p>{name}</p><p onClick={() => setName('哈哈')}><button>改变Name</button></p></div>);
}

getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。

三、使用useMemo改造

function App() {const [name, setName] = useState('')const getName = useMemo(() => {console.log('useMemo-----')if (name === '') {return "张三"} else {return name}},[name])return (<div className="App"><p>名称：</p><p>{getName}</p><p onClick={() => setName('哈哈')}><button>改变Name</button></p></div>);
}

四、使用场景区别

useCallback 对于子组件渲染优化，当做函数传递时候。
useMemo 对于当前组件高开销的计算优化。

参考示例：https://www.e-learn.cn/topic/2694248

useEffect、useMemo、useCallback使用场景分析相关推荐

mysql表分区占用存储_MySQL 分区分表应用场景分析和分区中可能遇到的坑点
MySQL的分区和分表应用场景分析在日常工作中当我们的某张表的数据量过大的时候,首当其冲的可能就是进行分区和分表,但是是如何分区或者分表都要结合一点的业务场景下进行分析,才会显著的提升性能,来聊一聊 ...
如何调整按钮里的文字的位置android_UI设计中按钮场景分析
别无他话,今天就和大家聊一聊设计宿敌--按钮设计.按钮的设计看似简单,其实按钮的功能不同,设计形式上也会有差异,今天我就针对按钮的场景分析,对按钮进行全面的解析. 按照功能性分类,按钮主要包括行为召唤 ...
电商抢购秒杀系统的设计_1_应用场景分析
2019独角兽企业重金招聘Python工程师标准>>> 电商抢购秒杀系统的设计_1_应用场景分析概述所谓知已知彼,百战不殆,在开始详细介绍实战中的抢购秒杀系统时,我们了解一些抢购 ...
spring bean scope作用域及多线程安全问题场景分析
2019独角兽企业重金招聘Python工程师标准>>> Scope作用域在 Spring IoC 容器中具有以下几种作用域: singleton:单例模式,在整个Spring Io ...
mysql 事务查询范围加锁_MySQL死锁系列-常见加锁场景分析
本文我们就从原理走向实战,分析常见 SQL 语句的加锁场景.了解了这几种场景,相信小伙伴们也能举一反三,灵活地分析真实开发过程中遇到的加锁问题. 如下图所示,数据库的隔离等级,SQL 语句和当前数据库 ...
mysql常见死锁_MySQL死锁系列-常见加锁场景分析
如下图所示,数据库的隔离等级,SQL 语句和当前数据库数据会共同影响该条 SQL 执行时数据库生成的锁模式,锁类型和锁数量. 下面,我们会首先讲解一下隔离等级.不同 SQL 语句和当前数据库数据对 ...
高并发编程-Daemon Thread的创建以及使用场景分析
文章目录官方文档 Daemon Thread VS User Thread Daemon thread的特点方法 void setDaemon(boolean status) boolean is ...
Ansible自动化运维企业实际应用场景分析
企业实际应用场景分析 Dev开发环境使用者:程序员功能:程序员个人的办公电脑或项目的开发测试环境,部署开发软件,测试个人或项目整体的BUG的环境管理者:程序员测试环境使用者:QA测试 ...
shiro的会话管理：应用场景分析
应用场景分析在分布式系统或者微服务架构下,都是通过统一的认证中心进行用户认证.如果使用默认会话管理,用户信息只会保存到一台服务器上.那么其他服务就需要进行会话的同步. 会话管理器可以指定sessio ...

useEffect、useMemo、useCallback使用场景分析

一、区别

二、使用场景

三、使用useMemo改造

四、使用场景区别

useEffect、useMemo、useCallback使用场景分析相关推荐

最新文章

热门文章