淘先锋技术网

首页 1 2 3 4 5 6 7

理解:
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>

效果:
在这里插入图片描述
动态的文字透明度这里就不展示了,就截个图。点击按钮之后:
在这里插入图片描述
就没了,卸载组件了