React Getting Started--------declaration period for components

• mounting/Component Mount Related:

Componentwillmount

Componentdidmount

• updating/Component Update Related:

Componentwillreceiveprops

Shouldcomponentupdate

Componentwillupdate

Componentdidupdate

• unmounting/Component Removal Related:

Componentwillunmount

One, mounting/component mount related

Componentwillmount

Executes before the component is mounted, but only once, even if the reorganization is rendered repeatedly, or the state of the component is changed. If you want to be able to perform multiple times, you can use Reactdom.unmountcomponentatnode to remove an existing component and then render again.

    varDiva = document.getElementById ('a'); varDIVB = document.getElementById ('b'); varI=0; varComponent1 =React.createclass ({componentwillmount:function () {Console.log (++i)}, Render:function () {Console.log (Date.now ()); return<div name={ This.props.name}> I'm just a quiet div</div>.        }    });
//Trigger Componentwillmount,render Reactdom.render (<component1/>, diva);
　　
　//Componentwillmount not triggered, triggering render Reactdom.render (<component1/>, diva);
　//Trigger Componentwillmount,render Reactdom.render (<component1/>, DIVB);
//Componentwillmount not triggered, render not triggered Reactdom.render (<component1/>, DIVB);

Componentdidmount

Executes after the component is mounted, as with Componentwillmount, where repeated rendering of the same component is performed only once, and re-rendering after uninstalling the component can be triggered again.

Second, updating/component Update Related

Componentwillreceiveprops

Called before the component receives a props point in time, noting that the component is not called when it initializes the render.

    vari =0;var div= document.getElementById ('a'), var div2= document.getElementById ('b'); varComponent1 =React.createclass ({componentwillreceiveprops:function () {Console.log (i++)}, Clickcb:function () {React.render (<component1/>, DIV2); }, Render:function () {return<div onclick={ This.clickcb}> point I'll give the next div mount component </div>        }    }); React.render (<component1/>, div//initialization does not trigger Componentwillreceiveprops    ); React.render (<component1/>, div///Repeat render will trigger Componentwillreceiveprops    );  React.unmountcomponentatnode (DIV); //Remove existing ComponentsReact.render (<component1/>, div//initialization does not trigger Componentwillreceiveprops);

The results of the operation are as follows:

The interface has a parameter nextprops, which can be used to get the new props value (This.props gets the current, that is, the old props)

  vari =0;var div= document.getElementById ('a'); var render=function () {React.render (<component1 i={i++}/>, Div);    }; varComponent1 =React.createclass ({componentwillreceiveprops:function (nextprops) {Console.log ( This. Props.i, Nextprops.i)}, Render:function () {returnThe value of the <div onclick={render}>props.i is: { This.props.i}</div>        }    }); Render ();

The operation results are as follows

Shouldcomponentupdate

The interface is actually called immediately when the component receives a new props or a new state, and then the return value determines whether the current component is to be re-rendered.

The interface takes two parameters, the first parameter represents the new props, and the second parameter represents the new state.

  vardiv = document.getElementById ('a'); varComponent1 =React.createclass ({getinitialstate:function () {returnI0}}, Shouldcomponentupdate:function (Nextprops, nextstate) {Console.log ( This. state.i, NEXTSTATE.I); returnNEXTSTATE.I >3?true:false;//returns TRUE to render the component}, Clickcb:function () { This. SetState ({i: This. state.i +1})}, Render:function () {return<div onclick={ ThisThe value of the. Clickcb}>state.i is: { This.state.i}</div>        }    }); Reactdom.render (<component1/>, div);

The component is not rendered until the fourth time it is clicked, and the correct new state.i is displayed in the DIV

Componentwillupdate

Like Shouldcomponentupdate, it is called when a component receives a new props or state, and there are two parameters to get the new props and state.

However, this interface is called only when Shouldcomponentupdate executes and returns TRUE.

Make some changes in the previous code instance

componentwillupdate:function (Nextprops, nextstate) {            'yoyoyo'this  . state.i, nextstate.i);        },

Componentdidupdate

Called after the component is updated and re-rendered, it has two parameters like Componentwillupdate to get the new props and state

 vardiv = document.getElementById ('a'); varComponent1 =React.createclass ({getinitialstate:function () {returnI0}}, Shouldcomponentupdate:function (Nextprops, nextstate) {Console.log ( This. state.i, NEXTSTATE.I); returnNEXTSTATE.I >3?true:false;//returns True to execute Componentwillupdate and re-render the component}, Componentdidupdate:function (Nextprops, nextstate) {Console.log ('It 's finished rendering .', This. state.i, NEXTSTATE.I); }, Componentwillupdate:function (Nextprops, nextstate) {Console.log ('It hasn't been rendered yet .', This. state.i, NEXTSTATE.I); }, Clickcb:function () { This. SetState ({i: This. state.i +1})}, Render:function () {return<div onclick={ ThisThe value of the. Clickcb}>state.i is: { This.state.i}</div>        }    }); Reactdom.render (<component1/>, div);

The results of the operation are as follows:

Third, unmounting/component removal Related:

Continue tomorrow.

React Getting Started--------declaration period for components