组件生命周期_卸载时

卸载阶段指的是组件从DOM移除的过程。

组件卸载时会调用的钩子函数：

• componentWillUnmount：组件卸载之前调用。我们可以在这个钩子函数里面执行必要的清理操作。例如，清除定时器，关闭持续的网络连接，移除监听器等。

xxxxxxxxxx
//子组件
 componentWillUnmount(){
     console.log('子组件马上要被移除卸载了！！！')
 }

xxxxxxxxxx
//父组件
onChange = () => {
     this.setState({
         showChild:false
     })
}
render() {
      return (
          <div>
              <h3>父组件</h3>
              <p>{this.state.text}</p>
              <button onClick={this.onChange}>点击</button>
              {this.state.showChild&&<LifeCycleChild />} 
          </div>
      )
}

清除定时器

xxxxxxxxxx
import React, { Component } from 'react'

const MyAPI = {
    count:0,
    subScribe(cb){
        this.intervalID = setInterval(() =>{
            this.count += 1;
            cb(this.count)
        },1000)
    },
    unSubScribe(){
        clearInterval(this.intervalID)
        this.reset()
    },
    reset(){
        this.count = 0
    }
}


export default class ChildComponent extends Component {

    componentDidMount(){
        MyAPI.subScribe((currentCount) =>{
            console.log(currentCount)
        })
    }

    componentWillUnmount(){
        console.log("组件被卸载了")
        MyAPI.unSubScribe()
    }

    render() {
        return (
            <div>
                <h3>Demo2</h3>
            </div>
        )
    }
}

实时效果反馈

1.哪个函数是在组件卸载阶段调用的：

A shouldComponentUnmount

B constructor

C componentWillUnmount

D componentDidUnmount

答案

1=>C