Android React native component life cycle

Like Android, react's components also have a corresponding life cycle. The life cycle of the Android React native component can be summarized in the following diagram as a whole.

The component life cycle can be broadly divided into three phases:

• The first stage : The first drawing phase of the component, in the above dashed box, where the component loading and initialization is completed;
• Second Stage : is the component in the run and interaction phase, the lower left corner of the box, this stage component can handle user interaction, or receive the event update interface;
• The third stage : is the component unload the extinction stage, in the bottom right corner of the dotted box, here do some cleanup work of the components.

There are 10 life-cycle callback functions.

• Object Getdefaultprops ()
  Called once when the component class is created, and then the return value is cached. Called globally, all instances are shared.

• Object Getinitialstate ()
  Called once before the component is mounted. The return value will be the initial value of the this.state.

• Componentwillmount ()
  Called immediately prior to initializing rendering execution

• reactcomponent render ()
  This method is necessary to render the view, and you can return null or FALSE to indicate that nothing needs to be rendered.

• Componentdidmount ()
  Called immediately after initialization of the render execution

• Componentwillreceiveprops (object nextprops)
  Called when the component receives a new props, that is, when the parent component modifies the properties of the child component. The method is not called when the rendering is initialized. Can be used to update state to respond to a change in a prop.

• boolean Shouldcomponentupdate (Object Nextprops, Object nextstate)
  Called when a new props or state is received, before it is rendered, and false should be returned if the new props and state are determined not to cause the component to update. Returns true to render.

• Componentwillupdate (Object Nextprops, Object nextstate)
  Called when a new props or state is received, and Shouldcomponentupdate returns True

• Componentdidupdate (Object Prevprops, Object prevstate)
  Called immediately after the component's update has been synchronized to the DOM

• Componentwillunmount ()
  Called immediately when the component is removed from the DOM. Perform any necessary cleanup in the method, such as an invalid timer, or clear the DOM element created in Componentdidmount.

The test code is posted below.

/*** Sample React Native app* https://github.com/facebook/react-native*/' use strict ';varReact =require(' react-native ');var{appregistry, StyleSheet, View, Text} = React;varAwesomeproject = React.createclass ({//called once when the component class was created, and then the return value is cached. Getdefaultprops: function(){Console.log ("Getdefaultprops");return NULL; },//Initialize state, called once before the component is mounted. The return value will be the initial value of the this.state. Getinitialstate: function(){Console.log ("Getinitialstate");return NULL;//must have a return value, which can be null or an object. },//component will be renderedComponentwillmount: function(){Console.log ("Componentwillmount"); },//Render ViewRender function(){Console.log ("Render");return(<View> </View>);//You can also return null or FALSE to indicate that you do not need to render anything},//After rendering the view completeComponentdidmount: function(){Console.log ("Componentdidmount");    This.loaddatatosetstate (); },the//component receives a new property, which is not called when the rendering is initialized. Componentwillreceiveprops: function(nextprops){Console.log ("Componentwillreceiveprops");//console.log (nextprops);},//Whether the component needs to be updatedShouldcomponentupdate: function(nextprops,nextstate){Console.log ("Shouldcomponentupdate");//console.log (nextprops+ "|" +nextstate);        return true; },//component will be updatedComponentwillupdate: function(nextprops,nextstate){Console.log ("Componentwillupdate");//console.log (nextprops+ "|" +nextstate);},//Component Update completeComponentdidupdate: function(prevprops,prevstate){Console.log ("Conponentdidupdate");//console.log (prevprops+ "|" +prevstate);},//Before the component is destroyed, do cleanup operationsComponentwillunmount: function(){Console.log ("Componentwillunmount"); }, Loaddatatosetstate: function(){Console.log ("Loaddatatosetstate"); This.setstate ({name:"RN"})     },});varStyles = Stylesheet.create ({}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

The final output is as follows, we call the loaddatatosetstate function in the componentdidmount function, which is set by the SetState function to the state, this time callback shouldcomponentupdate, if True is returned, the componentwillupdatewill continue to be called,render, Conponentdidupdate, and then press the back key to exit the app, the destroy operation, callback Componentwillunmount

getDefaultPropsgetInitialStatecomponentWillmountrendercomponentDidMountloadDataToSetStateshouldComponentUpdatecomponentWillUpdaterenderconponentDidUpdatecomponentWillUnmount

The trigger for the componentwillreceiveprops function is triggered after the props attribute is changed, which is more complex and under what circumstances will change, that is, when the parent component changes the properties of the subassembly.

First we define a sub-component

varName =react.createclass ({getdefaultprops: function(){Console.log ("Name getdefaultprops");return NULL; }, Getinitialstate: function(){Console.log ("Name getinitialstate");return NULL; }, Componentwillmount: function(){Console.log ("Name Componentwillmount"); }, Render: function(){Console.log ("Name Render");return(<Text> hello,{ This. props.name? This. Props.name:"none!"} </Text>); }, Componentdidmount: function(){Console.log ("Name Componentdidmount"); }, Componentwillreceiveprops: function(nextprops){Console.log ("Name componentwillreceiveprops");    Console.log (Nextprops); }, Shouldcomponentupdate: function(nextprops,nextstate){Console.log ("Name shouldcomponentupdate");return true; }, Componentwillupdate: function(nextprops,nextstate){Console.log ("Name componentwillupdate"); }, Componentdidupdate: function(prevprops,prevstate){Console.log ("Name conponentdidupdate"); }, Componentwillunmount: function(){Console.log ("Name Componentwillunmount"); },});

Define a parent component, use the child component in the parent component's render function, and set the Name property for the child component, which is

<Name name={this.state.name}></Name>

In the parent component, the state value of the parent component is returned in the Getinitialstate function

return{name:"a"};

When the component is finished loading, the parent component's state is set by the SetState function

this.setState({            name:"lizhangqu"        });

This will trigger the render function of the parent component to be re-rendered, and the render function will reassign the name of the child component, which is the value in SetState.

The code for the parent component is as follows.

var  Parent = React.createclass ({render:function   ()  { return  (<View> &l T    Name name={this  .state.name}></name> </View>); }, Getinitialstate:function   ()  { return  {name:" a "}; }, Componentdidmount:function    ()  { this . SetState ({Name: "Lizhangqu" }); },});

In the interface, we use the parent component directly as the return.

var AwesomeProject = React.createClass({  function() {    return (        <Parent></Parent>    );  }});

At this point, the Componentwillreceiveprops life cycle function is recalled because the properties of the subcomponents have been transformed, and the entire life cycle function is as follows ( We print the object of the property in the Componentwillreceiveprops function ),

Name GetdefaultpropsName getinitialstateName ComponentwillmountName RenderName ComponentdidmountName ComponentwillreceivepropsObject {name: "Lizhangqu"   }Name shouldcomponentupdateName componentwillupdateName RenderName conponentdidupdateName Componentwillunmount

And on the commissioning, React-native official website provides a chrome under debugging plug-in, see Chrome Developer Tools, after installing the plugin, on the phone developer options to open Debug JS, You can see the console output and JS error messages in Chrome.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android React native component life cycle