首页 > 其他分享 >【React 】如何提高组件的渲染效率?在React中如何避免不必要的render?

【React 】如何提高组件的渲染效率?在React中如何避免不必要的render?

时间:2024-03-22 20:29:23浏览次数:28  
标签:shouldComponentUpdate render 渲染 memo React 如何 组件

1. 是什么

react基于虚拟DOM和高效Diff算法的完美配合,实现了对DOM最小粒度的更新,大多数情况下,React对DOM的渲染效率足以我们的业务日常
复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,避免不必要的渲染则是业务中常见的优化手段之一

2. 如何做

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

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

  • shouldComponentUpdate
  • PureComponent
  • React,memo

2.1 shouldComponentUpdate

通过shouldComponentUpdate生命周期函数来比对state和props ,确定是否要重新渲染默认情况下返回true表示重新渲染,如果不希望组件重新渲染,返回false即可

2.2 PureComponent

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

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

当对象包含复杂的数据结构时,对象深层的数据已改变却没有触发render
注意:在react中,是不建议使用深层次结构的数据

2.3 React.momo

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

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

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

import { memo } from 'react';
function arePropsEqual(prevProps, nextProps) {
    // your code
    return prevProps === nextProps; 
}
export default memo(Button, arePropsEqual);

3. 总结

在实际开发过程中,前端性能问题是一个必须考虑的问题,随着业务的复杂,遇到性能问题的概率也在增高
除此之外,建议将页面进行更小的颗粒化,如果一个过大,当状态发生修改的时候,就会导致整个大组件的渲染,而对组件进行拆分后,粒度变小了,也能够减少子组件不必要的渲染

标签:shouldComponentUpdate,render,渲染,memo,React,如何,组件
From: https://blog.csdn.net/qq_21087199/article/details/136852221

相关文章

  • 【Azure Log A workspace】Azure上很多应用日志收集到Log A workspace后如何来分别各
    问题描述AzureLogAnalyticsWorkspace作为Azure云上统一存储日志的服务,可以由多个服务直接发送日志到LogAWorkspace。如ApplicationInsights,AzureDiagnostic Settings等。只是,当数据都收集到同一个Workspace后,如何来分别是那些资源发送的日志呢?分别占用了多少的存储......
  • TikTok养号如何做?
    根据互联网安全公司Cloudflare的2023年互联网流量回顾,TikTok超过谷歌成为2023年最受欢迎的网站。这意味着现在有大量用户在使用TikTok,在TikTok平台上,你可能会突然出名,可能会突然让您的营销获得回报。但如果你是刚加入TikTok用户,那么你的账号需要小心,不要急于先发布视频。因为......
  • 什么是浏览器指纹识别?Maskfog指纹浏览器如何解决?
    浏览器指纹识别是好是坏?这现在确实是一个有争议的话题。83%的消费者经常或偶尔会根据浏览历史记录看到广告。其实这就是利用了浏览器指纹技术。如果您想了解浏览器指纹识别是什么,那就看下去!一、什么是浏览器指纹识别浏览器指纹是指无需cookie等技术,通过浏览器的各种信息,如......
  • 如何用typeORM制作复杂的嵌套WHERE条件?
    如何用typeORM制作复杂的嵌套WHERE条件?2023-02-1812:00:38 other 阅读:1320本文介绍了如何用typeORM制作复杂的嵌套WHERE条件?的处理方法,对大家解决问题具有一定的参考价值问题描述我有多个嵌套的WHERE条件,希望使用TypeORM生成它们时不会有太多代码重复。SQLWHERE条件应如......
  • 如何回退已经合并的master代码?
    如何回退已经合并的master代码?在CodeUp(一个代码托管平台,类似于GitLab、GitHub等)上撤销已经合并到master分支的提交,你需要遵循以下基本步骤:回滚master分支:如果你想要撤销整个合并操作并恢复到合并前的状态,你可以执行一个反向合并(revertmerge)。在Git中,这通常通过创建一个新......
  • 文本内容如何插入excel表格中的一列,如其他列空自动填充!
    主要功能是从文本文件中读取内容,并插入到Excel文件的特定列中(这里假设是第三列,名称为’Column3’)。以下是代码功能的具体描述:创建一个Tk窗口,布局包含两个标签分别对应Excel文件路径和文本文件路径,以及两个输入框和两个浏览按钮让用户选择文件路径。定义load_excel_file和l......
  • 如何进行设备的非对称性能测试
    非对称性能测试介绍RFC2544是RFC组织提出的用于评测网络互联设备(防火墙、IDS、Switch等)的国际标准。主要是对RFC1242中定义的性能评测参数的具体测试方法、结果的提交形式作了较详细的规定。标准中定义了4个重要的参数:吞吐量(Throughput)、丢包率(LostRate)、时延(Latency)和背靠背(Bac......
  • nuxt3中如何使用Swiper
    项目中新增了banner轮播需求,发现在nuxt3中使用与常规的使用方式不同,所以专门去了解了一下,查看了swiper官网,发现找到的api参数和我使用的对不上,因此很多效果都实现不了,后面发现查找的官网不对,所以设置没有效果。这里记录一下,方便以后使用。原:Swiper中文网-轮播图幻灯片js插件,......
  • 如何使用极狐GitLab Runner 修改日志大小限制
    本文作者:徐晓伟GitLab是一个全球知名的一体化DevOps平台,很多人都通过私有化部署GitLab来进行源代码托管。极狐GitLab是GitLab在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。本文讲述了如何调整极狐GitlabRunner日志大小限制问题测试项目:https......
  • 企业SEO策划方案优化如何实施,CloudNEO免费为企业设计SEO方案
    企业SEO策划方案优化如何实施,CloudNEO免费为企业设计SEO方案在当今数字化时代,搜索引擎优化(SEO)是企业提升在线可见性和吸引潜在客户的关键之一。然而,对于许多企业来说,如何制定和优化SEO策划方案成为了一个挑战。作为专业的数字营销服务提供商,CloudNEO愿意为您免费设计并优化SEO......