元件移除

componentWillUnmount()

在從 DOM 解除安裝元件之前呼叫此方法。

這是一個執行清潔操作的好地方，例如：

• 刪除事件偵聽器。
• 清除計時器。
• 停止套接字。
• 清理 redux 狀態。

componentWillUnmount(){
  ...
}

在 componentWillUnMount 中刪除附加事件偵聽器的示例

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}