React学习笔记十-生命周期（旧）_unmountcomponentatnode-CSDN博客

class Life extends React.Component {
     death = ()=>{
     //卸载组件
          ReactDOM.unmountComponentAtNode(document.getElementById('test1'))
      }
      render() {
          return (
               <div>
                   <h2>React学不会怎么办?</h2>
                   <button onClick={this.death}>不活了</button>
               </div>
           )
       }
}
ReactDOM.render(<Life />, document.getElementById('test1'))

1.1.2案例透明的渐变功能与componentDidMount(){}

然后我们想办法，让标题处于时刻渐变的状态。

状态(state)可以驱动页面的显示和更新，所以在透明度改变这种事上，我们得先定义一个state。

state = {opacity:0.3}

然后为h2标签写上style：<h2 style={ {opacity:this.state.opacity}}>React学不会怎么办?</h2>

如此，页面上的标题的透明度，就会变成我们state里面写的透明度。

但我们得想办法，让透明的一直变化。从完全可见到彻底消失，耗时两秒。透明度由1到0，耗时是2s，如果我们使用间隔定时器，那么每次给200毫米，减少0.1。

那么我们把间隔定时器写在哪呢？我们尝试写在render函数里面（这样写是有问题的，大家不要跟着写，这里只是展示错误）。代码如下：

render() {
      setInterval(()=>{
      //获取原状态
      let {opacity} = this.state
      //减少0.1
      opacity -= 0.1
      if(opacity <= 0){
            opacity = 1
      }
            this.setState({opacity})
      },200)
       return (
            <div>
               <h2 style={
  {opacity:this.state.opacity}}>React学不会怎么办?</h2>
               <button onClick={this.death}>不活了</button>
            </div>
      )
}

这样写后，页面我们写的标题，透明度会改变的越来越快，和闪烁一样，不是我们想要的情况。电脑温度会逐渐增高。

这个错误，是因为我们引发了一个无限的递归，render函数会执行1+n次，1是我们组件初次挂载到页面上，render会执行一次，而n是state发生更新，render就会重新执行一次，state更新了n次，render就重新执行n次。间隔定时器200毫秒执行一次，定时器里面有state的更新，这就说明200毫秒state就更新一次，引发render更新，而且定时器是写在render里面的，render走一次又开启一个定时器，定时器又在更新state，形成一个无限的递归，计算量呈指数爆炸。

所以我们得改写定时器的位置，不能放在render里面。在组件初次挂载到页面上时，react会自动调用一次render，也会自动调用一个api，叫做