React component life cycle processes

Source: Internet
Author: User

From Kiinlam GitHub

Instantiation of

First Instance instantiation

    • Getdefaultprops
    • Getinitialstate
    • Componentwillmount
    • Render
    • Componentdidmount

Updates after instantiation is complete

    • Getinitialstate
    • Componentwillmount
    • Render
    • Componentdidmount
Existence period

State changes when a component already exists

    • Componentwillreceiveprops
    • Shouldcomponentupdate
    • Componentwillupdate
    • Render
    • Componentdidupdate
Destruction & Cleanup Period
    • Componentwillunmount

The lifecycle provides a total of 10 different APIs.


Acting on a component class, called only once, the returned object is used to set the default props , and for reference values, it is shared in the instance.


An instance that acts on a component and is invoked once at instance creation time to initialize each instance state , which can be accessed at this time this.props .


Called before the first render is complete, and the state of the component can still be modified at this time.


Required method to create the virtual DOM, which has a special rule:

    • Data can only be passed this.props and this.state accessed
    • Can be returned null , false or any react component
    • Only one top-level component can appear (cannot return an array)
    • Cannot change the state of a component
    • Cannot modify the output of the DOM

The real Dom is rendered and called, in which the this.getDOMNode() actual DOM elements can be accessed. It is now possible to manipulate the DOM with other class libraries.

On the server side, the method is not called.


When a component receives a new props call and uses it as an argument nextProps , the component can be changed props and state .

    componentWillReceiveProps: function(nextProps) {        if (nextProps.bool) {            this.setState({                bool: true            });        }    }

Whether the component should render a new props or state , return false represents a skip to the subsequent life-cycle methods, usually not needed to avoid bugs. This method can be used to optimize the application in case of bottlenecks.

forceUpdateThe method is not invoked during the first render or after a method is called


Called before a new props or state after rendering is received, the update is not allowed at this time props or state .


Finish rendering new props or state post-call, at which point you can access the new DOM element.


The component is called before it is removed, and can be used to do some cleanup, and componentDidMount All tasks added in the method need to be revoked in the method, such as a timer created or an added event listener.

    • React: Leading the future User Interface Development Framework/CHI Van Hongchun Yangsen Chen Yu Translation--Electronic industry press
    • Component Specs and Lifecycle

React component life cycle processes

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.