componentWillReceiveProps: 父組件修改屬性觸發(fā)，可以修改新屬性、修改狀態(tài)，組件發(fā)生之前觸發(fā)，在這個函數(shù)可以使用舊屬性和新屬性 做比較，傳送到組件之前做相應的處理

shouldComponentUpdate： 返回false會阻止render調用，這個方法就是react詢問開發(fā)者 組件是否需要更新，這個函數(shù)可以用來優(yōu)化性能

componentWillUpdate: 這個方法不能修改屬性和狀態(tài)
render：只能訪問this.props 和 this.state ，只有一個頂層組件，不允許修改狀態(tài)和DOM輸出

componentDidUpdate： 可以修改DOM

/* *  第一次加載頁面后，看到只有調用render *  輸入內容，就會看到其它函數(shù)都會按照順序觸發(fā)，原因就是父組件改變了子組件的屬性，所以組件觸發(fā)了5個運行中的函數(shù) */
var count = 0var Hello = React.createClass({  
componentWillReceiveProps(){    
console.log('componentWillReceiveProps 1'); 
 },  
shouldComponentUpdate(){   
 console.log('shouldComponentUpdate 2');   
 return true  
}, 
 //這個函數(shù)一般用的不多，用一些日志打印，數(shù)據(jù)打印調試等  componentWillUpdate(){    
console.log('componentWillUpdate 3');  
},  
render(){    
console.log('render 4');    
return(      
<p>hello {this.props.name}</p>    
)  },  
componentDidUpdate(){    
console.log('componentDidUpdate 5');  
}
});

var Test = React.createClass({  
getInitialState(){    
return {      name: ''    }  
},  
handleChange(event){    
this.setState({      name: event.target.value    }) 
 }, 
 //渲染組件虛擬DOM  
render(){   
 return(      
  <div style={{textAlign:'center',fontSize:28}}>        
    <Hello name={this.state.name} />        
    <br/>        
    <input type="text" onChange={this.handleChange} style={{border:'1px solid #ccc'}}/>      
  </div>   
 )  
}
});