REACT性能优化之PureComponent和React.Component

当父组件渲染时，子组件也会跟着渲染，但是当子组件状态未发生改变时，我们不需要让它再次渲染浪费性能。

类组件PureComponent：我们可以让其继承PureComponent，如果一个组件继承了PureComponent，它里面的状态没有发生改变，那么它就不会重新渲染。

import React from "react"
import ReactDOM from "react-dom"
class Father extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.setState({
                date: new Date()
            })
        }, 1000)
    }
    render() {
        console.log("父组件的 render")
        return (
            <div>
                <div>{this.state.date.toString()}</div>
                <Child></Child>
            </div>
        )
    }
}
class Child extends React.PureComponent {
    render(){
        console.log('子组件的 render');
        return (
            <div>子组件</div>
        )
    }
}
ReactDOM.render(<Father />, window.app)

函数组件React.memo：如果一个组件是函数式组件，可以使用React.memo将不需要重新渲染的组件给包起来，以提升性能。

import React from "react"
import ReactDOM from "react-dom"
class Father extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.setState({
                date: new Date()
            })
        }, 1000)
    }
    render() {
        console.log("父组件的 render")
        return (
            <div>
                <div>{this.state.date.toString()}</div>
                <C></C>
            </div>
        )
    }
}
function Child(){
    console.log('子组件的 render');
    return (
        <div>子组件</div>
    )
};
let C = React.memo(Child)
ReactDOM.render(<Father />, window.app)

效果图