React 性能优化

性能优化

React 性能优化方案,说出来可能有很多,但是那些是所有前端项目、框架都需要做的。如

  • 代码分割,代码压缩,使用生产版本的代码等(前端框架都需要,通用方案)

  • 渲染列表时合理使用 key (vue 也有)

  • 缓存组件(vue 也有)

只有一点是 React 特色的:如何避免无效渲染?(vue 就没有这个困扰,后面再说)

  1. shouldComponentUpdate 简称 SCU

  2. PureComponent 和 memo

  3. 不可变数据 immutable.js

解释 shouldComponentUpdate

  • 复杂项目中,React 会出现一些无效的渲染( 有些可能并不影响性能,不是所有的都需要优化

  • React 提供了 SCU 来让用户自己选择是否优化

  • SCU 返回 true 则渲染,返回 false 则不渲染。默认返回 true

那么问题来了 —— 既然这样,能否将 SCU 都做一个判断,props 和 state 一样,就返回 true 呢?

答案是不能 —— 做演示:1. 借助 propsDemo 改造;2. 使用 push 操作数组;3. 使用 _.isEqual 对比 list ;4. 再分别注释掉 pushSCU 做对比。

  • 回顾之前 setState 的使用,纯函数,不可变值

  • push 会同时改变 nextState 和 this.state 的值,因此被 SCU 拦截并返回false

  • 所以SCU 必须配合不可变值一起使用

  • 为什么默认props 和 state 一样就返回 true:

    • 深度比较可能更加耗费性能,还不如直接返回 true 渲染

PureComponent

  • 与自带 shouldComponentUpdate 比较

  • SCU 中实现了浅比较(只比较函数或数组第一层属性,深层次不管)—— 深度比较太消耗性能

  • 演示 demo (List 使用 PureComponent,使用不可变值)

合理使用 shouldComponentUpdate 和 PureComponent

  • 一定要用不可变值,否则会留坑(这是 React 的基本里面)

  • 推荐使用 PureComponent

  • 同时,state 设计尽量扁平

React.memo

  • '"函数组件中的 PureComponent"'

  • 用于函数组件(Class 组件用 SCU)

  • 对于相同的 props ,会缓存渲染结果

  • 默认只进浅层比较(和 PureComponent 一样)

用法:

不可变值 immutable.js

immutable.js

 const map1 = Immutable.Map({ a: 1, b: 2, c: 3 })const map2 = map1.set('b', 50)map1.get('b') // 2map2.get('b') // 50
  • 专门为 React 设计的“不可变值”工具

  • 基于共享数据(不是深拷贝),速度很快

  • 有一定学习成本和迁移成本,因此仅推荐 复杂、大型 的项目使用

总结一下 React 性能优化

如何避免 React 组件重复渲染

  • SCU 和不可变值

  • PureComponent 和 React.memo

  • immutable.js

  • 按需使用 & state 层级

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

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

相关文章

Tensorflow入门实战 P01-实现手写数字识别mnist

目录 1、背景:MNIST手写数字识别 2、完整代码(Tensorflow): 3、运行过程及结果: 4、小结(还是很清晰的) 5、 展望 🍨 本文为🔗365天深度学习训练营 中的学习记录博客…

Kafka之【生产消息】

消息(Record) 在kafka中传递的数据我们称之为消息(message)或记录(record),所以Kafka发送数据前,需要将待发送的数据封装为指定的数据模型: 相关属性必须在构建数据模型时指定,其中…

深入了解YUM:原理、作用及异常处理最佳实践20240523

深入了解YUM:原理、作用及异常处理最佳实践 引言 作为一名Linux系统管理员或开发者,你一定对软件包管理有深刻的理解。在CentOS等基于RPM的系统中,YUM(Yellowdog Updater, Modified)是一个强大的包管理工具。它不仅简…

本地spark3.5(不整合hive) 集成paimon0.9

spark官网下载集成hadoop的spark包: spark-3.5.1-bin-hadoop3.... 解压后 环境变量配置 SPARK_HOME spark-defaults.conf 中增加一行配置(避免启动spark-sql报错hive元数据连不上): spark.sql.catalogImplementationhive 打开paimon官网: https://paimon.apache.org/docs/mas…

JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)

文章目录 JavaEE技术之分布式事务准备:1. 本地事务回顾1.1 什么是事务1.2 事务的作用1.3 事务ACID四大特性1.4 事务的并发问题1.5 MySQL事务隔离级别1.6 事务相关命令(了解)1.7 事务传播行为(propagation behavior)1.8 伪代码练习1.9 回滚策略1.10 超时事…

144.栈和队列:有效的括号(力扣)

题目描述 代码解决 class Solution { public:bool isValid(string s) {// 如果字符串长度为奇数&#xff0c;不可能是有效的括号字符串if(s.size() % 2 ! 0) return false;// 使用栈来存放括号stack<char> st;// 遍历字符串中的每一个字符for(int i 0; i < s.size();…

Error:(6, 43) java: 程序包org.springframework.data.redis.core不存在

目录 一、在做SpringBoot整合Redis的项目时&#xff0c;报错&#xff1a; 二、尝试 三、解决办法 一、在做SpringBoot整合Redis的项目时&#xff0c;报错&#xff1a; 二、尝试 给依赖加版本号&#xff0c;并且把版本换了个遍&#xff0c;也不行&#xff0c;也去update过ma…

MYSQL变更性别

Salary 表&#xff1a; ----------------------- | Column Name | Type | ----------------------- | id | int | | name | varchar | | sex | ENUM | | salary | int | ----------------------- id 是这个表的主键&#xff…

Parasoft C++Test软件静态分析操作指南_软件质量度量

系列文章目录 Parasoft CTest软件安装指南 Parasoft CTest软件静态分析操作指南_编码规范/标准检查 Parasoft CTest软件静态分析操作指南_软件质量度量 Parasoft CTest软件静态分析_自动提取静态分析数据生成文档 Parasoft CTest软件单元测试_操作指南 Parasoft CTest软件单元…

C语言章节学习归纳--数据类型、运算符与表达式

3.1 C语言的数据类型&#xff08;理解&#xff09; 首先&#xff0c;对变量的定义可以包括三个方面&#xff1a; 数据类型 存储类型 作用域 所谓数据类型是按被定义变量的性质&#xff0c;表示形式&#xff0c;占据存储空间的多少&#xff0c;构造特点来划分的。在C语言中&…

2461. 长度为 K 子数组中的最大和(c++)

给你一个整数数组 nums 和一个整数 k 。请你从 nums 中满足下述条件的全部子数组中找出最大子数组和&#xff1a; 子数组的长度是 k&#xff0c;且子数组中的所有元素 各不相同 。 返回满足题面要求的最大子数组和。如果不存在子数组满足这些条件&#xff0c;返回 0 。 子数…

设计模式6——单例模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 单例模式&#xff08;Singleto…

完成商品属性分组和商品属性关联维护

文章目录 1.前端页面搭建1.复制attrgroup-attr-relation.vue到src/views/modules/commodity下2.加入超链接和引入组件 src/views/modules/commodity/attrgroup.vue1.加入超链接2.引入组件 3.数据池加入变量4.使用组件1.引用组件2.添加方法3.测试&#xff0c;点击关联&#xff0…

建站平台布局结构

建站平台布局结构对于网站的成功至关重要。一个良好的布局结构能够有效地吸引用户&#xff0c;提升用户体验&#xff0c;并且有助于网站的搜索引擎优化&#xff08;SEO&#xff09;。在设计网站布局结构时&#xff0c;需要考虑到用户导航、信息层次结构、页面加载速度等方面&am…

Jackson的使用技巧,实现一个JSON字符串转Map的工具

Jackson Jackson是Java编程语言中使用非常广泛的一个用于处理JSON格式数据的库。它提供了快速、灵活、功能丰富的方式来解析和生成JSON数据。Jackson的一些显著优势包括: 1. 高性能 Jackson在处理大型JSON数据时展现出了优异的性能。它采用了高效的处理方式和算法来解析和…

椋鸟Linux笔记#0:学习Linux前

文章目录 关于LinuxLinux环境的搭建直接安装Linux系统安装在虚拟机上安装为WSL2子系统使用云服务白嫖云服务&#xff08;不是广告&#xff09; 直接控制台连接远程服务器使用XShell连接远程服务器 萌新的学习笔记&#xff0c;写错了恳请斧正。 关于Linux Linux 是一种开源操作…

Android JetPack快速上手

学习地址 【Android Jetpack组件从入门到入坟&#xff0c;全家桶全面学习教程精讲&#xff0c;通俗易懂】 review 研究生期间接触过一部分android开发&#xff0c;近期有个小项目需要进行开发&#xff0c;临时恶补了一下Android相关知识点&#xff0c;突然发现Android新增了…

学习javascript的数组

1.什么是数组? 数组&#xff1a;&#xff08;Array&#xff09;是一种数据类型&#xff0c;属于引用数据类型。 作用&#xff1a;在单个变量名下存储多个数据 2.声明语法 let 数组名 [数据1&#xff0c;数据2......]; 注意事项&#xff1a; 数组是按照顺序保存&#xff0…

企业级大数据平台建设方案

企业级大数据平台建设方案 方案简介硬件软件分布式存储&#xff1a;Foreman作为集群管理工具Sparkcloudera 方案简介 该方案是多年前在Roadstar.ai任职时的建设方案&#xff0c;现将方案部分细节开源&#xff0c;结合本博客的其他文章&#xff0c;能够建立可靠的企业大数据平台…

来盘点我的校园生活(4)

今天我们班出大事了&#xff01; 今天英语老师没来&#xff0c;我们以为其他英语老师来了&#xff0c;但下午一去办公室&#xff0c;我小脑直接萎缩&#xff0c;我都看得怀疑人生了&#xff0c;一个英语老师没有&#xff0c;作业咋办呢&#xff1f; 后来通过18班班主任英语老…