老的生命周期

1、销毁 componentWillUnmount

顾名思义，就是在组件销毁的时候触发的生命周期函数，那组件在什么时候会销毁呢？比如组件根据三目运算符动态渲染的时候、&&等情况下会触发。

   {
       // && 之前的值为真才会执行后面的代码
       this.state.show && <Child></Child>
   }
   {
       this.state.show ? <Child></Child> : ''
   }

销毁生命周期中可以解除事件绑定、清除定时器、清除网络状态。

  import React,{Component} from "react";


class Child extends Component{
    render(){
        return (
            <div>
                child--{this.props.num}
                <button onClick={()=>{
                    this.change()
                }}>abc</button>
            </div>
        )
    }
    componentDidMount(){
        window.onresize=()=>{
            console.log('child123 resize');
        }
        this.timer=setInterval(()=>{
            console.log('interval');
        },1000)
    }
    componentWillUnmount(){
        window.onresize=null;

        clearInterval(this.timer)

    }
}

export default class App extends Component {
    state={
        num:0,
        show:true
    }
    render(){
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        num:this.state.num+1,
                        show:!this.state.show
                    })
                }}>add</button>

                {
                    this.state.show&&<Child></Child>
                }
            </div>
        )
    }
}

在使用定时器的时候一般会把值赋值给一个变量，这样不用的时候可以清除，但是在react中，销毁的生命周期函数中不能拿到别的函数定义的变量。所以会把定时器的值赋在this中，this在这里指的是实例对象，销毁的时候就可以通过this拿到定时器。