Component、PureComponent、Function Component三种组件的特点复习

import React, { Component, PureComponent } from 'react'

// 类组件
class Cmp extends Component {
    render() {
        return (
            <div>
                com
            </div>
        )
    }
}

// pure类组件
class PruCom extends PureComponent {
    render() {
        return (
            <div>
                PruCom
            </div>
        );
    }
}


// function component
function FunctionComponent() {
    return <div>
        functionComponent
    </div>
}


class AreaInfo extends Component {
    componentDidMount() {
        console.log(<FunctionComponent></FunctionComponent>);
        console.log(<PruCom></PruCom>);
        console.log(<Cmp></Cmp>);
    }


    render() {
        return (
            <div>
                <FunctionComponent></FunctionComponent>
                <PruCom></PruCom>
                <Cmp></Cmp>
            </div>
        )
    }
}
export default AreaInfo

组件不同实现方式的差异

1. 继承Component的组件,不管props和state是否变化,组件都会更新,这个时候需要使用生命周期函数shouldComponmentUpdate来控制组件是否需要更新.
2. 继承PureComponent的组件,在比较在props和state的值时,使用的是浅比较,它不会比较对象深层次的值是否相等,性能有很大的提升,这里也是在使用的时候要注意的问题.
3. Function Component不用创建实例,在执行返回值以后,就会将内部的变量全部销毁,消耗比class组件少了很多,如果在利用React Hook中的生命周期函数对组件进行优化,那么在一些不是很复杂的组件中使用Function Component性能是很高的.