Component life cycle

Only class components have a life cycle: create time, update time, unload time

1.1 Life Cycle creation

• constructor: Executed during creation

Function:

1. The bind event changes this
2. Statement of the state
3. Uncontrolled form

• render: executes before component DOM mounting

Action: Render DOM

• componentDidMount: Executes after the component DOM is mounted

What it does: Send Ajax, AXIos requests, and get DOM elements

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor() {
        super(a)console.log('constructor- executed when created ');
        console.log('Get the DOM element :' + document.getElementById('title'));
    }
    render() {
        console.log('render- execute component DOM before mounting ');
        console.log('Get the DOM element :' + document.getElementById('title'));
        return (
            <div>
                <div id="title">Components of</div>
            </div>)}componentDidMount() {
        console.log('componentDidMount- execute after component DOM is mounted ');
        console.log('Get the DOM element :' + document.getElementById('title').innerHTML);
    }
}


ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

The effect

1.2 When the lifecycle is updated

When executed: setState(), forceUpdate(), the component receives new props

1. shouldComponentUpdate
2. rendermethods

• Action: Updates the component DOM
• Be careful not to call it in the Render methodthis.setState() Infinite updates are triggered

3. componentDidUpdate

• Role: initiateajaxrequestsetState

1.2.1 setState ()

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // Triggered when the button is clicked
    handelClick = () = > {
        / / a setState trigger
        this.setState({
            count: this.state.count + 1})}render() {
        console.log('render- call function when setState triggers update ');
        // Use the same render as when you created it, but you can't get the DOM
        console.log('Get the DOM element :' + document.getElementById('title'));
        return (
            <div>
                <div id="title">The current number of gopher hits is {this.state.count}</div>
                <button onClick={this.handelClick}>button</button>
            </div>)}componentDidUpdate() {
        // Function: initiate ajax request setState
        console.log('componentDidUpdate-- call function when setState triggers update ');
        console.log('Get the DOM element :' + document.getElementById('title'));
    }
}
ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

The effect

1.2.2 forceUpdate ()

To see the effect, modify a line of code when the above code click triggers the event, forcing the update to occur

   // Triggered when the button is clicked
    handelClick = () = > {
        / / forceUpdate trigger
        this.forceUpdate()
    }
Copy the code

1.2.3 props ()

Father-son transmission

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // Triggered when the button is clicked
    handelClick = () = > {
        this.setState({
            count: this.state.count + 1})}render() {
        console.log('App---render');
        return (
            <div>{/* References the child component and passes */}<Son count={this.state.count} />
                <button onClick={this.handelClick}>button</button>
            </div>)}componentDidUpdate() {
        console.log('App---componentDidUpdate'); }}class Son extends Component {
    render() {
        console.log('Son---render');
        return <div id="title">The current number of gopher hits is :{this.props. Count}</div>
    }
    componentDidUpdate() {
        console.log('Son---componentDidUpdate');
    }
}

ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

The effect

1.3 Life Cycle Uninstallation

1. Conditions that trigger unload can be reached using conditional rendering
2. Function executedcomponentWillUnMount

Function: Do some cleaning work such as: clear timer, remove event monitoring

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // Triggered when the button is clicked
    handelClick = () = > {
        this.setState({
            count: this.state.count + 1})}render() {
        return (
            <div>{/* References child components and passes */} {this.state.count === 2? 'The gopher was killed' :<Son count={this.state.count} />}

                <button onClick={this.handelClick}>button</button>
            </div>)}}class Son extends Component {
    componentWillUnmount() {
        console.log('componentWillUnmount is called ')}render() {
        return <div id="title">The current number of gopher hits is :{this.props. Count}</div>
    }
}
ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

The effect

Life cycles are not commonly used

static getderivedstatefromprops

static getDerivedStateFromProps

getSnapshotBeforeUpdate()

• static getDerivedStateFromError()
• componentDidCatch()

New full life cycle functions

Older version of the lifecycle hook function