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

React中如何提高组件的渲染效率

一、是什么

react 基于虚拟 DOM 和高效 Diff算法的完美配合,实现了对 DOM最小粒度的更新,大多数情况下,React对 DOM的渲染效率足以我们的业务日常

复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,避免不必要的渲染则是业务中常见的优化手段之一

二、如何做

在之前文章中,我们了解到render的触发时机,简单来讲就是类组件通过调用setState方法, 就会导致render,父组件一旦发生render渲染,子组件一定也会执行render渲染

从上面可以看到,父组件渲染导致子组件渲染,子组件并没有发生任何改变,这时候就可以从避免无谓的渲染,具体实现的方式有如下:

  • shouldComponentUpdate
  • PureComponent
  • React.memo

shouldComponentUpdate

通过shouldComponentUpdate生命周期函数来比对 state和 props,确定是否要重新渲染

默认情况下返回true表示重新渲染,如果不希望组件重新渲染,返回 false 即可

PureComponent

shouldComponentUpdate原理基本一致,通过对 props 和 state的浅比较结果来实现 shouldComponentUpdate,源码大致如下:

if (this._compositeType === CompositeTypes.PureClass) {shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

shallowEqual对应方法大致如下:

const hasOwnProperty = Object.prototype.hasOwnProperty;/*** is 方法来判断两个值是否是相等的值,为何这么写可以移步 MDN 的文档* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is*/
function is(x: mixed, y: mixed): boolean {if (x === y) {return x !== 0 || y !== 0 || 1 / x === 1 / y;} else {return x !== x && y !== y;}
}function shallowEqual(objA: mixed, objB: mixed): boolean {// 首先对基本类型进行比较if (is(objA, objB)) {return true;}if (typeof objA !== 'object' || objA === null ||typeof objB !== 'object' || objB === null) {return false;}const keysA = Object.keys(objA);const keysB = Object.keys(objB);// 长度不相等直接返回falseif (keysA.length !== keysB.length) {return false;}// key相等的情况下,再去循环比较for (let i = 0; i < keysA.length; i++) {if (!hasOwnProperty.call(objB, keysA[i]) ||!is(objA[keysA[i]], objB[keysA[i]])) {return false;}}return true;
}

当对象包含复杂的数据结构时,对象深层的数据已改变却没有触发 render

注意:在react中,是不建议使用深层次结构的数据

React.memo

React.memo用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似。但不同的是, React.memo 只能用于函数组件

import { memo } from 'react';function Button(props) {// Component code
}export default memo(Button);

如果需要深层次比较,这时候可以给memo第二个参数传递比较函数

function arePropsEqual(prevProps, nextProps) {// your codereturn prevProps === nextProps;
}export default memo(Button, arePropsEqual);

三、总结

在实际开发过程中,前端性能问题是一个必须考虑的问题,随着业务的复杂,遇到性能问题的概率也在增高

除此之外,建议将页面进行更小的颗粒化,如果一个过大,当状态发生修改的时候,就会导致整个大组件的渲染,而对组件进行拆分后,粒度变小了,也能够减少子组件不必要的渲染

相关文章:

React中如何提高组件的渲染效率

一、是什么 react 基于虚拟 DOM 和高效 Diff算法的完美配合&#xff0c;实现了对 DOM最小粒度的更新&#xff0c;大多数情况下&#xff0c;React对 DOM的渲染效率足以我们的业务日常 复杂业务场景下&#xff0c;性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能&…...

springboot+mybatis3.5.2动态查询某一字段在某一段时间内的统计信息(折线图)

需求&#xff1a; 动态查询某一统计字段在一段时间内的统计折线图信息 controller层 ApiOperation(value "getStatisticDetail", notes "统计折线图")GetMapping("/detail")ResponseStatus(HttpStatus.OK)AccessLogAnnotation(ignoreRequestA…...

关于本地项目上传到gitee的详细流程

如何上传本地项目到Gitee的流程&#xff1a; 1.Gitee创建项目 2. 进入所在文件夹&#xff0c;右键点击Git Bash Here 3.配置用户名和邮箱 在gitee的官网找到命令&#xff0c;注意这里的用户名和邮箱一定要和你本地的Git相匹配&#xff0c;否则会出现问题。 解决方法如下&…...

MarkDown详细入门笔记

本帖整理了MarkDown的入门学习笔记~ 一.介绍 Markdown 是一种轻量级的「标记语言」&#xff0c;它的优点很多&#xff0c;目前也被越来越多的写作爱好者&#xff0c;撰稿者广泛使用。 诸如微信公众平台、CSDN博客、还有Typora中写文档的部分&#xff0c;均涉及到MD的功能~ 它…...

算法——贪心算法

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种算法设计策略&#xff0c;通常用于解决组合优化问题&#xff0c;其核心思想是在每一步都选择当前状态下最优的解&#xff0c;而不考虑之后的步骤。贪心算法在每一步都做出局部最优选择&#xff0c;期望通过一系列局部最…...

102.linux5.15.198 编译 firefly-rk3399(1)

1. 平台&#xff1a; rk3399 firefly 2g16g 2. 内核&#xff1a;linux5.15.136 &#xff08;从内核镜像网站下载&#xff09; 3. 交叉编译工具 gcc version 7.5.0 (Ubuntu/Linaro 7.5.0-3ubuntu1~18.04) 4. 宿主机&#xff1a;ubuntu18.04 5. 需要的素材和资料&#xff…...

易点易动固定资产管理系统:多种盘点方式助力年终固定资产盘点

年末固定资产盘点是企业管理中一项重要而繁琐的任务。为了帮助企业高效完成年终固定资产盘点工作&#xff0c;易点易动固定资产管理系统提供了多种盘点方式。本文将详细介绍易点易动固定资产管理系统的多种盘点方式&#xff0c;展示如何借助该系统轻松完成年终固定资产盘点&…...

C# Winform编程(10)Chart图表控件

Chart控件 Chart控件Chart属性详述Chart属性设置图表样式属性数据样式属性图例样式图标区样式SeriesChartType类型 Chart控件鼠标滚轮事件特殊处理Series绑定数据演示代码鼠标滚轮缩放图表示例参考引用 Chart控件 Chart控件是微软自带的一种图形可视化组件&#xff0c;使用简单…...

群狼调研(长沙产品概念测试)|如何做新品上市满意度调研

新品上市满意度调研是一种重要的市场研究方法&#xff0c;它通过收集和分析消费者对新产品的态度、购买意愿和满意度等方面的数据&#xff0c;帮助企业了解消费者的需求和期望&#xff0c;发现新产品的问题和不足&#xff0c;从而为产品改进提供有力的数据支持。群狼调研&#…...

Lua与C++交互

文章目录 1、Lua和C交互2、基础练习2.1、加载Lua脚本并传递参数2.2、加载脚本到stable&#xff08;包&#xff09;2.3、Lua调用c语言接口2.4、Lua实现面向对象2.5、向脚本中注册c的类 1、Lua和C交互 1、lua和c交互机制是基于一个虚拟栈&#xff0c;C和lua之间的所有数据交互都通…...

Ubuntu安装pyenv,配置虚拟环境

文章目录 安装pyenvpyenv创建虚拟环境一般情况下创建虚拟环境的方法 安装pyenv 摘自&#xff1a;文章 pyenv可以管理不同的python版本 1、安装pyenv的依赖库 # 执行以下命令安装依赖库 # 更新源 sudo apt-get update # 更新软件 sudo apt-get upgradesudo apt-get install ma…...

【分布式技术专题】「分布式技术架构」MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步

MySQL数据同步到Elasticsearch之N种方案解析&#xff0c;实现高效数据同步 前提介绍MySQL和ElasticSearch的同步双写优点缺点针对于缺点补充优化方案 MySQL和ElasticSearch的异步双写优点缺点 定时延时写入ElasticSearch数据库机制优点缺点 开源和成熟的数据迁移工具选型Logsta…...

什么是React中的高阶组件(Higher Order Component,HOC)?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

NEFU离散数学实验3-递推方程

相关概念 递推方程是指一种递归定义&#xff0c;它将问题拆分成更小的子问题&#xff0c;并使用这些子问题的解来计算原问题的解。离散数学中&#xff0c;递推方程通常用于描述数列、组合问题等。 以下是一些递推方程相关的概念和公式&#xff1a; 1. 递推公式&#xff1a;递推…...

如何为你的地图数据设置地图样式?

地图样式设置是GIS系统中非常重要的功能模块&#xff0c;水经微图Web版本最近对符号样式功能模块进行了升级。 你可以通过以下网址直接打开访问&#xff1a; https://map.wemapgis.com 现在我们为大家分享一下水经微图Web版中&#xff0c;如何为你标注的地图数据设置地图样式…...

解决visual studio Just-In-Time Debugger调试

解决visual studio Just-In-Time Debugger调试 网上流行很多方法&#xff0c;最后一直不行&#xff0c;其实有最简单的方法比较实用 方法一&#xff1a;把 C:\WINDOWS\system32\vsjitdebugger.exe,删除了&#xff0c;若怕出问题&#xff0c;可以把它改名或者做个rar文件暂时保留…...

Uservue 中 keep-alive 组件的作用

目录 前言 用法 代码 理解 keep-alive 是 Vue.js 中一个内置的组件&#xff0c;它能够将不活动的组件实例保存在内存中&#xff0c;防止其被销毁&#xff0c;以便在后续需要时能够快速重新渲染。这个功能在一些需要频繁切换但不希望每次都重新渲染的场景中非常有用&#xf…...

gitlab查看、修改用户和邮箱,gitlab生成密钥

查看用户、邮箱 git config user.name git config user.email 修改用户、邮箱 git config --global user.name “xxx” git config --global user.email “xxxxxx.com” 生成ssh密钥 ssh-keygen -t rsa -C “xxxxxx.com” 查看SSH秘钥 cat ~/.ssh/id_rsa.pub 将秘钥复制&…...

python操作MySQL、SQL注入问题、视图、触发器、事务、存储过程、函数、流程控制、索引(重点)

python操作MySQL(重要) SQL的由来&#xff1a; MySQL本身就是一款C/S架构&#xff0c;有服务端、有客户端&#xff0c;自身带了有客户端&#xff1a;mysql.exe python这门语言成为了MySQL的客户端(对于一个服务端来说&#xff0c;客户端可以有很多) 操作步骤&#xff1a; …...

这一年的资源

#线性代数 https://textbooks.math.gatech.edu/ila/one-to-one-onto.html行业规范https://xlinux.nist.gov/dads/https://www.dhs.gov/publications产业群链基金会 https://www.cncf.io/谷歌 https://opensource.google/projects网飞 高德纳 https://www.gartne…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...