使用shouldComponent和PureComponent实现react类组件优化

本文探讨了React类组件在更新时导致的效率问题，包括只要执行setState()就会触发渲染，以及父组件更新会强制子组件渲染。为提高性能，文章建议使用PureComponent或重写shouldComponentUpdate方法来比较新旧状态和属性。示例中展示了如何通过PureComponent实现高效渲染，避免不必要的组件重新渲染。

react类组件优化

Component的2个问题

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

例子：

import React, { Component } from 'react'
import "./index.css"
export default class Parent extends Component {
    state = {
        carName: "奥迪A6L"
    }
    changeCarName = () => {
        // this.setState({
        //     carName: "BMW"
        // })
        this.setState({}) //问题1：即使传入的是一个空对象即没有修改state中的数据也会使得当前组件和子组件都会重新渲染，这一点并不好
    }
    render() {
        console.log("parent -- render");
        return (
            <div className='parent'>
                <h3>我是parent父组件</h3>
                <span>我的车名字是：{this.state.carName}</span><br />
                <button onClick={this.changeCarName} style={{ margin: "30px" }}>点我换车</button>

                {/* 将车的信息传给子组件，给子组件显示 */}
                {/* <Child carName={this.state.carName} /> */}
                {/* 问题2：如果父组件state数据修改，必定会引起父组件重新render，父组件render，就会使得子组件也会重新render，不管子组件的state、或者props数据是否发生变化，所以这样就会使得组件更新渲染性能较差，这一点我们可以使用shouldComponentUpdate生命周期钩子或者使用村组件pureComponent来实现子组件不会重新渲染的现象 */}
                <Child />
            </div>
        )
    }
}


class Child extends Component {
    render() {
        console.log("Child -- render");
        return (
            <div className='child'>

                <h3>我是Child子组件</h3>
                {/* <span>车的信息是：{this.props.carName}</span> */}
            </div>
        )
    }
}

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 
	重写shouldComponentUpdate()方法
	比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  
	使用PureComponent
	PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
	注意: 
		只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
		不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

例子：

// 引入纯组件pureComponent实现了组件高性能渲染。PureComponent底层就已经写了shouldComponent钩子逻辑
import React, { PureComponent } from 'react'
import "./index.css"
export default class Parent extends PureComponent {
    state = {
        carName: "奥迪A6L"
    }
    changeCarName = () => {
        this.setState({
            carName: "BMW"
        })
        // this.setState({}) //问题1：即使传入的是一个空对象即没有修改state中的数据也会使得当前组件和子组件都会重新渲染，这一点并不好
    }
    // 其实pureComponent底层是实现了shouldComponentUpdate
    // 更新阀门，他可以接收到两个参数的，即nextProps,nextState
    // shouldComponentUpdate(nextProps, nextState) {
    //     // this.state指当前组件state，nextState为即将更改的状态state
    //     console.log(this.state, nextState);
    //     for (const key in nextState) {
    //         if (nextState[key] !== this.state[key]) { //当发现key对应的value发生改变时即state状态改变，就返回true打开更新阀门使得组件重新render
    //             return true
    //         }
    //     }
    //     return false
    // }
    render() {
        console.log("parent -- render");
        return (
            <div className='parent'>
                <h3>我是parent父组件</h3>
                <span>我的车名字是：{this.state.carName}</span><br />
                <button onClick={this.changeCarName} style={{ margin: "30px" }}>点我换车</button>

                {/* 将车的信息传给子组件，给子组件显示 */}
                <Child carName={"奥拓"} />
                {/* 问题2：如果父组件state数据修改，必定会引起父组件重新render，父组件render，就会使得子组件也会重新render，不管子组件的state、或者props数据是否发生变化，所以这样就会使得组件更新渲染性能较差，这一点我们可以使用shouldComponentUpdate生命周期钩子或者使用村组件pureComponent来实现子组件不会重新渲染的现象 */}
                {/* <Child /> */}
            </div>
        )
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps, nextState) {
    //     // this.props指当前组件的props，nextProps为即将更改的父组件传递的props
    //     console.log(this.props, nextProps);
    //     for (const key in nextProps) {
    //         if (nextProps[key] !== this.props[key]) { //当发现key对应的value发生改变时即state状态改变，就返回true打开更新阀门使得组件重新render
    //             return true
    //         }
    //     }
    //     return false
    // }
    render() {
        console.log("Child -- render");
        return (
            <div className='child'>

                <h3>我是Child子组件</h3>
                <span>车的信息是：{this.props.carName}</span>
            </div>
        )
    }
}