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文档后,我觉得我学会了,过一周后我发现自己还没学会。。这玩意坑到底还有多少,我醉了!

作者:黄河爱浪

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC的工作流程

1、SpringMVC的定义 Spring MVC是基于Java的开源Web框架&#xff0c;它是Spring框架的一部分&#xff0c;用于构建MVC&#xff08;Model-View-Controller&#xff09;模式的Web应用程序。它提供了一种灵活且强大的方式来开发Web应用程序&#xff0c;并将应用程序的不同层进行解…

python 之 矩阵相关操作

文章目录 1. **创建矩阵**&#xff1a;2. **矩阵加法**&#xff1a;3. **矩阵乘法**&#xff1a;4. **矩阵转置**&#xff1a;5. **元素级操作**&#xff1a;6. **汇总统计**&#xff1a;7. **逻辑操作**&#xff1a; 理解你的需求&#xff0c;我将为每个功能写一个单独的代码块…

docker部署与基础操作

目录 一、Docker 概述&#xff1a; 1. docker简介&#xff1a; 2. 容器的优点&#xff1a; 3. 容器在内核中支持2种重要技术&#xff1a; 4 . 容器与虚拟机 的区别&#xff1a; 5. docker三个核心概念&#xff1a; 二、安装docker&#xff1a; 1. 关闭防火墙&#xff1a; 2. 安…

使用MFC创建一个SaleSystem

目录 1、项目的创建&#xff1a; 2、项目的配置&#xff1a; 3、设置窗口属性&#xff1a; &#xff08;1&#xff09;、设置图标 1&#xff09;、添加导入资源 2&#xff09;、代码初始化图标 &#xff08;2&#xff09;、设置标题 &#xff08;3&#xff09;、设置窗口…

2023-10-22 LeetCode每日一题(做菜顺序)

2023-10-22每日一题 一、题目编号 1402. 做菜顺序二、题目链接 点击跳转到题目位置 三、题目描述 一个厨师收集了他 n 道菜的满意程度 satisfaction &#xff0c;这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间&am…

Matlab中saveobj函数的使用

目录 语法 说明 示例 saveobj函数的功能是修改对象的保存过程 语法 b saveobj(a) 说明 如果 a 的类定义 saveobj 方法&#xff0c;则 b saveobj(a) 由save函数调用。save 将返回的值 b 写入 MAT 文件。 定义loadobj方法以在加载该对象时采取相应操作。 如果 A 是一个对象…

【C++】特殊类实现

一、请设计一个类&#xff0c;不能被拷贝 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c; 只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 C98 将拷贝构造函数与赋值运算符重载只声明不定义…

美团面试:Oracle JDK那么好,为何要用Open JDK?

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 既然 Oracle JDK 这么好&#xff0c;那为什么还要有 OpenJDK&…

【Java基础面试三十八】、请介绍Java的异常接口

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;请介绍Java的异常接口 …

【Linux】基本操作指令汇总(不完全)

文章目录 操作系统概念补充lspwdsuechocdtouchmkdirrmdir指令 && rm 指令(重要)man指令cpmvcatmorelessheadtailstat时间相关的指令calfindgrepwcsortuniqwhichziptar:打包/解包&#xff0c;不打开它&#xff0c;直接看内容bcunamectrl cctrl rctrl d\ls cpulsmemdf-hw…

Leetcode 2910. Minimum Number of Groups to Create a Valid Assignment

Leetcode 2910. Minimum Number of Groups to Create a Valid Assignment 1. 解题思路2. 代码实现 题目链接&#xff1a;2910. Minimum Number of Groups to Create a Valid Assignment 1. 解题思路 这一题有点惭愧&#xff0c;我走了弯路&#xff0c;结果居然还是看了大佬们…

Android C/C++ native编程NDK开发中logcat的使用

Android C/C native编程NDK开发中logcat的使用 前言具体用法 前言 在NDK开发过程中&#xff0c;C/C层&#xff0c;需要对代码进行一些调试&#xff0c;日志打印是我们解决异常或崩溃的重要手段&#xff0c;这里我就简单介绍下日志打印三步走。 首先我们先看下官方文档关于日志…

【CSS】gird 网格

网格&#xff08;Grid&#xff09;是一种基于列数的布局系统&#xff0c;它可以帮助开发者创建具有水平和垂直分隔的页面布局。在CSS中&#xff0c;Grid是一种非常强大的布局工具&#xff0c;可以轻松地创建复杂的布局结构。Grid的主要属性包括&#xff1a; grid-template-col…

一天吃透Java面试题

给大家分享我整理的Java高频面试题&#xff0c;有小伙伴靠他拿到字节offer了。 Java基础面试题 Java的特点Java 与 C 的区别JDK/JRE/JVM三者的关系Java程序是编译执行还是解释执行&#xff1f;面向对象和面向过程的区别&#xff1f;面向对象有哪些特性&#xff1f;数组到底是…

npm常用命令与操作篇

npm简介 npm是什么 npm 的英文是&#xff0c;node package manager&#xff0c;是 node 的包管理工具 为什么需要npm 类比建造汽车一样&#xff0c;如果发动机、车身、轮胎、玻璃等等都自己做的话&#xff0c;几十年也做不完。但是如果有不同的厂商&#xff0c;已经帮我们把…

信息检索与数据挖掘 | (五)文档评分、词项权重计算及向量空间模型

目录 &#x1f4da;词项频率及权重计算 &#x1f407;词项频率 &#x1f407;逆文档频率 &#x1f407;tf-idf权重计算 &#x1f4da;向量空间模型 &#x1f407;余弦相似度 &#x1f407;查询向量 &#x1f407;向量相似度计算 &#x1f4da;其他tf-idf权值计算方法 …

Jmeter —— jmeter参数化实现

jmeter参数化 在实际的测试工作中&#xff0c;我们经常需要对多组不同的输入数据&#xff0c;进行同样的测试操作步骤&#xff0c;以验证我们的软件的功能。这种测试方式在业界称为数据驱动测试&#xff0c; 而在实际测试工作中&#xff0c;测试工具中实现不同数据输入的过程称…

数据库管理-第112期 Oracle Exadata 03-网络与ILOM(20231020)

数据库管理-第112期 Oracle Exadata 03-网络与ILOM&#xff08;202301020&#xff09; 在Exadata中&#xff0c;除了对外网络以外&#xff0c;其余网络都是服务于一体机内部各组件的网络&#xff0c;本期对这些网络的具体情况和硬件管理相关做一个讲解。 1 网络分类 1.1 生产…

记调试SMBUS的心得

为什么电池电压读的不对 仔细一看是I2C读取数据的时候少了一个CLK I2C是非常严密的 读数据之后&#xff0c;发送 ACK&#xff0c;让从机准备数据 发送NACK&#xff0c;告诉从机别准备了 ACK和NACK的区别是啥&#xff0c;告诉你&#xff0c;就是NACK先拉高SDA&#xff0c;再…