Lifecycle function [three yuan Science React] React assembly

First, what is the function of the life cycle

Life Cycle function refers to a function at a certain moment component automatically calls the execution of

Question: constructor is not a life-cycle function?

constructor is also a component in a certain moment method calls, but it is part of the ES6 syntax, not the characteristics of the components react, and therefore do not count as a function of the life cycle of the components react.

Second, lifecycle processes

1、Initialization

First, the Initialization, props initialization state and data in the constructor function receives props, initialization state and a number of methods. Such as:

constructor(props) {
    super(props);
    this.state = { 
        inputValue: '',
        list: []
    }
    this.handleBtnClick = this.handleBtnClick.bind(this)
}
复制代码

2、Mounting

Then mount the stage assembly.

What is the Mount? Mount is the first component to be placed on the page of time.

(1)componentWillMount()

About to be executed automatically in the component mounted to the page of time

(2)render()

Mount assembly stage

(3)componentDidMount()

After the implementation of the components mounted to the page

Note: componentWillMount and componentDidMount performed once in the life cycle of components

3、Updation

Update update includes updates and state of props. Both have some common lifecycle hook.

(1)shouldComponentUpdate()

Components Before updating, will be executed automatically, this hook function returns a Boolean value to determine whether the update after assembly.

(2)componentWillUpdate()

Before the component update, it will automatically execute, but he was executed after shouldComponentUpdate. If shouldComponentUpdate returns true, it will perform, will not execute.

(3)render()

The new virtual DOM with the original for comparison (diff), and then modify the real DOM.

(4)componentDidUpdate()

Executed immediately after the component update.

(Props update endemic) componentWillRecieveProps

But props update will perform an additional life cycle function componentWillRecieveProps, then it executes when?

If a component accepts the data from the parent component, as long as the parent component render function is 重新executed, then the componentWillRecieveProps will be executed. The life-cycle function is not too common.

4、Unmounting

componentWillUnmount()

Executed when the component to be removed.

Third, the use of life-cycle function scene

1, sub-assemblies to avoid unnecessary re-rendering

When the state of the parent component is changed, it will automatically call the render function to invoke render function sub-assemblies, but the status of these changes in a parent component in some cases and sub-assemblies does not matter, and therefore sub-components do not need to re-call render, waste browser performance. how to solve this problem?

Very simple, shouldComponentUpdate subassemblies here to intercept it, as follows:

//接受两个参数，分别是新传进来的props和state
shouldComponentUpdate(nextProps, nextState) {
    //进行相关变量的比对，如果不一样则更新
    if(nextProps.xxx !== this.props.xxx){
        return true;
    }
    return false;
    //也可以简化为:
    //return nextProps.xxx !== this.props.xxx ? true : false;
}
复制代码

2, Ajax requests

Ajax preferably sends a request componentDidMount inside. Generally Ajax need to get data only once, so why not put componentWillMount and render function inside it?

If placed inside componentWillMount the future, if the server uses ReactNative or isomorphic, create conflicts and other technologies, we do not make in-depth.

If you placed render function which, in fact, render the life cycle of components is often performed, then the request will be sent very many times, but also unreasonable.

Sending a request case are as follows:

import axios from 'axios'
//省略1000行代码
componentDidMount() {
    axios.get('/api/data')
        .then(() => {})
        .catch(() => {})
}
复制代码

Before Vue is a player, and now to learn React, a small sum, hoping to help you.

Reproduced in: https: //juejin.im/post/5d07627de51d4550723b13f5