新手建设html5网站,百度的搜索引擎优化,网站建设钅金手指排名十五,如何快速做网站面试官#xff1a;说说你是如何提高组件的渲染效率的#xff1f;在React中如何避免不必要的render#xff1f; 一、是什么
react 基于虚拟 DOM 和高效 Diff 算法的完美配合#xff0c;实现了对 DOM 最小粒度的更新#xff0c;大多数情况下#xff0c;React 对 DOM 的渲染…面试官说说你是如何提高组件的渲染效率的在React中如何避免不必要的render 一、是什么
react 基于虚拟 DOM 和高效 Diff 算法的完美配合实现了对 DOM 最小粒度的更新大多数情况下React 对 DOM 的渲染效率足以我们的业务日常
复杂业务场景下性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能避免不必要的渲染则是业务中常见的优化手段之一
二、如何做
在之前文章中我们了解到render的触发时机简单来讲就是类组件通过调用setState方法 就会导致render父组件一旦发生render渲染子组件一定也会执行render渲染
从上面可以看到父组件渲染导致子组件渲染子组件并没有发生任何改变这时候就可以从避免无谓的渲染具体实现的方式有如下
shouldComponentUpdatePureComponentReact.memo
shouldComponentUpdate
通过shouldComponentUpdate生命周期函数来比对 state 和 props确定是否要重新渲染
默认情况下返回true表示重新渲染如果不希望组件重新渲染返回 false 即可
PureComponent
跟shouldComponentUpdate 原理基本一致通过对 props 和 state的浅比较结果来实现 shouldComponentUpdate源码大致如下
if (this._compositeType CompositeTypes.PureClass) {shouldUpdate !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}shallowEqual对应方法大致如下
const hasOwnProperty Object.prototype.hasOwnProperty;/*** is 方法来判断两个值是否是相等的值为何这么写可以移步 MDN 的文档* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is*/
function is(x: mixed, y: mixed): boolean {if (x y) {return x ! 0 || y ! 0 || 1 / x 1 / y;} else {return x ! x y ! y;}
}function shallowEqual(objA: mixed, objB: mixed): boolean {// 首先对基本类型进行比较if (is(objA, objB)) {return true;}if (typeof objA ! object || objA null ||typeof objB ! object || objB null) {return false;}const keysA Object.keys(objA);const keysB Object.keys(objB);// 长度不相等直接返回falseif (keysA.length ! keysB.length) {return false;}// key相等的情况下再去循环比较for (let i 0; i keysA.length; i) {if (!hasOwnProperty.call(objB, keysA[i]) ||!is(objA[keysA[i]], objB[keysA[i]])) {return false;}}return true;
}当对象包含复杂的数据结构时对象深层的数据已改变却没有触发 render
注意在react中是不建议使用深层次结构的数据
React.memo
React.memo用来缓存组件的渲染避免不必要的更新其实也是一个高阶组件与 PureComponent 十分类似。但不同的是 React.memo 只能用于函数组件
import { memo } from react;function Button(props) {// Component code
}export default memo(Button);如果需要深层次比较这时候可以给memo第二个参数传递比较函数
function arePropsEqual(prevProps, nextProps) {// your codereturn prevProps nextProps;
}export default memo(Button, arePropsEqual);三、总结
在实际开发过程中前端性能问题是一个必须考虑的问题随着业务的复杂遇到性能问题的概率也在增高
除此之外建议将页面进行更小的颗粒化如果一个过大当状态发生修改的时候就会导致整个大组件的渲染而对组件进行拆分后粒度变小了也能够减少子组件不必要的渲染
参考文献
https://juejin.cn/post/6844903781679759367#heading-12https://whyta.cn/post/caa00364c45d/
