Reactnative Development--The life cycle of components

reactnative Development--The life cycle of components Create component using ES6 syntax

I looked at the information about the life cycle of the components in react native on the internet, and found that most of the introductions were Reactclass.create creates the components in this way, the component creates the components, the life cycle is first executed and Getdefaultprops and getinitialstate.

The way I created component, I used the ES6 notation, to customize the way class inherits from React.component. This approach does not support getdefaultprops and getinitialstate in this way to get props and state. Instead, the properties in the class are used to obtain the.

Use ES6: The static defaultprops attribute is used instead of the original getdefaultprops to obtain the attribute and this way;
Replace the original getinitialstate with the state attribute;

Example:

Class Note extends Component {
    constructor () {
        super ();
    }

    Getinitialstate () {
    //     Console.log (' getinitialstate. ');  the initial value of return this.state;
    }
    ////
    Getdefaultprops () {
    //     Console.log (' Getdefaultprops. ');  return this.props Initial value
    //}/////
    above 2 functions, can only be used in React.createclass () mode.
    //Current use extends component in this way, we use the property state instead of the Getinitialstate function,
    //replace getdefaultprops with the static Defaultprops property.
    //

    /**
     * Sets the initial value of the this.props.
     *
     * @type {{value:string}}
     *
    /static Defaultprops = {value: ' This is the default props '}

    /**
     * Set the initial value of the this.state.
     *
     * @type {{value:string}}
     *
    /state = {value: ' This is initial state. '}

life cycle Diagram

I drew a component of the declaration cycle diagram, the picture is ugly ~ everybody don't mind ha ~, the amount ~ If the great God has what good flowchart tool can leave a message to me to introduce.

Declaration cycle we divide it into three parts:
1. Initialize and Mount
Execute constructor->componentwillmount->render->componentdidmount
This process is performed only once in the life cycle of the component. Once the Componentdidmount is executed, the component enters the running state.
2. Operation phase
When the props changes, the Componentwillreceiveprops is first recalled and the new props is passed in. A series of callback methods related to the update interface are then executed.
When state changes, the update-related callback method is executed.
Update the relevant fallback method:
1, shouldcomponentupdate the function returns a bool value to determine whether the interface needs to be updated.
2. This function will be recalled before Componentwillupdate update.
3. Render executes this function again, this function returns the subcomponent information.
4, Componentdidupdate wait for the update to complete the callback
3. Uninstall phase
When the component is about to be unloaded, callback the Componentwillunmount function back first. life-Cycle related functions

function	Description
void Componentwillmount ()	The function is only executed once, it executes before the render is initialized, and when it is done, the render function is immediately called by the React native framework
Reactclass render ()	This function is executed multiple times and is a very important function to return our UI component information
void Componentdidmount ()	The function executes once and is called after the component initialization render is complete.
void Componentwillreceiveprops (Nextprops)	If the Reactnative component receives a new props, the function is called back, and the callback parameter nextprops is the new props
BOOL Shouldcomponentupdate (Nextprops, Nextstate)	If the Reactnative component receives a new props or a new state, the function is called, it receives 2 parameters, the first is the new props, the second is the new state, and the function needs to return a bool value, Used to tell the reactnative framework whether reactnative need to re-render this component for this change
void Componentwillupdate (Nextprops, Nextstate)	This function is called before the reactnative framework re-renders the reactnative component. Developers can prepare for the upcoming re-rendering in this function, but developers cannot change the value of the state machine variable again through this.setstate in this function
void Componentdidupdate (Prevprops, Prevstate)	The React native framework calls this function after re-rendering the reactnative component, and the props and state before rendering when passing in two parameters
void Componentwillunmount ()	This function will execute before the react native component is unloaded

Code

Here is the code for the life cycle of my test life component:

/** * Created by Blueberry on 6/5/2017. * * Reference Source: Reactclass.js */import React, {Component} from ' React ' import reactnative, {appregistry, View, Text, Button}
    From ' react-native ' class Note extends Component {constructor () {super ();
    }//Getinitialstate () {//Console.log (' getinitialstate. ');
    The initial value of return this.state;
    }////Getdefaultprops () {//Console.log (' Getdefaultprops. ');
    return This.props initial value//}////+ 2 functions, can only be used in React.createclass () mode.
    Currently using extends component this way, we use the property state instead of the getinitialstate function,//replace getdefaultprops with the static Defaultprops property.
     /** * Sets the initial value of the this.props. * * @type {{value:string}} */static Defaultprops = {value: ' This is default props '}/** * Set this
     The initial value of the. State.

    * * @type {{value:string}} */state = {value: ' This is initial state. '} /** * The first callback function executed only once during the declaration period of the component, after which the reactnative calls the component immediately after the function is executed.The Render method.
    */Componentwillmount () {console.log (' componentwillmount ');
     }/** * is used to render the interface.
        * * @returns {XML} */Render () {Console.log (' render '); Return (<view > <Text> Property Initial value: {this.props.value} {' \ n '} state initial value:
                    {This.state.value} </Text> <button title= "Change State" onpress={() = {
     This.setstate ({value: ' I changed '})}}/> </View>)}/**
     * This function is executed only once during the declaration period of the component, which is executed after the initialization of the render is complete.
    */Componentdidmount () {console.log (' componentdidmount ');
     /** * After the component rendering is complete, when the Reactnative component receives the new props, the function is called, and the function takes an object parameter, which is the newly props in object. * @param nextprops New props */Componentwillreceiveprops (nextprops) {console.log (' Componentwillreceivepro
    ps ' + nextprops.value); }/** * After component rendering is complete, when the Reactnative component receives a new state orProps, this function will be called. It receives two object parameters, the first of which is the new * props, and the second one is the new state. The function also needs to return a bool value that tells Reactnative whether Reactnative needs to re-render this component for this change.
     If the * function returns FALSE,REACT Native will not render this component again. * @param nextprops New props * @param nextstate New state * @returns {Boolean} need to re-render this component */Shouldcompone
        Ntupdate (Nextprops, nextstate) {console.log (' shouldcomponentupdate ');
    return true;
     }/** * Reactnative component after the initialization rendering is complete, the React native framework calls this function before the Reactnative component re-renders the component.
        * @param nextprops New props * @param nextstate new state */Componentwillupdate (Nextprops, nextstate) {
    Console.log (' componentwillupdate ');
     }/** * Reactnative component after the initialization rendering is complete, the reactnative framework calls this function after the re-render component is complete.
        * @param prevprops New props * @param prevstate new state */Componentdidupdate (Prevprops, prevstate) {
    Console.log (' componentdidupdate ');
     /** * Called before the component is unloaded.
     * This function has no parameters and does not require a return value. */Componentwillunmount () {Console.Log (' Componentwillunmount ');
 }}/** * In order to test whether the callback function after changing the note component's props is executed, all define a Notewrapper class. */export default class Notewrapper extends Component {state = {value: ' From parent '} render () {Retur N (<view style={{backgroundcolor: ' Grey ', flex:1,}}> <note {. . this.state}/> <button title= "Change props" onpress={() = {This
                . SetState ({value: ' changed '});
}}/> </View>)}} appregistry.registercomponent (' Note ', () = note); If you need to test whether the props,componentwillreceiveprops of the component is executed, use the following line of code to test//appregistry.registercomponent (' Note ', () = Notewrapper);

Reference

Https://facebook.github.io/react/docs/react-component.html