PureComponent

1. 什么是纯组件

纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染。

2. 什么是浅层比较

比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。

3. 如何实现纯组件

类组件继承PureComponent类，函数组件使用memo方法

4. 为什么不直接进行diff操作，而是要先进行浅层比较，浅层比较难道没有性能消耗吗

和进行diff比较操作相比，浅层比较将消耗更少的性能。diff操作会重新遍历整颗virtualDOM树，而浅层比较只操作当前组件的state和props.

下面代码定义2个组件，一个普通组件，一个纯组件，在APP里面设置一个定时器，看下下面普通组件一直重新渲染，而纯组件则只渲染一次。

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


class App extends Component {
    
    constructor() {
        super()

        this.state = {
            name: '张三'
        }
    }

    updateName() {
        setInterval(() => {
            this.setState({
                name: '张三'
            })
        }, 1000)
    }

    // 当组件挂载后
    componentDidMount() {
        this.updateName()
    }

    render(state) {
        return  <div>
            App {this.state.name}
            <ReguarComponent name={this.state.name} />
            <PureComponentDemo name={this.state.name} />
            </div>
    }
}

class ReguarComponent extends Component {
    render() {
       console.log('ReguarComponent')     
       return <div>{this.props.name}</div>
    }
}
 
class PureComponentDemo extends PureComponent {
    render() {
       console.log('PureComponentDemo')     
       return <div>{this.props.name}</div>
    }
}

以上就是react性能优化之纯组件PureComponent全部内容,感谢大家支持自学php网。