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