What is a life cycle function

Lifecycle functions are functions that are automatically invoked and executed by the component at some point in time

Question: Is constructor a lifecycle function?

Constructor is also a method that the component will call at any given time, but it is part of ES6 syntax, not a feature of the React component, and therefore does not count as a react component lifecycle function.

Life cycle process

1, the Initialization

Initialization, which initializes data for the props and state, receives props, Initialization state, and some methods in the constructor function. Such as:

constructor(props) {
    super(props);
    this.state = { 
        inputValue: ' '.list: []}this.handleBtnClick = this.handleBtnClick.bind(this)}Copy the code

2, Mounting

Then there is the mount phase of the component.

What is mount? Mount is when a component is first placed on the page.

(1)componentWillMount()

Automatically executed when the component is about to be mounted to the page

(2)render()

Component mount phase

(3)componentDidMount()

Execute after the component is mounted to the page

Note: componentWillMount and componentDidMount are executed once during the life of the component

3, Updation

Updates include props updates and state updates. Both have some lifecycle hooks in common.

(1)shouldComponentUpdate()

The component is automatically executed before it is updated. This hook function returns a Boolean value that determines whether the component is updated later.

(2)componentWillUpdate()

It is executed automatically before the component is updated, but it is executed after shouldComponentUpdate. If shouldComponentUpdate returns true, it executes, otherwise it doesn’t.

(3)render()

The new virtual DOM is compared to the original (diff), and the real DOM is modified.

(4)componentDidUpdate()

Execute immediately after component updates.

ComponentWillRecieveProps (props to update specific)

But props to update the function will also perform a lifecycle componentWillRecieveProps, when it performs?

Accepted data if a component from the parent component, as long as the parent component of the render function was carried out, then the componentWillRecieveProps will be executed. This lifecycle function is not used very often.

4, Unmounting

componentWillUnmount()

Execute when the component is about to be removed.

Life cycle function usage scenarios

1. Avoid unnecessary re-rendering of child components

When the state of the parent component changes, the render function is automatically called and the child component’s render function is called, but sometimes the parent component’s state changes are unrelated to the child component, so there is no need for the child component to call Render again, wasting browser performance. How to solve this problem?

Simply intercept this in shouldComponentUpdate as follows:

// Accept two parameters, respectively props and state, that are passed in
shouldComponentUpdate(nextProps, nextState) {
    // Compare related variables, if different, update
    if(nextProps.xxx ! = =this.props.xxx){
        return true;
    }
    return false;
    // Can also be simplified as:
    //return nextProps.xxx ! == this.props.xxx ? true : false;
}
Copy the code

2. Send Ajax requests

It’s best to send Ajax requests inside componentDidMount. Ajax data is usually retrieved only once, so why not put it in the componentWillMount and Render functions?

If placed in componentWillMount, if ReactNative or server isomorphism is used in the future, it will conflict with other technologies, so we will not go into depth here.

If you put it in a Render function, which in fact is often executed during the component’s life cycle, the request would be sent many times and would not be justified.

The sending request cases are as follows:

import axios from 'axios'
// Omit 1000 lines of code
componentDidMount() {
    axios.get('/api/data')
        .then((a)= > {})
        .catch((a)= >{})}Copy the code

I used to be a Vue player. Now I will learn React. I hope I can help you.