preface

If you compare the React life cycle to an ant crawling across a rope, the ant moves from the end of the rope to the end, touching different card hooks in turn. In each React lifecycle, there are similar card hooks, which we call ‘hook functions’. So what are the hook functions in the React lifecycle? How does the React lifecycle flow? Today I will give you a summary of the summary

React lifecycle

The React lifecycle consists of three phases: initialization phase, run-time phase, and destruction phase. Different hook functions are triggered in sequence in the React lifecycle

I. Initialization phase

1. Set the default properties of the component
static defaultProps = {
    name: 'sls',
    age:23
};
//or
Counter.defaltProps={name:'sls'}
Copy the code
2. Set the initialization state of the component
constructor() {
    super();
    this.state = {number: 0}
}
Copy the code
3, componentWillMount ()

When the component is about to be rendered to the page, you can start the timer, send a request to the server, and so on

4, render ()

The component rendering

5, componentDidMount ()

Triggered when the component has been rendered to the page: the page now has an actual DOM element that can be used for DOM-related operations

Second, the operation stage

1, componentWillReceiveProps ()

Emitted when the component receives a property

2, shouldComponentUpdate ()

Fired when the component receives a new property, or when the state of the component changes. Component does not fire when first rendered

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false} // The hook function can receive two arguments, the new property and the state, and returntrue/falseTo control whether the component needs to be updated.Copy the code

Generally we use this function to optimize performance:

When a React project needs to update a widget, it will most likely require the parent component to update its own state. The update of a parent component causes all its children to re-execute the render() method to form a new virtual DOM, and then the diff algorithm is used to compare the structure and attributes of the old and new virtual DOM to determine whether the component needs to be re-rendered

ShouldComponentUpdate () : shouldComponentUpdate() : shouldComponentUpdate() : shouldComponentUpdate() : shouldComponentUpdate() : shouldComponentUpdate() : shouldComponentUpdate(

React, for example, provides a PureComponent class. When our component inherits from it, the component updates by default by comparing the new and old properties and states to determine whether the component is updated. It’s worth noting that PureComponent makes shallow comparisons, so it needs to return a new object or array whenever component state or properties change

3, componentWillUpdate ()

Triggered when a component is about to be updated

4, componentDidUpdate ()

Triggered when the component has been updated. A new DOM element is generated in the page and DOM manipulation can be performed

3. Destruction stage

1, componentWillUnmount ()

Triggered when a component is destroyed. Here we can do some cleanup, such as cleaning up timers, unsubscribing Redux events, and so on.

Interested students can also use the following code to test

Cut the crap and put the code in!

import React from 'react'
import ReactDOM from 'react-dom';

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log('9. Child component will receive new property ');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('10. Do sub-components need to be updated? ');
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log('11. Child components will be updated ');
    }

    componentDidUpdate() {
        console.log('13. Sub-component update completed ');
    }

    componentWillUnmount() {
        console.log('14. Child components will be uninstalled ');
    }

    render() {
        console.log('12. Sub-component mounting ');
        return(<p>{this.props. Number}</p>)}} Class Counter extends React.Component {static defaultProps = {//1,'sls',
        age:23
    };

    constructor() { super(); This. state = {number: 0}}componentWillMount() {
        console.log('3. Before parent component is mounted ');
    }

    componentDidMount() {
        console.log('5. Parent component mount complete ');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('6. Does the parent component need to update? ');
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log('7, parent component will be updated ');
    }

    componentDidUpdate() {
        console.log('8. Parent component update completed ');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log(Render (parent component mount));
        return( <div> <p>{this.state.number}</p> <button onClick={this.handleClick}>+</button> {this.state.number<10? <SubCounter number={this.state.number}/>:null} </div> ) } } ReactDOM.render(<Counter/>, document.getElementById('root'));
Copy the code