React component life cycle processes

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

Description

The lifecycle provides a total of 10 different APIs.

1.getDefaultProps

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.

2.getInitialState

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 .

3.componentWillMount

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

4.render

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

5.componentDidMount

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.

6.componentWillReceiveProps

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            });        }    }

7.shouldComponentUpdate

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

8.componentWillUpdate

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

9.componentDidUpdate

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

10.componentWillUnmount

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.

Resources

• 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