[解決済み] ReactJsでcomponentWillUnmount()を正しく使う方法

質問

公式チュートリアルより。

componentWillUnmount() は、コンポーネントがアンマウントされ、破棄される直前に呼び出されます。このメソッドでは、タイマーの無効化、ネットワークリクエストの取り消し、あるいは、DOM 要素のクリーンアップなど、必要なクリーンアップを行います。 componentDidMount

タイマーの無効化について理解しました。 fetch で中止することができます。 AbortController . しかし、私は "で作成されたすべての DOM 要素をクリーンアップすることが理解できないのです。 componentDidMount "の例を見ることができますか？

どのように解決するのですか？

ネットワークリクエスト送信ライブラリが進行中のネットワークリクエストの呼び出しを中断することをサポートしている場合、間違いなくそれを componentWillUnmount メソッドを使用します。

しかし DOM 要素が気になるところです。私の現在の経験に基づいて、いくつかの例を挙げます。

まず1つ目は

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>
        );
    }
}

ここでは、コンポーネントがマウントされたときに追加したクリックイベントリスナーを削除しています。

2つ目は - です。

import React from 'react';
import { Component } from 'react';
import ReactDom from 'react-dom';
import d3Chart from './d3charts';


export default class Chart extends Component {

    static propTypes = {
            data: React.PropTypes.array,
            domain: React.PropTypes.object
    };

    constructor(props){
        super(props);

    }

    componentDidMount(){
        let el = ReactDom.findDOMNode(this);
        d3Chart.create(el, {
            width: '100%',
            height: '300px'
        }, this.getChartState());
    }

    componentDidUpdate() {
        let el = ReactDom.findDOMNode(this);
        d3Chart.update(el, this.getChartState());
    }

    getChartState() {
        return {
            data: this.props.data,
            domain: this.props.domain
        }
    }

    componentWillUnmount() {
        let el = ReactDom.findDOMNode(this);
        d3Chart.destroy(el);
    }

    render() {
        return (
            <div className="Chart">
            </div>
        );
    }
}

ここでは、以下のように統合しようとしています。 d3.js をリアクトで componentWillUnmount ; DOMからチャート要素を削除しています。

それとは別に、私は componentWillUnmount は、ブートストラップ・モーダルを開いた後にクリーンアップするためのものです。

他にもたくさんのユースケースがあると思いますが、これらは、私が componentWillUnMount . お役に立てれば幸いです。