react 學習--元件的生命週期（二）執行階段

var HelloWorld = React.createClass({
         // 1.父元件修改屬性觸發，可以修改新屬性，修改狀態
         componentWillReceiveProps:function () {
            console.log("componentWillReceiveProps,1");
         },
         // 2.返回false會阻止render呼叫
         shouldComponentUpdate:function () {
             console.log("shouldComponentUpdate,2");
             return true;
         },
         // 3.不能修改屬性和狀態
         componentWillUpdate:function () {
           console.log("componentWillUpate,3");
         },
         // 4.渲染
         render:function () {
             console.log("render,4");
             return (
                     <p>
                         Hello,{this.props.name?this.props.name:' World'}
                         <span ref="tip"></span>
                     </p>
             );
         },
         // 5.完成後可以修改DOM
         componentDidUpdate:function() {
             console.log("componentDidUpdate,5");
             this.refs.tip.innerHTML += " appened! ";
         }
     });
     var Test = React.createClass({
         getInitialState:function () {
             return {
                 "name":""
             };
         },
         handleChange:function () {
            this.setState({
                "name":this.refs.myInput.value
            });
         },
         render:function () {
             return(
                     <div>
                         <HelloWorld name={this.state.name}/><br/>
                         <input ref="myInput" type="text" onChange={this.handleChange} />
                     </div>
             );
         }
     });
     ReactDOM.render(<Test />,document.getElementById("app"));