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