PureComponent的使用指南

前言

React在15.3版本以后出现了PureComponent组件，作用是减少继承该组件的组件渲染的次数从而达到优化性能的地步。只要让组件继承PureComponent就可以减少组件render的次数，从而提高应用的性能。

原理

这里小编推荐一个福利，更多精彩内容请点击链接，点击这里

首先我们上PureComponent的源代码

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextStat e);
}
return shouldUpdate;

shallowEqual从字面意思讲是"浅比较"，那么什么事浅比较呢？
就是比较一个旧的props和新props的或者旧的state和新的state的长度是否一致，key是是否相同，以及它们对应的引用是否发生改变。仅仅做了一层的比较。所以这才叫做浅比较。

因此我们可以看到，当props或者state发生改变时，并不是直接去渲染，而是做了一层比较，才决定是否重新渲染该组件。

使用

PureComponent的使用需要注意一些地方，因为它做了shallowEqual操作，所以在使用PureComponent的时候需要
注意props和state的引用是否发生改变，如果引用没有发生改变，当你在setState的时候也不会重新渲染

举个栗子

List组件继承PureComponent

import React from 'react'

class List extends React.PureComponent{
    render(){
        const {list} = this.props;
        return (
            <ul>
                {
                    list.map((item,idx)=>{
                        return (
                            <li key={idx}>
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}
export default List;

App组件继承自PureComponent

import List from './List'
class App extends React.PureComponent{
    state = {
        array:[1,2,3]
    }
    click(){
        const {array} = this.state;
        array.push(4);
        this.setState({array:array})
    }
    render(){
        const {array} = this.state;
        return (
            <div>
                <List list={array} />
                <button onClick={this.click.bind(this)}>测试</button>
            </div>
        )
    }
}

这时候点击button，你会发现页面没有任何改变。原因就是array数组的引用没有变化。
如果App继承自Component,当你调用setState的时候，是不管三七二十一，组件都会去重新渲染一遍。

这时候把click事件做修改

click(){
        const {array} = this.state;
        array.push(4);
        const newArray = [].concat(array)
        this.setState({array:newArray})
    }

这时候点击button，你会发现页面发生了改变。原因就是array数组的引用发生变化。

总结

从上面我们发现PureComponent并不是不发生重新渲染，而是在满足不了的条件下才会去帮我们重新渲染。
所以PureComponent真正起到优化的地方是在纯组件上，也就是仅仅用来展示的组件。这样会避免展示的组件不必要的多次重复渲染。在一些复杂组件上用了也没有什么关系，只是在浅比较这一层就过不了，但是一定要记得props和state不可以是同一个引用。

react+webpack4+react-router5+react-loadable+mobx系列文章
react+webpack4搭建前端项目（一）基础项目搭建
 react+webpack4搭建前端项目（二）react全家桶的使用
 react+webpack4搭建前端项目（三）打包优化

最后编辑于：2021.12.14 10:36:52