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"));