React类组件性能优化之shouldComponentUpdate、React.PureComponent

前言

这两个性能优化方法是对与类组件来说的。有些时候我们setState时，状态值并没有改变，但是相关的组件还是渲染了。比如如下代码的执行

class Test extends React.Component {
    state = {
        value:0
    }
    componentWillUpdate() {
        console.log('Test 渲染了')
    }
    render() {
        return <div>
            {this.state.value}
            <button onClick={()=>{this.setState({value:1})}}>changeValue</button>
             <Testson />
        </div>
    }
}
class Testson extends React.Component {
    componentWillUpdate() {
        console.log('Testson 渲染了')
    }
    render() {
        return <p>76485768</p>
    }
}

点击changeValue后会渲染一次，因为state的状态值改变了。组件会重新渲染。这时value的值为1。但是我们再点一次changeValue时，state的值并没有改变，还是1。组件渲染了。

为了提升性能，我们应该避免不必要的渲染。

shouldComponentUpdate

• nextProps: 组件将会接收的下一个参数props
• nextProps: 组件的下一个状态state

shouldComponentUpdate(nextProps, nextState) {
    return true        
}

返回true时组件会渲染，如果时false则不会渲染；
以上的组件可以这样优化

class Test extends React.Component {
    state = {
        value:0
    }
    componentWillUpdate() {
        console.log('Test 渲染了')
    }
    shouldComponentUpdate(nextProps,nextState) {
        if(this.state.value === nextState.value){
            return false
        }else{
            return true
        }
    }
    render() {
        return <div>
            {this.state.value}
            <button onClick={()=>{this.setState({value:1})}}>changeValue</button>
             <Testson />
        </div>
    }
}

这样就不会多次渲染了

React.PureComponent

这个相对于的是react函数组件的React.memo()的性能优化。

class Test extends React.PureComponent {
    state = {
        value:0
    }
    componentWillUpdate() {
        console.log('Test 渲染了')
    }
    // shouldComponentUpdate(nextProps,nextState) {
    //     if(this.state.value === nextState.value){
    //         return false
    //     }else{
    //         return true
    //     }
    // }
    render() {
        return <div>
            {this.state.value}
            <button onClick={()=>{this.setState({value:1})}}>changeValue</button>
             <Testson />
        </div>
    }
}

使用React.PureComponent的效果和shouldComponentUpdate的效果一样。都是状态不改变，不会重复渲染。