React性能之--如何避免组件重复渲染?

         在react中,我们会发现存在组件重复渲染,虽然说如果项目不大的话,这点影响不大,但是我们还是尽量避免组件渲染比较好,养成好习惯,尽可能让不管是大小项目,都让性能尽可能优化 。那我们如何避免组件重复渲染呢?

   一、在 React 中,可以通过以下几种方法来避免组件重复渲染:

      1、PureComponent 或 React.memo:这些是 React 提供的优化组件渲染的高阶组件。                  (1)PureComponent:会自动实现了shouldComponentUpdate方法,进行浅比较来判断是否需要重新渲染组件,PureComponent 在 shouldComponentUpdate 方法中对组件的 propsstate 进行浅比较。在React 16.8之前,建议使用PureComponent来优化组件性能。

          (2)React.memo:在React 16.8之后,引入了React.memo。React.memo是一个高阶组件,用于包装函数组件。它与PureComponent类似,也会进行浅比较来判断是否需要重新渲染组件,它对函数组件进行浅比较。如果 props 或 state 没有变化,组件将不会重新渲染。

      注意:React 16.8开始,推荐使用React.memo优化函数组件性能,而不再需要使用PureComponent

     2、 shouldComponentUpdate:在类组件中,可以手动实现 shouldComponentUpdate 方法来判断组件是否需要重新渲染。在该方法中,可以比较前后的 props 和 state,如果它们没有变化,可以返回 false 阻止组件重新渲染。

     3、 React 的 Context API:Context 可以避免跨层级组件不必要渲染。通过在上层组件中使用 Context.Provider,可以将需要共享的数据传递给子组件。子组件可以通过 Context.Consumer useContext Hook获取这些数据,而不需要通过 props 传递。

      总的来说,避免组件重复渲染关键减少不必要渲染触发。可以通过使用PureComponent 或 React.memo 来自动检测变化,并且在需要的地方手动实现 shouldComponentUpdate 方法或使
用 Context 来控制渲染。

二、使用

    1、PureComponent 或 React.memo

 2、 shouldComponentUpdate:

例子:在这个例子中,如果nameage没有改变,那么组件的render方法将不会被调用。这对于避免不必要的渲染可以提高性能

 3、 React 的 Context API

假设我们有一个简单的计数器组件,它包含一个按钮,点击按钮会增加计数器的值。现在我们希望将计数器的值传递给组件树中的其他组件,而不需要通过props将值逐级传递。

使用React的Context API可以实现这个目的。

(1)我们创建一个Context对象

(2)计数器组件:然后,在计数器组件中,我们将CounterContext.Provider包装在按钮周围,并将计数器的值作为value传递给Provider

(3)使用CounterContext.Consumer:现在,我们可以在任何想要访问计数器值的组件中使用CounterContext.Consumer

这样,每当我们点击增加计数器按钮时,只有DisplayCount组件会重新渲染,而不是整个组件树。这是通过Context API提供的跨组件传递数据的机制,它可以避免重复渲染整个组件树。

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

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

相关文章

Linux/C 高级——Linux命令

从这里开始,我们展开对Linux/c 高级的学习,首先介绍的是在Linux/c高级中,Linux的部分 目录 1.Linux简介 1.1Linux起源 1.2查看系统版本命令 1.3分层结构 1.4系统关机重启命令 2.Linux安装工具 2.1软件包安装 2.1.1软件包的管理机制 …

计算机基础(Windows 10+Office 2016)教程 —— 第6章 电子表格软件Excel 2016(上)

第6章 电子表格软件Excel 2016 6.1 Excel 2016入门6.1.1 Excel 2016 简介6.1.2 Excel 2016 的操作界面组成6.1.3 Excel 2016 的视图方式6.1.4 Excel 2016 的工作簿及其操作6.1.5 Excel 2016 的工作表及其操作6.1.5 Excel 2016 的工作表及其操作6.1.6 Excel 2016 的单元格及其操…

Typora+PicGo-Core(command line)+Gitee 实现上传图片到图床(看这一文就够)

前言 ​ 对于喜欢写Markdown文档的人来说,Typora无疑是一个写作利器,它有别于其他的Markdown软件,不是一边编辑一边渲染,而是即写即渲染,这样对于浏览md文件也非常友好。此外Typora还支持更换主题,在其官网…

【QT】Qt中Websocket的使用

一、WebSocket的定义 WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,…

arcgis(shp)注记转CAD(dwg)文字

arcgis(shp)注记转CAD(dwg)文字方法如下: 1、添加shp文件,标注要素,然后选标注转注记 2、 点击文件夹图标打开文件夹,选择保存路径。(提前需新建好文件地理数据库、数据…

#java学习笔记(面向对象)----(未完结)

一基础相关知识点: 1. 一个对象的调用 首先我们创建一个Phone类 public class Phone {//成员变量String name;int age;String favourite;//成员方法public void myName(){System.out.println(name);}public void myAge(){System.out.println(age);}public void m…

Flink实时数仓(六)【DWD 层搭建(四)交易域、互动域、用户域实现】

前言 今天的任务是完成 DWD 层剩余的事实表;今年的秋招开得比往年早,所以要抓紧时间了,据了解,今年的 hc 还是不多,要是晚点投铁定寄中寄了; 今天还是个周末,不过记忆里我好像整个大学都没有好好…

山姆.奥特尔曼发文暗示:新模型“草莓“即将发布?

山姆.奥特尔曼发文 山姆.奥特尔曼在今天发布了一条推特,图片中所展示的是已经成熟的几颗草莓。要知道之前的"草莓"事件闹的可是沸沸扬扬,而恰巧山姆.奥特尔曼在此时又发出了一条这样的文章。会不会是刻意的在暗示什么呢? 新的模型即将发布? 山姆.奥特尔曼…

视频编辑SDK解决方案,提升了视频内容的趣味性和观赏性

美摄科技,作为视频编辑技术的领航者,凭借其前沿的视频编辑SDK解决方案,正以前所未有的方式,重新定义着互联网泛娱乐、硬件大屏、匿名社交等多个行业场景的体验边界。我们不仅仅是在编辑视频,更是在编织一个充满想象与互…

GIt最新教程通俗易懂

Git学习笔记 一、Git版本控制分类1.1 本地版本控制1.2 集中版本1.3 分布式版本控制系统1.5 Git和SVN的区别二、Git的历史 三、Gti基础学习3.1 Git的基础学习3.2 启动Git 3.3 Git基本的配置3.3.1 配置文件相关位置 四、Git基本理论(核心)4.1 Git 的工作流…

自驾畅游保定:参观总督署,品美食文化

这是学习笔记的第 2490篇文章 前几天跟孩子聊天,孩子说暑假都没出去玩了,暑假旅行的作业咋写?让我有满满的负疚感,去附近的公园、吃点美食不算旅游,得了,得安排一下一日游。 几个月前心心念的去保定&#x…

Vue 3+Vite+Eectron从入门到实战系列之(四)一Electron热身运动(二)

在electron里面能不呢实现暗黑模式和明亮模式的切换&#xff1f;我们怎么读取主进程里面的数据和系统数据。这篇就是来实现这几个效果的 实现效果 更改系统的主题色 在 App.vue 中添加代码。 <el-button type"warning" click"changeTheme">更改系…

红豆0感舒适衬衫2.0,让这个七夕节变得有点不一样

七夕节又到了&#xff0c;在这个佳人相约的传统节日&#xff0c;红豆舒适男装以“七夕穿红豆 爱人更舒适”为主题带来了24届红豆七夕节。 这是红豆集团连续24年举办红豆七夕节&#xff0c;红豆七夕节也不仅是广受年轻人喜爱的传统节日盛典&#xff0c;同样也是红豆集团打造的特…

CV党福音:YOLOv8实现分类

YOLO作为目标检测领域的常青树&#xff0c;如今以及更新到了YOLOv10&#xff0c;并且还有YOLOX、YOLOS等变体&#xff0c;可以说该系列已经在目标检测领域占据了半壁江山&#xff0c;如今&#xff0c;YOLOv8的发行者ultralytics竟有一统江山之意&#xff0c;其在提出的框架中不…

【书生大模型实战营(暑假场)】入门任务二 Git 关卡

入门任务二 Git 关卡 参考&#xff1a; 教程任务 注意&#xff1a; 项目Github链接 1 闯关任务 1.1 使用 Git 完成破冰介绍 本任务将基于开发机实现&#xff0c;重点在于熟悉Git操作。首先要了解 Git操作的常见四部曲&#xff0c;即&#xff1a;舔 Add&#xff0c;提 Co…

计算机毕业设计选题推荐-电缆行业生产管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Gradle 入门指南:从安装到基础用法详解

文章目录 Gradle 简介安装 Gradle创建和配置 Gradle 项目将 Gradle 项目打成jar包多项目聚合示例项目结构步骤详解 Gradle 简介 Gradle 是一个基于 Groovy 和 Kotlin 的构建工具&#xff0c;用于自动化构建、依赖管理和项目管理。它结合了 Maven 的依赖管理和 Ant 的灵活性&am…

【MySQL】库操作,数据类型

目录 MySQL简介SQL语句分类库操作语句展示数据库创建数据库使用数据库删除数据库 数据类型整型浮点型字符串日期类型 MySQL简介 数据库有关系型数据库和非关系型数据库。 关系型数据库&#xff1a;是指采用了关系模型来组织数据的数据库。 简单来说&#xff0c;关系模型指的就…

智能化的Facebook未来:AI如何重塑社交网络的面貌?

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;社交网络的面貌正在经历深刻的变革。Facebook&#xff08;现Meta Platforms&#xff09;作为全球最大的社交媒体平台之一&#xff0c;正积极探索如何利用AI技术来提升用户体验、优化内容管理并推动平台创新。…

线上预约陪诊平台医院陪诊系统源码就医陪护小程序APP开发

项目分析 随着医疗行业的数字化转型和人们对健康需求的日益增长&#xff0c;线上预约陪诊系统作为一种新兴的医疗服务模式&#xff0c;正逐渐受到市场的关注和认可。本文将从市场前景、使用人群、盈利模式以及竞品分析等多个角度&#xff0c;全面探讨线上预约陪诊系统的技术性…