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

相关文章

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

C++中全局变量和局部变量的区别

《C++中全局变量和局部变量的区别》本文主要介绍了C++中全局变量和局部变量的区别,全局变量和局部变量在作用域和生命周期上有显著的区别,下面就来介绍一下,感兴趣的可以了解一下... 目录一、全局变量定义生命周期存储位置代码示例输出二、局部变量定义生命周期存储位置代码示例输出三、全局变量和局部变量的区别作用域

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次,点赞4次,收藏6次。MyBatis使用#{}作为参数占位符时,会创建预处理语句(PreparedStatement),并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#(井号):MyBATis使用#{}作为参数占位符时,会

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v