React (iii) life cycle of components

Component Specs and LifeCycle

<div id= "app" ></div><script src= "Bower_components/react/react.min.js" ></script>< Script src= "bower_components/react/react-dom.min.js" ></script><script src= "lib/babel-core/ Browser.min.js "></script><script type=" Text/babel ">varMessageBox =React.createclass ({getinitialstate:function () {            return{count:0}}, Componentwillmount:function() {Console.log (' Componentwillmount '); varSelf = This;  This. Timer = SetInterval (function() {self.setstate ({count:self.state.count+ 1                }); }, 1000); }, Componentdidmount:function() {Console.log (' Componentdidmount '); Console.log ( This); }, Componentwillunmount:function() {Console.log (' Unload components '); Clearinterval ( This. Timer); }, Render:function () {            return (                <div>  This.state.count}            );    }    }); varMessageBox =Reactdom.render (<messagebox/&gt, document.getElementById (' app ')    );</script>

<div id= "app" ></div><script src= "Bower_components/react/react.min.js" ></script>< Script src= "bower_components/react/react-dom.min.js" ></script><script src= "lib/babel-core/ Browser.min.js "></script><script type=" Text/babel ">varMessageBox =React.createclass ({getinitialstate:function () {            return{count:0}}, Getdefaultprops:function () {        },        /*componentwillmount:function () {}, Componentdidmount:function () {}, Componentwillunmo Unt:function () {},*/shouldcomponentupdate:function(Nextprop, nextstate) {Console.log (' Shouldcomponentupdate '); if(Nextstate.count > 3)return false; return true;//must return a true or false}, Componentwillupdate:function(Nextprop, nextstate) {Console.log (' Componentwillupdate '); }, Componentdidupdate:function() {Console.log (' Successfully updated '); }, DoUpdate:function () {             This. SetState ({count: This. State.count + 1            }); }, Render:function () {            return (                <div>  This.state.count} This.doupdate}> Manually update components (including subcomponents) </button> <submessage message={ This. State.count}/> </div>            );    }    }); varSubmessage =React.createclass ({componentwillreceiveprops:function(Nextprop) {Console.log (' Subcomponents are going to get prop '); }, Shouldcomponentupdate:function(Nextprop, nextstate) {if(Nextprop.message > 2)return false; return true; }, Render:function () {            return (                <div>  This.props.message}            );    }    }); varMessageBox =Reactdom.render (<messagebox/&gt, document.getElementById (' app ')    );</script>

React (iii) life cycle of components