RN Life cycle _react-native

Overview

In Android development, each view has its own lifecycle. Also in react native, the component has its own lifecycle. (We can assume that the view in Android is similar to the React native component). Let's look at the life cycle of the react native below.

As follows:

We can also understand three stages:

The creation phase: that is, the getinitalstate of the lifecycle to the componetdidmout phase, the loading of the components completed at this stage, and the initialization of some numeric values.

Refresh phase: The life cycle in the bottom-left corner of the first figure, which is the component's runtime and interaction phase, which handles the interaction and refresh of the component's interface by changing attributes (props) or States (state).

The destruction phase: that is, the componetwillunmpunt phase of the lifecycle, where the component is destroyed.

After understanding the sequence of life cycle execution above, we try to write a component and print out each lifecycle.

Here I did an operation like this initializes a text component and then presses to change a value in the state.

Life cycle Getdefaultprops

In this function, you will initialize some of the default properties, usually put the fixed content in the process, and the global call only once, the property content can not be modified again. Get the property value through the This.props. property

The initialization property in ES5 is called this way

Getdefaultprops () {
    return{
        ...
    }
}

You can write this in ES6.

The first
component name. Defaultprops = {
    ...
}
The second type of
static Defaultprops = {
    ...
}

Getinitialstate

Here is the initialization of some States (state), unlike Getdefaultprops, the contents of state can be modified, and the status value can be obtained by this.state. State, and the state value is modified by This.setstate. As follows

function () {
    this.setstate ({
        //Status: Status Value
        ...
    });
}

Attention

In the ES5 syntax this is written getinitialstate.

Getinitialstate () {
    return{
        ...
    };
}

In the ES6

State = {
    ...
}

When we call the This.setstate, it's time to refresh the component. Componentwillmount

A life cycle function that is called back before the component (render) is loaded. Render

This approach is like the OnCreate method in an activity in Android, where the layout is loaded.
One place to note is that the return is written with an XML and can only have one top-level element
Use the following:

Correct wording
render () {return
    (
      <view style={styles.container}>
      </View>
    );
}
Error writing
render () {return
    (
      <view style={styles.container}>
      </View>

      <view style={styles.container}>
      </View>
    );
}

Componentdidmount

This method is called after the render is executed, and it will normally be done here, such as the network request, setting the delay or timing. Componentwillreceiveprops

This method is the method that is invoked when the parent element modifies the component property (props). Shouldcomponentupdate

When this method is invoked when the this.setstate or parent element is invoked to modify the component props, you can return False or true to control whether the component is executed, or if it returns false. Componentwillupdate

This method is similar to Componentwillmount, which is called before the component refreshes. The call render refreshes the component after execution. Componentdidupdate

Component refreshes the method that completes the call. Componentwillunmount

Called when a component is destroyed