4、React销毁阶段使用函数

componentWillUnmount: 在删除组件之前进行清理操作,比如删除计时器和事件监听器,因为这写都开发者加上去的,react并不知道,所以说需要手动清理

/* 
第一次加载页面后,看到只有调用render *  输入内容,就会看到其它函数都会按照顺序触发,原因就是父组件改变了子组件的属性,所以组件触发了5个运行中的函数
 */

var Hello = React.createClass({  
render(){    
console.log('render 4');    
return(      
  

hello {this.props.name}

) }, 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
123
// } return(

) } });

你可能感兴趣的:(4、React销毁阶段使用函数)