React useMemo useCallback useEffect 的区别(保姆级教程)

2023-10-21 05:20

本文主要是介绍React useMemo useCallback useEffect 的区别(保姆级教程),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因个人工作原因,在2023年学起了React + TS 这个 “前端大佬” “高阶玩家” 标配的技术栈,一套学习下来个人总结就是:React真特么难用!传染病式的渲染逻辑是真让人难受!维护之前的代码就是深渊!难怪React项目标配TS,没个TS给这货加点限制这玩意写出来的代码就更没法看了!——以上总结仅代表个人使用感受,至于React的设计如何牛逼,我感受不到,我也不配讨论,勿喷!

如何解决React组件抽风式的刷新问题,小编使用解释和源码示例的方式讲解一下

memo

  • 父组件属性变化都会导致子组件重新执行,即使传入子组件props没有任何变化,甚至子组件没有依赖于任何props属性,都会导致子组件重新渲染
  •  使用memo包裹子组件时,只有props发生改变子组件才会重新渲染,以提升一定的性能
// 子组件
// 若不适用 memo API,父组件每次跟新 time 时,子组件都会重新渲染,输出 'List 被渲染'
const List = memo((props:{list:Array<string>
})=>{console.log('List 被渲染')return (<><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {const [ time,setTime ] = useState(0);const [ list,setList ] = useState<string[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])return (<><h1>页面浏览时长:{time}秒</h1><List list={list} /></>);
};

useMemo

  • 父组件将一个值传递给子组件,若父组件的其他值发生变化时,子组件也会跟着渲染多次,会造成性能浪费; useMemo是将父组件传递给子组件的值缓存起来,只有当 useMemo中的第二个参数状态变化时,子组件才重新渲染
  • useMemo便是用于缓存该函数的执行结果,仅当依赖项改变后才会重新计算
// 子组件
const List = memo((props:{oddOrEven?:string,list:Array<string>
})=>{console.log('List 被渲染')return (<><h3>列表长度为:{props.oddOrEven}</h3><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {  const [ time,setTime ] = useState(0);const [ list,setList ] = useState<string[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])// 奇数或偶数// 当传递给子组件的值是通过函数返回的情况下,需要使用 useMemo Hookconst oddOrEven = useMemo(()=>{return (list.length % 2 === 0 ? '偶数':'奇数');},[list])return (<><h1>页面浏览时长:{time}秒</h1><List list={list} oddOrEven={oddOrEven} /></>);
};

useCallback

  • 父组件将一个方法传递给子组件,若父组件的其他状态发生变化时,子组件也会跟着渲染多次,会造成性能浪费; usecallback是将父组件传给子组件的方法给缓存下来,只有当 usecallback中的第二个参数状态变化时,子组件才重新渲染
  • 如果传入的props包含函数,父组件每次重新渲染都是创建新的函数,所以传递函数子组件还是会重新渲染,即使函数的内容还是一样,我们希望把函数也缓存起来,于是引入useCallback
// 子组件
const List = memo((props:{list:Array<number>,click:(number:any)=>void
})=>{console.log('List 被渲染')return (<><button type='button' onClick={()=>{const t = new Date().getTime();props.click(t);}}>添加</button><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {const [ time,setTime ] = useState(0);const [ list,setList ] = useState<number[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])// 若传递给子组件的属性有函数,需要使用 useCallback Hook,否则子组件发疯式的重新渲染const handleClick = useCallback((time:number)=>{setList([...list,time])},[list])return (<><h1>页面浏览时长:{time}秒</h1><List list={list} click={ handleClick } /></>);
};

useMemo 和 useEffect 区别

  • useEffect是在DOM改变之后触发,useMemo在DOM渲染之前触发
  • useEffect可以帮助我们在DOM更新完成后执行某些副作用操作,如数据获取,setState
  • 不要在这个useMemo函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo
  • 在useMemo中使用setState你会发现会产生死循环,并且会有警告,因为useMemo是在渲染中进行的,你在其中操作DOM后,又会导致触发memo

小分享:我每次看完React文档后,我觉得我学会了,过一周后我发现自己还没学会。。这玩意坑到底还有多少,我醉了!

作者:黄河爱浪

本文原创,著作权归作者所有,转载请注明原链接及出处

这篇关于React useMemo useCallback useEffect 的区别(保姆级教程)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

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

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

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

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

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas