Come usare correttamente componentWillUnmount() in ReactJs

Da tutorial ufficiale:

componentWillUnmount() viene richiamato immediatamente prima di un componente è smontato e distrutto. Eseguire qualsiasi operazioni di pulizia necessarie in questo metodo, come invalidante, timer, l’annullamento delle richieste di rete, o la pulizia di eventuali elementi del DOM che sono stati creati in componentDidMount

Ho capito “invalidare timer”. fetch può essere interrotta con AbortController. Ma non capisco “la pulizia di eventuali elementi del DOM che sono stati creati in componentDidMount“, è possibile vedere esempi di questo caso?

 

4 Replies
  1. 37

    Se la rete di richiesta di invio libreria supporta l’interruzione in corso rete chiamata di richiesta, si può sicuramente chiamare che in componentWillUnmount metodo.

    Tuttavia, per quanto riguarda la pulizia di DOM elementi di preoccupazione. Io vi darò un paio di esempi, in base alla mia esperienza attuale.

    Primo è –

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

    Qui sto rimuovendo l’evento click ascoltatore che ho aggiunto quando il componente montato.

    Seconda è –

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

    Qui sto cercando di integrare d3.js con reagiscono in componentWillUnmount; sto rimuovendo l’elemento del grafico da DOM.

    A parte che ho usato componentWillUnmount per la pulizia di bootstrap modali dopo l’apertura.

    Sono sicuro che ci sono tonnellate di altri casi, ma questi sono i casi in cui ho usato componentWillUnMount. Spero che ti aiuta.

  2. 5

    Durante la creazione di Components con Reagire, non ogni biblioteca si integra bene con la filosofia di voler gestire la DOM.

    Un esempio di questo potrebbe essere l’utilizzo di una libreria grafica come c3. c3 si aspetta di essere dato un nodo DOM e di creare /gestire il proprio markup di distanza dal Reagire. In questo caso si dovrebbe gestire la pulizia di eventuali elementi creati da questa libreria quando il componente viene rimosso da DOM.

    import React, { Component, PropTypes } from 'react';
    import c3 from 'c3';
    
    export default class Graph extends Component {
    
      componentDidMount () {
        this._initGraph();
      }
    
      componentWillUnmount () {
        this.graph = this.graph.destroy();
      }
    
      _initGraph () {
        this.graph = c3.generate({
          bindto: this.refs.graph
        });
      }
    
      render () {
        return (
          <div className="graph">
            <div className="graph__graph" ref="graph"></div>
          </div>
        );
      }
    }

    Qui Reagire crea un singolo div come segnaposto per c3 per aggiungere contenuti. Questo processo è calciato in componentDidMount ciclo di vita del gancio, e ripulito di nuovo in componentWillUnmount.

  3. 4

    In questo semplice esempio (esempio preso da Reagire Docs) io la sto usando per la compensazione intervallo di un Orologio componente.
    Per esempio, nella tua pagina hai 2 schede, una di loro sta mostrando User Info e la seconda scheda è User Schedule che mostra un clock live là. Una volta che si passa a User Schedule scheda componentDidMount sarà chiamato per impostare il timer. E una volta che si torna a User Info, non c’è bisogno di mantenere questo intervallo di gancio e si può scrivere la separazione o di annullare la logica componentWillUnmount evento.

    import React from "react";
    export default class Clock extends React.Component {
      constructor(props) {
        console.log("Clock", "constructor");
        super(props);   
        this.state = {
          date: new Date()
        };
      }
      tick() {   
        this.setState({
          date: new Date()
        });
      }
      //These methods are called "lifecycle hooks".
      componentDidMount() {
        console.log("Clock", "componentDidMount");
        this.timerID = setInterval(() => {
          this.tick();
        }, 1000);
      }
      //These methods are called "lifecycle hooks".
      componentWillUnmount() {
        console.log("Clock", "componentWillUnmount");
        clearInterval(this.timerID);
      }
      render() {
        return (        
            <div>It is {this.state.date.toLocaleTimeString()}.</div>
        );
      }
    }
  4. 0

    Soluzione è semplice come segue:

    import React from "react"
    export default class App extends React.Component {
    
      isMounted = false
    
      componentDidMount(){
        this.isMounted = true
        if (this.isMounted){
          this.setState({'anyState': anyState})  //call setState if component isMounted
        }
      }
    
      componentWillUnmount(){
        this.isMounted = false
      }
    
      render(){
        return(
          <div />
        )
      }
    }

Lascia un commento