react中的forwardRef 和memo的区别?

文章目录

  • 前言
  • 介绍
  • forwardRef
  • memo
  • 适用场景
  • 优点缺点
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端面试
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

介绍

forwardRef 和 memo 是 React 中用于性能优化和组件复用的两个高阶函数。

forwardRef

forwardRef:通常情况下,父组件通过 ref 属性传递给子组件的引用只能是 DOM 元素或类组件的实例。但有时候我们希望将 ref 传递给函数组件内部的某个具体元素或组件,这时就可以使用 forwardRef。

forwardRef 可以传递一个回调函数来获取从父组件传递过来的 ref,并将其传递给内部的某个特定元素或组件。这样,在父组件中使用 ref 引用子组件时,实际上获取到的是子组件内部指定的元素或组件。

const MyComponent = React.forwardRef((props, ref) => (<div ref={ref}>{/* 组件内容 */}</div>
));

举个例子

const ParentComponent = () => {const childRef = useRef();useEffect(() => {console.log(childRef.current); // 子组件内指定的元素或组件}, []);return (<div><MyComponent ref={childRef} /></div>);
};

memo

memo:memo 是用于优化函数组件的渲染性能的高阶函数。它可以包裹一个函数组件,并返回一个经过优化的组件。

memo 会对函数组件的输入属性进行浅比较,如果输入属性没有发生变化,那么组件就不会重新渲染。只有当输入属性发生变化时,memo 才会重新调用函数组件进行渲染。

const MemoizedComponent = React.memo(MyComponent);

举个例子

const MyComponent = ({ text }) => {// 组件逻辑return <div>{text}</div>;
};const MemoizedComponent = React.memo(MyComponent);const ParentComponent = () => {const [text, setText] = useState('Hello');useEffect(() => {setTimeout(() => {setText('Hello, World!');}, 1000);}, []);return <MemoizedComponent text={text} />;
};

适用场景

forwardRef 的适用场景

  • 当你需要在父组件中直接操作子组件内部的特定元素或组件时,可以使用 forwardRef 将 ref 传递到函数组件内部的特定元素或组件中。
  • 例如,如果你希望在父组件中调用子组件的方法、访问子组件的某个 DOM 元素或组件实例等,就可以使用 forwardRef 来实现。
  • 在这种情况下,forwardRef 可以提高代码的可维护性和可读性,使父组件更方便地控制子组件。

memo 的适用场景

  • 当组件的输入属性没有发生变化时不希望重新渲染组件时,可以使用 memo 进行组件的浅比较。
    = 通过避免不必要的重复渲染,memo 可以显著提高组件的渲染性能,减少不必要的 DOM 操作,改善用户体验。
  • memo 适用于纯展示型组件或受控组件等,在这些组件中,输入属性的变化不会导致组件内部状态的改变,也不会引起副作用。

优点缺点

forwardRef 的优点:

提供了一种简单的方式将 ref 传递给函数组件内部的特定元素或组件。
可以让父组件更方便地操作子组件内部的特定元素或组件,提高了代码的可维护性和可读性。

forwardRef 的缺点:

增加了组件层级,可能会导致额外的性能开销。
可能会破坏组件的封装性,使组件与父组件之间产生紧密耦合。

memo 的优点:

通过浅比较可以避免不必要的组件渲染,提高了组件的性能。
对于纯展示型组件或受控组件等,可以有效减少不必要的 DOM 操作,改善用户体验。

memo 的缺点:

仅适用于基于输入属性的浅比较,如果组件的渲染依赖于其他因素(如上下文、状态等),则可能无法发挥优化作用。
使用 memo 进行浅比较会引入一定的计算开销,对于简单的组件可能不值得使用。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

VUE重学

v-if和v-show的区别&#xff1a; v-if是按条件渲染&#xff0c;因为他确保在切换时&#xff0c;条件区块内的事件监听器和子组件都会被销毁和重建&#xff0c;也是惰性的&#xff0c;如果初次渲染条件为false&#xff0c;则不会做任何事&#xff0c;只有true才会渲染 v-show:无…

springMVC 面试题

一、springMVC 面试题 1.Spring MVC的常用注解由有哪些&#xff1f; Controller&#xff1a; 用于标识此类的实例的是一个控制器 RequestMapping: 映射url路劲 ReponseBody: 返回JSON数据 RequestBody&#xff1a;将JSON数据转换为json数据&#xff0c;将json数据转换为Ja…

共谈信创谋发展 | 开源网安主办的信创生态构建沙龙圆满完成

​10月26日&#xff0c;由珠海市工业和信息化局、珠海市高新区科技创新和产业发展局指导&#xff0c;珠海华发产业园与开源网安珠海公司等联合主办的“赋能数字转型 提速国产替代”—Uni-Idea信创生态构建沙龙在华发信创产业园成功举办&#xff0c;近百位行业代表参加本次活动&…

使用requests库进行HTTP爬虫编程

目录 一、安装requests库 二、发送HTTP请求 三、解析HTML页面 四、处理HTTP响应和异常 五、使用代理和会话管理 六、使用多线程或多进程提高效率 七、数据存储和处理 八、注意事项和总结 在当今的数字化世界中&#xff0c;数据已经成为了一种宝贵的资源。而网络爬虫程序…

使用SweetAlert2 弹层(模态,提示框,过几秒消失......等等)

最近在做一个Asp.net MVC的项目&#xff0c;里面用部分视图页弹层&#xff0c;感觉很不爽&#xff0c;用着别扭。在前后端分离的项目里&#xff0c;我们肯定用封装好的前端UI库了&#xff0c;比如element ui&#xff0c;但是 Asp.net MVC的项目里面集成这个比较困难...... 就找…

基本微信小程序的体检预约小程序

项目介绍 我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;体检预约系统小程序被用户普遍使用&#xff0c;为方便用户…

使用ControlNet生成视频(Pose2Pose)

目录 ControlNet 介绍 ControlNet 14种模型分别是用来做什么的 ControlNet 运行环境搭建 用到的相关模型地址 ControlNet 介绍 ControlNet 是一种用于控制扩散模型的神经网络结构&#xff0c;可以通过添加额外的条件来实现对图像生成的控制。它通过将神经网络块的权重复制到…

OPNET <<< Program Abort >>> Standard function stack imbalance

OPNET <<< Program Abort >>> Standard function stack imbalance OPNET 问题原因及解决办法 OPNET 问题 OPNET仿真时遇到此问题&#xff1a; <<< Program Abort >>> Standard function stack imbalance 原因及解决办法 出现此问题是因…

【开题报告】基于Springboot的母婴商城设计与实现

1.研究背景与目的 随着社会发展和人们生活水平的提高&#xff0c;母婴市场逐渐兴起并蓬勃发展。为了满足消费者对母婴产品的需求&#xff0c;建立一个高效、可靠的母婴商城系统变得尤为重要。本项目旨在通过使用Spring Boot框架&#xff0c;设计和实现一个功能完善、易于扩展的…

Maven compile时报错 系统资源不足,出现OOM:GC overhead limit exceeded

今天在对项目进行Maven clean compile的时候&#xff0c;报出了如下的错误&#xff0c; 系统资源不足。 有关详细信息&#xff0c;请参阅一下堆栈跟踪。 java.lang.OutOfMemoryError: GC overhead limit exceededat java.util.EnumSet.noneOf(EnumSet.java:115)at com.sun.too…

半导体设备:静电卡盘

静电卡盘是半导体设备的核心组件之一&#xff0c;对于控制晶圆的温度&#xff08;加热及冷却&#xff09;至关重要。静电卡盘&#xff08;简称 ESC 或者 E-CHUCK&#xff09;具有高稳定性、晶圆平坦度高、颗粒污染小、边缘效应小等优势&#xff0c;目前已广泛应用在等离子和真空…

2.10、自定义量化优化过程

introduction 如何自定义量化优化过程,以及如何手动调用优化过程 code from typing import Callable, Iterableimport torch import torchvision from ppq import QuantizationSettingFactory, TargetPlatform from ppq.api import (ENABLE_CUDA_KERNEL, QuantizationSetti…

QT如何检测当前系统是是Windows还是Uninx或Mac?以及是哪个版本?

简介 通过Qt获取当前系统及版本号&#xff0c;需要用到QSysInfo。 QSysInfo类提供有关系统的信息。 WordSize指定了应用程序编译所在的平台的指针大小。 ByteOrder指定了平台是大端序还是小端序。 某些常量仅在特定的平台上定义。您可以使用预处理器符号Q_OS_WIN和Q_OS_MACOS来…

【设计模式】第14节:结构型模式之“代理模式”

一、简介 代理模式&#xff08;Proxy Design Pattern&#xff09;在不改变原始类&#xff08;或叫被代理类&#xff09;代码的情况下&#xff0c;通过引入代理类来给原始类附加功能。 二、优点 关注点分离访问控制延迟实例化远程访问缓存增加附加功能 三、应用场景 访问控…

【2021集创赛】海云捷迅杯一等奖:基于稀疏卷积与层融合的流水线优化方案

海云捷迅杯:基于FPGA C5Soc的MobileNetV1 SSD目标检测方案设计 本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 **杯赛题目&#xff1a;**海云捷迅杯——基于FPGA C5Soc的MobileNetV1 SSD目标检测方案设计 设计任务&#xff1a; 基于已训…

【MedusaSTears】正则表达式搜索心得

文章目录 心得体会1.懒惰匹配最少字符 .?2.前瞻: 字符串后边 包括/不包括 某个单词/字母2-1.包含某单词: start(?.?hello)2-2.不包含某单词: start(?!.?hello) 心得体会 前情回顾: 【MedusaSTears】正则?不要太简单!—正则表达式个人学习心得总结: 正则说白了是对字符串…

关于pycharm中句号变成点的问题

现象 在pycharm的使用中&#xff0c;经常遇到一个问题&#xff1a;注释写着写着&#xff0c;突然句号“。”变成了“.” 原因 今天突然发现&#xff0c;造成该现象的原因是&#xff1a;某个瞬间按下了ctrl .&#xff0c;那么之后按下句号只能显示为点。 pycharm中&#xf…

STM32G030F6P6 芯片实验 (一)

STM32G030F6P6 芯片实验 (一) 淘宝搞了几片, 没试过 G系列, 试试感觉. 先搞片小系统版: 套 STM32F103C8T6小系统板格式. 原理图: (1) Ref 有点跳, 从 STM32F103C8T6 系统板改的, 没重编号. (2) Type-C 纯给电, 砍了 16pin的, 直接换 6pin的。 (3) 测试LED放 B2。 (4) 测试底…

Android 10.0 framework关于systemUI状态栏透明背景的功能实现

1.概述 在10.0的系统产品定制化开发中,在对于系统原生SystemUI的状态栏背景在沉浸式状态栏的 情况下默认是会随着背景颜色的变化而改变的,在一些特定背景下状态栏的背景也是会改变的,所以由于产品开发需要 要求需要设置状态栏背景为透明的,所以就需要在Activity创建的时候…

MongoDB安装大全

MongoDB官网&#xff1a;https://www.mongodb.com/zh windows下安装mongodb 下载msi安装程序 一步一步安装即可 MacOS下安装mongodb 安装流程&#xff1a;https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/ 首先安装homebrew 注意事项&#xff1a; 在安…