当前位置：首页 > article >正文

【React 】如何提高组件的渲染效率？在React中如何避免不必要的render?

article 2024/12/26 19:48:25

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);