前言

在开发过程中,肯定会出现层层嵌套的关系组件,当我们使用Component时,父组件中的state或者props发生更新时,无论子组件中的state和props是否更新,都会触发子组件的更新,会导致很多没有必要的render,浪费很多性能。今天这这篇文章就教大家如何来解决这个问题

问题重现

先来看如下代码案例：
应该比较好理解，页面中引入了三个组件，然后点击按钮会触发state的改变

import React, { Component } from 'react'

export class Root extends Component {
    state = {
        num: 0
    }
    add = () => {
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (
            <div>Root Page
                <Header />
                <Main />
                <Footer />
                <p>{this.state.num}</p>
                <button onClick={this.add}>add</button>
            </div>
        )
    }
}

class Main extends Component {
    render() {
        console.log('Main组件渲染了')
        return <div>Main</div>
    }
}

class Header extends Component {
    render() {
        console.log('Header组件渲染了')
        return <div>Header</div>
    }
}

class Footer extends Component {
    render() {
        console.log('Footer组件渲染了')
        return <div>Footer</div>
    }
}

export default Root

运行看一下结果：

看起来没有问题，第一次刷新页面，组件渲染，但是我们点击按钮再来看一看：

可以看到，当state发生改变后，我们的组件又都重新渲染了一遍，每一次更新数据都要重新渲染，这样就会出现很多不必要的render，浪费性能，下面来看看如何去解决

问题解决

方案1.使用shouldComponentUpdate生命周期判断

对于上述问题，我们可以根据最新的props和最新的state去判断是否需要调用render方法，所以我们只需要控制子组件进行判断，不让它进行渲染

所以这个判断可以在shouldComponentUpdate生命周期中进行，该生命周期有两个参数nextProps,和nextState，所以我们可以改写成如下：

class Main extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.num !== nextProps.num) {
            return true
        }
        return false
    }
    render() {
        console.log('Main组件渲染了')
        return <div>Main</div>
    }
}

class Header extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.num !== nextProps.num) {
            return true
        }
        return false
    }
    render() {
        console.log('Header组件渲染了')
        return <div>Header</div>
    }
}

这样的话进行判断的组件在点击按钮的时候就不会进行更新，但是这个方法不是很推荐，因为我们需要手动去给每个子组件的这个生命周期添加条件判断，所以下面我们来看一下另一个方法

方案2.使用PureComponent

引入PureComponent和使用PureComponent,只需要吧所有的Component改为PureComponent即可

import React, { PureComponent } from 'react'

export class Root extends PureComponent {
    state = {
        num: 0
    }
    add = () => {
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (
            <div>Root Page
                <Header />
                <Main />
                <Footer />
                <p>{this.state.num}</p>
                <button onClick={this.add}>add</button>
            </div>
        )
    }
}
class Main extends PureComponent {
    render() {
        console.log('Main组件渲染了')
        return <div>Main</div>
    }
}

class Header extends PureComponent {
    render() {
        console.log('Header组件渲染了')
        return <div>Header</div>
    }
}

class Footer extends PureComponent {
    render() {
        console.log('Footer组件渲染了')
        return <div>Footer</div>
    }
}

export default Root

我们再来看结果，发现点击按钮，子组件并不会重复刷新
所以一般我们会用PureComponent代替Component。简单来说PureComponent实现了shouldComponentUpdate，PureComponent通过props和state进行浅比较,浅比较是react源码中的一个内置函数，它替代了shouldComponentUpdate，它只比较外层数据结构,只要外层相同,则认为没有变化,不会深层次去比较数据。PureComponent真正起作用的时候,只是在一些纯展示的组件上

PureComponent原理

当组件更新的时候,如果组件的props和state都没有发生改变的时候,render方法就不会触发，省去了virtualDOM的生成和对比的过程,所以它能达到提升新能的目的。

PureComponent存在的一些问题

1、不可以在函数式组件上使用
2、进行浅比较，深层次的数据不一致，有可能会导致页面得不到更新。
3、不太适合使用在含有多层嵌套对象的state和props中。