React component life cycle

   After the change state or props React components can cause this component re-rendering, DOM this time there will be a corresponding change. Render method which only mentioned in a previous post, that is, when the method of DOM rendering. Of course, only this method is not enough Oh! , Citation, developers need to be in the actual development of the various stages of assembly of control, so that you can develop a highly efficient, to this end, there is the concept of the component lifecycle React.

   For a basic React component, you can put the life cycle of each component into a React to initialize, mount, update, uninstall four stages, offers a different approach in four stages React in order to facilitate the developers have enough control of the control components.

 

• The method of assembly initialization phase: getDefaultProps (), getInitialState ();
• The method of loading the component stages are: componentWillMount (), render (), componentDidMount ();
• The method of the updated components: shouldComponentUpdate (), componentWillUpdate (), render (), componentDidUpdate (), componentWillReceiveProps ();
• The method of assembly uninstall: componentWillUnmount ();

Note: do not call these methods in phase component updates mount assembly stage, which is the initial stage of the rendering process of updating the method is not available, so developers should not be in the initial rendering method to use to use the update phase this is very unwise.

        shouldComponentUpdate () method should return a Boolean value, if the return value is true this component will continue to update, on the contrary, if the return value is false, this component will not be updated, that is to say, at this time, componentWillUpdate (), render (), componentDidUpdate () method will not be called.

 

   To understand the concept of life cycle, you can use a code to better explain:

App.js

// introduced REACT 
Import React, the Component {} from  ' REACT ' ; 


// introduced style file 
Import ' ./App.css ' ; 

// Construction APP class 



class the App the extends the Component { 
    constructor () { 
    Super (); 
    
    // define initialization State 
    the this .STATE = {name: 1234 } 
} 
    
    // assembly will be mounted 
    componentWillMount () { 
        
        the console.log ( ' willMount ' ); 
    } 
    
    // assembly of the mount is completed 
    componentDidMount () { 
        the console.log ( 'didmount ' ); 
    } 
    
    // whether the component should be updated 
    shouldComponentUpdate () { 
        the console.log ( ' shouldupdate ' );
         return  to true ; 
    } 
    
    // component will update 
    componentWillUpdate () { 
        the console.log ( ' Will Update ' ); 
        
    } 
    
    // update complete assembly 
    componentDidUpdate () { 
        
        the console.log ( ' didupdate ' ); 
    } 
    
    
    // define render method 
    
    render () { 
        
        the console.log ( ' render ');
        
        
        
        
        return (
            
            <div className='App'>
            
            <input type="button" onClick={ () => {this.setState({name:2345})}} value="Change"  />
            
            
            </div>
            
        );
        
        
        
    }
}



export default App;

The initial effect did not click on the button in the browser:

The results can be seen in the component update phase method have not been called

Click the button, state assembly has changed, it will cause the assembly to re-render