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

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

Springboot @Autowired和@Resource的区别解析

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

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

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

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

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

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

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

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是