React component Life Cycle process description "Go"

Source: Internet
Author: User


instantiation
First instance
getDefaultProps
getInitialState
componentWillMount
Render
componentDidMount
Update after instantiation
getInitialState
componentWillMount
Render
componentDidMount
Existence period
State change when component already exists
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
Render
componentDidUpdate
Destruction & clean up period
componentWillUnmount
Explain
The lifecycle provides 10 different APIs.
1.getDefaultProps
For component classes, it is only called once, and the return object is used to set the default props. For reference values, they will be shared in the instance.
2.getInitialState
For instance of component, it is called once during instance creation to initialize the state of each instance. At this time, this.props can be accessed.
3.componentWillMount
You can still modify the state of the component before you call it before you finish the first render.
4.render
A required method to create a virtual dom. This method has special rules:
Data can only be accessed through this.props and this.state
Can return null, false, or any react component
Only one top-level component can appear (array cannot be returned)
Cannot change the state of a component
DOM output cannot be modified
5.componentDidMount
The real DOM is called after rendering. In this method, the real DOM element can be accessed through this.getDOMNode (). At this point, you can use other class libraries to manipulate the dom.
On the server side, the method is not called.
6.componentWillReceiveProps
When the component receives the new props, it is called and used as the parameter nextprops. At this time, the component props and state can be changed.
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
Bool: true
};
}
}
7.shouldComponentUpdate
Whether the component should render a new props or state, and return false to skip the subsequent life cycle methods, which is usually not needed to avoid bugs. In case of application bottleneck, this method can be used for appropriate optimization.
This method is not called during the first rendering or after the forceupdate method is called
8.componentWillUpdate
After the new props or state is received, it is called before rendering, and props or state is not allowed at this time.
9.componentDidUpdate
When the new props or state is rendered, the new DOM element can be accessed at this time.
10.componentWillUnmount
Components are called before they are removed, which can be used to do some cleaning work. All tasks added in the componentdidmount method need to be undone in the method, such as the timer created or the event listener added. 
Original address: http://react-china.org/t/react/1740



Reference Address: http://www.cnblogs.com/daomul/p/4856101.html






React component Life Cycle process description "Go"


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: info-contact@alibabacloud.com 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.