当前位置: 首页 > news >正文

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 进行浅比较会引入一定的计算开销,对于简单的组件可能不值得使用。

后言

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

相关文章:

react中的forwardRef 和memo的区别?

文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端面试 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错…...

偶数矩阵判断【C语言作业】

题目 若一个布尔矩阵所有行和所有列的和都是偶数&#xff0c;则称为偶数矩阵。请编写一个程序&#xff0c;判断一个布尔矩阵是否是偶数矩阵。 要求&#xff1a; &#xff08;1&#xff09;输入:首先输入一个正整数n(n<100),代表该矩阵的大小&#xff0c;接下来是n行n列的矩…...

stable-diffusion 电商领域prompt测评集合

和GhostReivew一个思路&#xff0c;还是从比较好的图片或者是civitai上找一些热门的prompt&#xff0c;从小红书上也找到了不少的prompt&#xff0c;lexica.art上也有不少&#xff0c;主要是为了电商场景的一些测评&#xff1a; 小红书、civitai、Lexica、Liblib.ai、 depth o…...

协方差矩阵

将变量两两之间的协方差排成矩阵的形式&#xff0c;就是协方差矩阵。 用个例子来说明下&#xff0c;帮助理解。 下面这组数据有三个变量&#xff1a;身高x、体重y、年龄z&#xff0c;每个变量都有5个取值&#xff1a; 身高x&#xff08;cm&#xff09;体重y&#xff08;kg&a…...

0基础学习VR全景平台篇第117篇:利用插件地拍补地 - PS教程

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 嗨&#xff0c;大家好&#xff0c;今天我们来介绍【PS利用插件地拍补地】。 之前已经教给大家补地插件的安装方法&#xff0c;今天我们教给大家如何使用这个插件进行补地。 首…...

git的命令操作

1、基本命令 目录 1、基本命令 创建 Git 存储库 添加文件/目录到索引 将更改提交到本地存储库 撤消上一次提交的更改 显示工作树状态 显示对工作树和索引的更改 显示提交日志 显示提交详细信息 重命名文件 从工作树和索引中移除文件 从工作树中移除未跟踪文件 将…...

Nginx+keepalived实现七层的负载均衡

1.keepalived VRRP 介绍 keepalived是什么&#xff1f; keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 keepalived工作原理 keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundancy Protocol&…...

至少在两个数组中出现的值

给你三个整数数组 nums1、nums2 和 nums3 &#xff0c;请你构造并返回一个 元素各不相同的 数组&#xff0c;且由 至少 在 两个 数组中出现的所有值组成。数组中的元素可以按 任意 顺序排列。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,1,3,2], nums2 [2,3], nums3 [3]…...

子女关于骨灰发生争议,骨灰该如何安置?

亲属去世后&#xff0c;争房产、争车辆、争存款的事情不少&#xff0c;但争骨灰却是稀罕事儿。近日&#xff0c;江苏省无锡市梁溪区人民法院审结了一起人格权案件&#xff0c;马某与继母因父亲老马骨灰安葬引发的纷争&#xff0c;历经2年多终于落幕。   老马与前妻离婚后&…...

android隐藏输入法的一些尝试,最后一个可行

一、背景&#xff1a; 基于android开发自己的输入法app&#xff0c;用户需要手动收起输入法 二、准备工作&#xff1a; 定义类 public class CustIMS extends InputMethodService {} 和 xml声明三、尝试验证&#xff1a; 1、CustIMS.hideWindow(); 结论&#xff1a;这个在…...

【go-zero】go-zero 脚手架 simple-admin 第一章:通过goctls生成rpc整个项目 | go-zero整合 ENT数据库orm框架

往期回顾 【simple-admin 开篇:安装 了解 goctls】https://ctraplatform.blog.csdn.net/article/details/133988572 本章内容 往期回顾一、simple-admin 创建rpc项目实战1、创建git仓库1.1、创建任意git仓库1.2、克隆到本地2、创建RPC项目2.1、goctls 安装 rpc项目2.2、复制项…...

Ubuntu 使用 nginx 搭建 https 文件服务器

Ubuntu 使用 nginx 搭建 https 文件服务器 搭建步骤安装 nginx生成证书修改 config重启 nginx 搭建步骤 安装 nginx生成证书修改 config重启 nginx 安装 nginx apt 安装&#xff1a; sudo apt-get install nginx生成证书 使用 openssl 生成证书&#xff1a; 到对应的路径…...

团队表 -多级团队设计

团队表 -多级团队设计 user_team团队表 &#xff0c;如果存在子团队 1.我们可以通过每一个团队字段加一个parentid &#xff08;相当于一对多的关系&#xff09; 2.还可以设置一个字段CodingNum,比如这样: //系统为了管理查询团队自动生成的有序编号 可以使用3位数代表一个…...

LeetCode每日一题——2103. Rings and Rods

文章目录 一、题目二、题解 一、题目 There are n rings and each ring is either red, green, or blue. The rings are distributed across ten rods labeled from 0 to 9. You are given a string rings of length 2n that describes the n rings that are placed onto the…...

ant-design-vue form表单自定义校验规则

<a-form-itemlabel"市场价"class"status-barcode"name"marketPrice":rules"[{ required: true, message: },{ validator: validateNumber },]"><a-inputshow-count:maxlength"10"v-model:value"formState.ma…...

软件工程:小组开发过程技术(VS VSS UNIX C++)

&#xff08;注&#xff1a;这个东西是2007年写的&#xff0c;算是个缅怀&#xff0c;或是个吐槽。所有注都是本次发布新加的。&#xff09; 简介 本文讲述完全没有软件工程经验的软件小组如何借助VS VSS等工具为UNIX开发C程序&#xff0c;实现在小组规模的初级开发过程。这不…...

算法----从字符串中移除星号

题目 给你一个包含若干星号 * 的字符串 s 。 在一步操作中&#xff0c;你可以&#xff1a; 选中 s 中的一个星号。 移除星号 左侧 最近的那个 非星号 字符&#xff0c;并移除该星号自身。 返回移除 所有 星号之后的字符串。 注意&#xff1a; 生成的输入保证总是可以执行题…...

JVS低代码表单引擎助你打造高效表单设计流程

在日常的设计表单过程中&#xff0c;常常会有需要录入一大段文字的场景&#xff0c;例如评论、留言、产品介绍、内容说明等场景&#xff0c;那么简单的文本框组件就不满足了&#xff0c;这里JVS提供了 两种描述类型的组件&#xff0c;多行文本框和富文本组件&#xff0c;如下图…...

运行项目报错error in ./node_modules/marked/lib/marked.umd.js

今天跑项目时发现一个报错&#xff0c;问题出在marked这个包&#xff0c;然后翻看package.json里面也没有这个包&#xff0c;全局搜索项目也没有这个包相关的信息&#xff0c;可它就是报错&#xff0c;索性直接把它给卸载发现还是报错 报错原因&#xff1a;包的版本太高 解决…...

内置对象和方法、前端基础之BOM和DOM

内置对象和方法 RegExp对象 // 定义正则表达式两种方式 var reg1 new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;// 正则校验数据 reg1.test(jason666) reg2.test(jason666)/*第一个注意事项&#xff0c;正则表达式中不能有…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...