一、概念

shouldComponentUpdate简称SCU，是React中性能优化的重要一环。

shouldComponentUpdate(nextProps, nextState) {// 判断是否需要被渲染，如果需要则返回true，否则返回false if (nextProps.b === this.props.b) {return false;} else {return true;}
}

二、适用场景

react同一父组件的所有子组件中有一个更新，剩下的所有子组件都会重新渲染，但是为了性能，我们不需要让未更新依赖的组件更新。SCU就是解决这个未更新依赖的组件的重新渲染问题。

代码演示：

运行结果：

可以看到虽然只有组件一有数据更新，但所有组件都被重新渲染加载了。这时候就需要用到SCU了。

三、使用方法

3.1 基本使用方法之一

为了方便演示我先将三四号子组件注释掉了。

注意这个方法是浅比较的scu。

代码演示：

运行结果：

可以看到，只有更新的组件进行了重新加载。未更新的组件并没有受到影响。

3.2 PureComponent方法

类组件 extends pureComponent的时候当前组件也是浅比较的scu

代码展示：

运行结果：

可以看到，第三组件只有在首屏时加载一次，而后再没有加载，说明方法成功

3.3 React.memo高阶组件

React.memo 这个高阶函数可以叫高阶组件

React.memo 这个高阶组件做scu 也是浅比较的scu

代码展示：

运行结果：

3.4 lodash.isEqual方法

多层的对象要进行比较，使用lodash 提供的递归深度比较。

（1）安装第三方依赖包 cnpm i -S lodash

（2）使用 lodash.isEqual

代码展示：

运行结果：

React之SCU（性能优化篇）相关推荐

秋色园QBlog技术原理解析：性能优化篇：用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...
秋色园QBlog技术原理解析：性能优化篇：数据库文章表分表及分库减压方案(十五)...
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
C语言嵌入式系统编程修炼之道——性能优化篇
C语言嵌入式系统编程修炼之道--性能优化篇作者:宋宝华 e-mail:[email]21cnbao@21cn.com[/email] 1.使用宏定义在C语言中,宏是产生内嵌代码的唯一方法.对于嵌 ...
在网上看到和篇关于sql server 2005的性能优化篇，觉得写得很好。
在网上看到和篇关于sql server 2005的性能优化篇,觉得写得很好. SQL Server2005扩展函数已经不是一件什么新鲜的事了,但是我看网上的大部分都是说聚合函数,例子也比较浅,那么这里 ...
秋色园QBlog技术原理解析：性能优化篇：打印页面SQL，全局的SQL语句优化(十三)...
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
Android进阶：性能优化篇 Android进阶：性能优化篇
Android进阶:性能优化篇分类:Android 性能优化2011-08-09 17:06585人阅读评论(0)收藏举报一.在使用Gallery控件时,如果载入的图片过多,过大,就很容易出现Ou ...
React有哪些性能优化的手段？
React有哪些性能优化的手段? 1.使用纯组件: 2.使用 React.memo 进行组件记忆(React.memo 是一个高阶组件),对于相同的输入,不重复执行: 3.如果是类组件,使用 sho ...
秋色园QBlog技术原理解析：性能优化篇：access的并发极限及超级分库分散并发方案(十六)...
上节回顾: 上节秋色园QBlog技术原理解析:性能优化篇:数据库文章表分表及分库减压方案(十五) 中, 介绍了秋色园QBlog 在性能优化方面,从技术的优化手段,开始步入数据库设计优化,并从数据的 ...
我在大厂写React学到了什么？性能优化篇
前言我工作中的技术栈主要是 React + TypeScript,这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化,或者更好的代码组织. 性能优化的重要性不用多说,谷歌发布 ...

React之SCU（性能优化篇）

一、概念

二、适用场景

三、使用方法

3.1 基本使用方法之一

3.2 PureComponent方法

3.3 React.memo高阶组件

3.4 lodash.isEqual方法

React之SCU（性能优化篇）相关推荐

最新文章

热门文章

React之SCU（性能优化篇）

一、概念

二、适用场景

三、使用方法

3.1 基本使用方法 之一

3.2 PureComponent方法

3.3 React.memo高阶组件

3.4 lodash.isEqual方法

React之SCU（性能优化篇）相关推荐

最新文章

热门文章

3.1 基本使用方法之一