react 之 shouldComponentUpdate / PureComponent / memo 减少组件的渲染次数

目录

shouldComponentUpdate 钩子函数

PureComponent 类

memo 方法

总结

---

shouldComponentUpdate 钩子函数

在react中，父组件重新渲染会造成其所有子组件都重新渲染。当需要设置其某个子组件不重新渲染时，需要使用shouldComponentUpdate钩子函数——在子组件的该生命周期中做判断，是否需要重新渲染。

PureComponent 类

React15.3中新加了一个PureComponent类，用来减少不必要的render渲染次数。适用于class创建的组件，使用时只要把继承类从Component换成PureComponent。

例如：

import React, { PureComponent } from 'react'
export default class List extends PureComponent {
    render() {
        console.log('list render')
        return(
            <div>{this.props.list.title}</div>
        )
    }
}

memo 方法

React 16.6.0中新加了一个memo方法，用来减少不必要的render渲染次数。适用于函数式组件。使用语法：

function Child({seconds}){
    return (<div></div>)
};
export default React.memo(Child)

React.memo()可接受2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新。

总结

可以把memo和PureComponent看作是shouldComponentUpdate的语法糖。

他们的底层原理一致：在被使用时，都会自动加载shouldComponentUpdate函数，当组件更新时，shouldComponentUpdate对props和state进行了一层浅比较，如果组件的props和state都没有发生改变，render方法就不会触发，省去Virtual DOM的生成和对比过程，达到提升性能的目的。

区别在于：memo用于函数式组件，PureComponent用于类组件。