4、React销毁阶段使用函数

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>    
) 
 }

});