In this section we will discuss the lifecycle of the React component.
The component's life cycle can be divided into three states:
- Mounting: The real DOM has been inserted
- Updating: being re-rendered
- Unmounting: Moved out of real DOM
The life cycle methods are:
- ComponentWillMount is called before rendering , and the client is also on the server side.
- ComponentDidMount : Called after the first rendering , only on the client. After the component has generated a corresponding DOM structure, which can be accessed by this.getDOMNode (). If you want to use with other JavaScript frameworks, you can call setTimeout, setInterval, or send AJAX requests in this method (to prevent heterogeneous operations from blocking the UI).
- ComponentWillReceiveProps is called when the component receives a new prop. This method will not be called when the render is initialized.
- ShouldComponentUpdate returns a boolean value. Called when the component receives a new props or state. It is not called when initializing or when using forceUpdate.
You can use it when you confirm that you do not need to update the component. - ComponentWillUpdate is called when the component receives a new props or state but has not yet rendered it. It will not be called at initialization time.
- ComponentDidUpdate is called as soon as the component completes the update. It will not be called at initialization time.
- ComponentWillUnmount is called immediately when the component is removed from the DOM.
A detailed description of these methods can be found in the official documentation .
The following example sets the timer by the componentDidMount method after the Hello component is loaded, resets the transparency of the component every 100 milliseconds and re-renders it:
React instance
Var Hello = React . CreateClass ( {
GetInitialState : function ( ) {
Return {
Opacity : 1.0
} ; } , ComponentDidMount : function ( ) {
This . Timer = setInterval ( function ( ) {
Var Opacity = this . State . Opacity ; opacity - = .05 ; if ( Opacity < 0.1 ) {
Opacity = 1.0 ; }
This setState ( {
Opacity : opacity
} ) ; } . Bind ( this ) , 100 ) ; } , render : function ( ) {
Return ( < Div Style = { { opacity : this . State . Opacity } } > Hello { This . Props . Name } </ div > ) ; }
} ) ; ReactDOM . Render ( < Hello Name = " world " />, document . Body
) ;
try it"
The following example initializes state , setNewnumber is used to update state . All lifecycle is in the Content component .
React instance
Var Button = React . CreateClass ( {
GetInitialState : function ( ) {
Return {
Data : 0
} ; } , SetNewNumber : function ( ) {
This . SetState ( { data : this . State . Data + 1 } )
} , Render : function ( ) {
Return ( < Div > < button OnClick = { this . SetNewNumber } > INCREMENT </ button > < Content MyNumber = { this . State . Data } > </ content > </ div > ) ; }
} )
Var Content = React . CreateClass ( {
ComponentWillMount : function ( ) {
Console . Log ( ' Component WILL MOUNT! ' )
} , ComponentDidMount : function ( ) {
Console . Log ( ' Component DID MOUNT! ' )
} , ComponentWillReceiveProps : function ( newProps ) {
Console . Log ( ' Component WILL RECEIVE PROPS! ' )
} , ShouldComponentUpdate : function ( newProps , newState ) {
Return True ; } , componentWillUpdate : function ( nextProps , nextState ) {
Console . Log ( ' Component WILL UPDATE! ' ) ; } , ComponentDidUpdate : function ( prevProps , prevState ) {
Console . Log ( ' Component DID UPDATE! ' )
} , ComponentWillUnmount : function ( ) {
Console . Log ( ' Component WILL UNMOUNT! ' )
} , Render : function ( ) {
Return ( < Div > < h3 > { this . Props . MyNumber } </ h3 > </ div > ) ; }
} ) ; ReactDOM . Render ( < div > < Button /> </ div >, document . GetElementById ( ' example ' )
) ;
try it"
