React存在阶段

<div id="box"></div>
<div id="box1"></div>

<script type="text/babel">
var Hello = React.createClass({
//1、 接收到属性之前
componentWillReceiveProps : function(event){

console.log(event);
console.log("1-componentWillReceiveProps");
},
//2\是否需要更新组件
shouldComponentUpdate: function(){
console.log("2-shouldComponentUpdate");
return true;
},
//3\组件更新之前
componentWillUpdate: function(){
console.log("3-componentWillUpdate");

},
//4\渲染组件
render: function(){
console.log("4-render");
return <h1>{this.props.name}</h1>
},
//5\组件更新完成
componentDidUpdate: function(){
console.log("5-componentDidUpdate");
},
});

var Father = React.createClass({
getInitialState : function(){
return {title:""};
},

handleChange : function(event){
console.log(event.target.value);
this.setState({title : event.target.value});
},

render : function(){
return <div>
<Hello name={this.state.title}></Hello>
<input type="text" onChange={this.handleChange} />
</div>
}
});

ReactDOM.render(<Father></Father>,document.getElementById('box'));
</script>