使用shouldComponentUpdate进行性能优化

2024-05-14 03:42:29

众所周知，react中props,state值的变化，会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。本文着重回答以下问题：

1：如何使用使用shouldComponentUpdate记性优化；

shouldComponentUpdate(nexrProps) {if (this.props.num === nexrProps.num) {return false}return true;
}

相信大家都知道这种方式，shouldComponentUpdate提供了两个参数nextProps和nextState，表示下一次props和一次state的值，当函数返回false时候，render()方法不执行，组件也就不会渲染，返回true时，组件照常重渲染。此方法就是拿当前props中值和下一次props中的值进行对比，数据相等时，返回false，反之返回true。但是此方法面对复杂的对象时，就没有效果了,比如说props长成这样，就没法应对了，因为在js中，object，array，function属于引用类型，即使改变其中数据，他们指向的还是同一内存地址，所以采用上面的判断就不行了。

 obj: {age: 12,name: 'xioabbao',student: {count: 1}
}

2: 解决方法有三种：

（1）使用setState改变数据之前，先采用es6中assgin进行拷贝，但是assgin只深拷贝的数据的第一层，所以说不是最完美的解决办法。

const o2 = Object.assign({},this.state.obj)o2.student.count = '00000';this.setState({obj: o2,})

（2）使用JSON.parse(JSON.stringfy())进行深拷贝，但是遇到数据为undefined和函数时就会错。

const o2 = JSON.parse(JSON.stringify(this.state.obj))o2.student.count = '00000';this.setState({obj: o2,})

（3）使用immutable.js进行项目的搭建。immutable中讲究数据的不可变性，每次对数据进行操作前，都会自动的对数据进行深拷贝，项目中数据采用immutable的方式，可以轻松解决问题，但是又多了一套API去学习。

此文章属于个人一时见解，希望大家多多指教。

使用shouldComponentUpdate进行性能优化相关推荐

React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
一.痛点在我们的印象中,React 好像就意味着组件化.高性能,我们永远只需要关心数据整体,两次数据之间的 UI 如何变化,则完全交给 React Virtual Dom 的 Diff 算法去做. ...
React 应用的性能优化思路
要点梗概 React 应用主要的性能问题在于多余的处理和组件的 DOM 比对.为了避免这些性能陷阱,你应该尽可能的在 shouldComponentUpdate 中返回 false . 简而言之,归结 ...
react 组件遍历】_从 Context 源码实现谈 React 性能优化
(给前端大全加星标,提升前端技能) 转自:魔术师卡颂学完这篇文章,你会收获: 了解Context的实现原理源码层面掌握React组件的render时机,从而写出高性能的React组件源码层面了解 ...
React进阶—性能优化
React性能优化思路软件的性能优化思路就像生活中去看病,大致是这样的: 使用工具来分析性能瓶颈(找病根) 尝试使用优化技巧解决这些问题(服药) 使用工具测试性能是否确实有提升(疗效确认) Reac ...
使用js在桌面上写一个倒计时器_论一个倒计时器的性能优化之路
原文发表于 2018.05.25,搬运自个人博客. 引子回顾这半年,扛需求能力越来越强,业务代码也是越写越多.但稍一认真看看这些当时为了满足快速上线所码的东西,问题其实还是不少.这次就从一个简单的计 ...
[react] 你知道的react性能优化有哪些方法？
[react] 你知道的react性能优化有哪些方法? shouldComponentUpdate PureComponent :Class Component React.Memo :Functio ...
[react] react的性能优化在哪个生命周期？它优化的原理是什么？
[react] react的性能优化在哪个生命周期?它优化的原理是什么? shouldComponentUpdate 减少不必要的重新渲染个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易 ...
react如何遍历并比较_[前端进阶] 这可能是最通俗易懂的React 渲染原理及性能优化...
如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...
React 组件性能优化之 PureComponent 的使用
文章出自个人博客:https://knightyun.github.io/2021/05/09/js-react-purecomponent,转载请申明在 React 类组件中,如果状态(state ...

最新文章

热门文章