componentWillUnmount: 在刪除組件之前進行清理操作，比如刪除計時器和事件監聽器，因為這寫都開發者加上去的，react并不知道，所以說需要手動清理
/*
第一次加載頁面后，看到只有調用render * 輸入內容，就會看到其它函數都會按照順序觸發，原因就是父組件改變了子組件的屬性，所以組件觸發了5個運行中的函數
*/
var Hello = React.createClass({
render(){
console.log('render 4');
return(
<p>hello {this.props.name}</p>
)
},
componentWillUnmount(){
console.log('B00000000');
}});
var Test = React.createClass({
getInitialState(){
return {
name: ''
}
},
handleChange(event){
if(event.target.value == '123'){
//使用react提供的函數刪除Test的組件(括號里使用的是裝載之后目標節點) ReactDOM.unmountComponentAtNode(document.getElementById('app')); return;
}
this.setState({ name: event.target.value })
},
//渲染組件虛擬DOM
render(){
//當狀態修改成123的是，就會返回if語句里面的組件，react會把之前組件刪除調用觸發子組件的銷毀函數
//第二種方法是使用react提供的函數來刪除
// if(this.state.name === '123'){
// return <div>123</div>
// }
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>
)
}
});
