App.js

import React, { Component } from ‘react’ import About from ‘./About’ /** * 卸载组件

组件销毁的常见原因有以下两个。

组件在父组件中被移除了：这种情况相对比较直观，对应的就是我们上图描述的这个过程。

组件中设置了 key 属性，父组件在 render 的过程中，发现 key 值和上一次不一致，那么这个组件就会被干掉。

* 将组件从 DOM 上删除 * * 常用方法 * componentWillUnMount */ class App extends Component { constructor() { super() this.state = { count:0, isShow:true } this.handler = this.handler.bind(this) } handler() { this.setState({ count:this.state.count + 1 }) } render() { return ( <div> {this.state.count} <button onClick={this.handler}>点击</button> <button onClick={() => { this.setState({ isShow: !this.state.isShow }) }}>切换</button> {this.state.isShow && <About/>} </div> ) } } export default App

About.js

import React, { PureComponent } from ‘react’ class About extends PureComponent { render() { return ( <div> <hr/> <p>这是About组件内容</p> </div> ) } foo = () => { console.log(‘about组件中的click操作发生了’) } componentDidMount() { // 当 about 组件挂载完成之后就可以执行 DOM 相关的操作，例如我们此时添加事件监听 window.addEventListener(‘click’, this.foo) } // 当前方法会在组件卸载之前执行,通常用来清除事件监听和定时器 componentWillUnmount() { window.removeEventListener(‘click’, this.foo) } } export default About