React中的性能优化

2023-11-18

1.所有的this指向都在constructor中绑定,就避免了多次绑定。
this指向问题,只有当this指向我们定义的组件时才能去对state做修改,不去改变this指向,在该方法中this就指向undefined。

2.setState是异步函数
如果在短时间之中多次改变state的值,那么就可以只用改变最后一次state的值,避免多次修改state。

3.虚拟DOM的使用
避免了真实DOM的多次创建,极大提升性能。

4.diff算法
用简单的同层比对算法来比对虚拟DOM。
key值的使用,使得比较速度更快。

5.shouldComponentUpdate
当父组件发生改变,而子组件中的数据没有改变时,就不去重新渲染组件,避免了不必要的渲染。

shouldComponentUpdate(nextProps, nextState) {
		if(nextProps.content !== this.props.content) {
			return true;
		}else {
			return false;
		}
	}

以上的方法都能提升性能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中的性能优化 的相关文章

随机推荐

  • @Configuration和@Bean

    spring Boot提倡约定优于配置 如何将类的生命周期交给spring 1 第一种自己写的类 Controller Service 用 controller service即可 2 第二种 集成其它框架 比如集成shiro权限框架 集成
  • 堆排序(堆的构造及代码实现)

    简介 java系列技术分享 持续更新中 初衷 一起学习 一起进步 坚持不懈 如果文章内容有误与您的想法不一致 欢迎大家在评论区指正 希望这篇文章对你有所帮助 欢迎点赞 收藏 留言 更多文章请点击 文章目录 一 堆的简介 二 堆的实现 2 1
  • golang 接口和方法探讨

    一 方法简介 方法 Go语言里有两种类型的接收者 值接收者和指针接收者 使用值类型接收者定义的方法 在调用的时候 使用的其实是值接收者的一个副本 所以对该值的任何操作 不会影响原来的类型变量 如果我们使用一个指针作为接收者 那么就会其作用了
  • vue-element-admin基本使用

    vue element admin 是开发后台管理系统的一个比较完备的前端解决方案 本地运行体验 git clone https github com panjiachen vue element admin git 从github上拉取代
  • Axure 9.0.0.3699 授权码

    产品经理主力工具 Axure 在2020年5月26日更新了最新的 3699版本 具体更新如下 很多小伙伴在更新后会出现之前的授权无法使用的情况 如果出现这种情况大家可以通过在产品栈查找相对应的版本进行获取最新的授权码 获取地址 https
  • Vue项目中使用@代替src——并在VScode中开启@路径自动提示

    这篇文章是为了记录一下项目里面经常使用的一个配置 路径别名 我自己个取的名 一般的 路径别名 src components src components 以上的路径别名的好处就是 当项目文件较多的时候 可以避免 这样的一层一层的回溯路径 当
  • findbugs使用_程序员技能与成长:使用静态代码分析工具和代码审查

    使用静态代码分析工具 前面的小节介绍了一些编码规范及最佳实践 如果在编码阶段可以很好地遵循这些规范 并践行最佳实践的话 就可以大大提升代码的质量 提高可读性 降低维护成本等 在很多公司内部及开发团队中 为了保证大家都遵循这些规范 都会有静态
  • SD卡容量变小后怎么恢复

    我是因为给linux板子刷系统 所以导致SD卡内存从16G变成了40MB 恢复方法 1 win r 启动命令行 2 输入diskpart回车 运行DISKPART 3 list disk回车 列出电脑的硬盘清单 4 看看你的u盘是哪一个 选
  • 【数据结构 002】 算法复杂度

    1 算法定义 Algorithm Defintion 2 算法特性 Algorithm Feature 输入 有0个或者多个输入 输出 至少1个或者多个输出 有穷性 算法在执行有限的步骤之后 会自动结束而不会出现无限循环 并且每个步骤都在可
  • 阿里资深架构师三年整理出:Java面试核心知识点原理篇文档

    本文是对Java程序员面试必备知识点的总结 详细讲解了JVM原理 多线程 数据结构和算法 分布式缓存 设计模式等内容 希望读者能通过阅读本书对Java的基础原理有更深入 全面的理解 面试官通常会在短短两小时内对面试者的知识结构进行全面了解
  • win电脑C/D盘清理技巧

    dir AD 查看当前路径下的所有文件夹 1 下载 和安装 磁盘文件占用空间分析工具TreeSize Free 可以查看某个目录下的每个文件 文件夹占用的磁盘空间大小 大文件夹使用win自带 的右键属性查看大小会耗时很久 2 把自己安装在C
  • 【华为OD机试真题】不开心的小朋友- python

    题目描述 不开心的小朋友 输入一个数代表摇摇车的数量 在下一行输入一串数字 用空格隔开 每个数字代表不同的小朋友的编号 小朋友的编号不能重复 每个小朋友只有一个编号 小朋友排队坐摇摇车 如果小朋友离开之前没有摇摇车坐视为不开心的小朋友 同现
  • mysql更新区间的数_解决针对MySQL中对于某一个区间段范围的数据更新的情况

    1 在使用更新update的过程中 我们可能会想要更新比如id段在某一个指定范围内的数据 如果我们是想要更新前面多少行的数据的话可以直接 UPDATE tb name SET column name value ORDER BY id AS
  • 华为OD机试 - 滑动窗口最大和 - 滑动窗口(Java 2023 B卷 100分)

    目录 专栏导读 一 题目描述 二 输入描述 三 输出描述 四 解题思路 五 Java算法源码 六 效果展示 1 输入 2 输出 3 说明 华为OD机试 2023B卷题库疯狂收录中 刷题点这里 专栏导读 本专栏收录于 华为OD机试 JAVA
  • 配置多个TOMCAT

    1 把下载好的tomcat解压到想存放的目录 它不用安装的 在官网下载好 一解压就是了 2 打开电脑的 编辑环境变量 配置CATALINA HOME环境变量如图 我这里装了9和10 先配一个CATALINA HOME9 值是tomcat9的
  • Qt样式表-详解

    一 QT样式表简介 1 1 QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离 使得设计皮肤与界面控件分离的软件成为可能 QT样式表是允许用户定制widgets组件外观的强大机制 此外 子类化QStyle也可以定制widgets
  • Latex数学公式方程格式总结

    单行公式有自动标号 一般式子之间行距较大 begin equation T tilde nabla lim Delta v rightarrow 0 frac 1 Delta v left oint s T hat n mathrm d s
  • Java接口以及static和final关键字

    Java接口以及static和final关键字 一 static 二 final 三 让final元素可以初始化 不用固定赋值 四 接口 五 抽象方法 六 接口能够创建对象吗 匿名内部类 七 另一实例 开锁 一 static static代
  • OI考试中及平常练习里的一些低级错误总结

    long long相关 1 没开long long long long开少了 具体地 可能是未对题目可能产生的数值预估 可能是只写了int的读优 忽略long long 2 define int long long出锅 1 比如在遍历图的时
  • React中的性能优化

    1 所有的this指向都在constructor中绑定 就避免了多次绑定 this指向问题 只有当this指向我们定义的组件时才能去对state做修改 不去改变this指向 在该方法中this就指向undefined 2 setState是