The life cycle of react components

Written in front: After reading the article many times, I summed up one. Once again to strengthen the memory, and later review.

I. Instantiation (initialization)

varButton =React.createclass ({getinitialstate:function () {return{data:0    }; }, Setnewnumber:function () { This. setState ({data: This. State.data +1})}, Render:function () {varShow = ( This. State.data%2===0); return (            <div> <button OnClick = { This.setnewnumber}>increment</button>{Show&& <content MyNumber = { This.state.data}></content> }      </div>        ); }});varContent =React.createclass ({getdefaultprops:function () {Console.log ('Getdefaultprops'); return{Name:'GDQ'}; }, Getinitialstate:function () {Console.log ('getinitialstate'); return{Time: A }; }, Componentwillmount:function () {Console.log ('Componentwillmount')}, Componentdidmount:function () {Console.log ('Componentdidmount')}, Render:function () {return (            <div>  This.props.mynumber}        ); }}); Reactdom.render (<div> <button/> </div>, document.getElementById ('example2'));

Operation Result:

1. Creation phase: Getdefaultprops ()

This phase occurs primarily when defining a component class, that is, when calling React.createclass. This phase getdefaultprops () is called once and is cached-shared among multiple instances of the class. Before any instances of a component are created, we (the code logic) cannot rely on this this.props . This method is only responsible for returning an object and then mounting it to this.props with the corresponding property of the merged parent component.

2. Initialization phase: (each component is used, including the unmount after re-mount, such as the above <conent/>)

Getinitialstate (): This method is executed only once during one lifetime of the component (from initialization to destruction to one), and is responsible for returning an object that becomes the initial value of the This.state

Componentwillmount (): When a new instance is mounted to the DOM, our business logic can be written at this stage, such as modifying This.state, starting a timer or something.

Render (): Returns the virtual DOM of the component, waiting for Reactdom.render () to render the component in the real DOM,

Usage rules

A: can only access This.porps, this.state, and can not repair the

B: Unable to manipulate DOM

C: There can only be one top-level element

D: Can return null, FALSE, any component

Componentdidmount (): The component successfully renders to the real DOM and begins execution, in which the this.getDOMNode() actual DOM element is accessed. It is now possible to manipulate the DOM with other class libraries. (This method is not called in server-side rendering.) For example, send an AJAX request.

Second, the existence period (the component has been attached to the real DOM, mainly is the update operation)

varButton =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>        ); }});varContent =React.createclass ({componentwillreceiveprops:function (newprops) {Console.log ('Componentwillreceiveprops')}, Shouldcomponentupdate:function (Newprops, newstate) {Console.log ('shouldcomponentupdate'); return true; }, Componentwillupdate:function (Nextprops, nextstate) {Console.log ('componentwillupdate'); }, Componentdidupdate:function (Prevprops, prevstate) {Console.log ('componentdidupdate')}, Render:function () {return (            <div>  This.props.mynumber}        ); }}); Reactdom.render (<div> <button/> </div>, document.getElementById ('example2'));

Results:

1. There are two types of triggers in the update phase, which is actually

A:this.props (props received from parent component changed)

B:this.state (its own internal state has changed.) This.setstate ({...}), triggering)

2. In fact, a situation is more than the B case a componentwillreceiveprops stage

Componentwillreceiveprops (newprops): The parameter is the newly received props object, which allows us to mate with Newprops to modify This.state (the only place in the update phase where this.state can be modified)

Shouldcomponentupdate (Nextprops, Nextstate): Returns True (default)/false, determining whether to perform this update. If False, the later stage is skipped and the update is not performed.

A: Do not allow modification of props,state (this and next are not allowed)

B: Generally no use, only when the project into the performance bottleneck, performance optimization here

Componentwillupdate (Nextprops, nextstate): Similar to the Componentwillmount method, this method is called before a new props or state render is received on the component. However, you cannot update state and props in this method.

Render (): constructs the virtual DOM and returns

Componentdidupdate (): component executes after rendering in the real DOM

Third, unload period (when the component is unloaded from the real Dom execution)

　Comonentwillunmount (): A component is called before it is removed (unloaded from the real DOM) and can be used to do some cleanup work, 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.

The life cycle of react components