React 生命周期函数

理解：
1.组件对象从创建到死亡它会经历特定阶段
2.React组件对象包含一系列钩子函数（s生命周期回调函数）在特定的时刻调用
3.我们在定义组件时，在特定的生命周期回调函数中做特定的工作
补一个知识点：mount是挂载，unmount是卸载。把页面显示出来就是挂载

这里简单说一下：
componentDidMount(){} :组件在挂载完毕时调用。如果有需求我们有一个定时器在页面挂载时就开启，那定时器就可以写在这个函数里
componentWillUnmount(){}：组件即将被卸载时调用
他们和render是兄弟，都是实例调用

小例子：文字组件透明化，点击按钮就卸载该组件

  <script type="text/babel">
  class Life extends React.Component{
    state = {
      opacity:1 //透明度
    }
    //组件挂载完毕时调用
    componentDidMount(){//和render函数是兄弟，是实例调用的
      console.log(this);
      this.timer = setInterval(()=>{
        let{opacity} = this.state
        opacity = opacity - 0.1
        if(opacity<= 0) opacity = 1
        this.setState({opacity})
      },200)
    }
    //组件将要被卸载时调用
    componentWillUnmount(){
      //清空定时器
      clearInterval(this.timer)
    }
    death = ()=>{
    
      //卸载组件
      ReactDOM.unmountComponentAtNode( document.getElementById('test'))

    }
    //初始化渲染、状态更新之后调用
    render(){//render调用1+n次

      return(
      <div>
        <h2 style = {{opacity:this.state.opacity}}>React学不会怎么办？</h2>
        <button onClick = {this.death}>不活了</button>
        </div>
      )
    }
  }
  ReactDOM.render(<Life/> , document.getElementById('test'))
  </script>

效果：

动态的文字透明度这里就不展示了，就截个图。点击按钮之后：

就没了，卸载组件了