javascript - example - react lifecycle diagram

Cómo utilizar correctamente componentWillUnmount() en ReactJs

Question

Del tutorial oficial:

componentWillUnmount() se invoca inmediatamente antes de que un componente se desmonte y se destruya. Realice cualquier limpieza necesaria en este método, como invalidar los temporizadores, cancelar solicitudes de red o limpiar cualquier elemento DOM que se haya creado en componentDidMount

Entendí "invalidar temporizadores". fetch puede AbortController con AbortController . Pero no entiendo "la limpieza de cualquier elemento DOM que se creó en componentDidMount ", ¿puedo ver ejemplos para ese caso?

Answer 1

Al crear Components con React, no todas las bibliotecas se integran bien con su filosofía de querer administrar el DOM.

Un ejemplo de esto sería usar una biblioteca de gráficos como c3 . c3 espera recibir un nodo DOM y creará / administrará su propio marcado lejos de React. En este caso, debe administrar la limpieza de cualquier elemento creado por esta biblioteca cuando su componente se elimine del 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>
    );
  }
}

Aquí, React crea un solo div como marcador de posición para que c3 agregue su contenido. Este proceso se inicia en el gancho del ciclo de vida de componentDidMount y se limpia nuevamente en componentWillUnmount .

Answer 2

En este ejemplo simple (ejemplo tomado de React Docs) lo estoy usando para borrar el intervalo de un componente del Reloj. Por ejemplo, en su página tiene 2 pestañas, una de ellas muestra User Info y la segunda pestaña es User Schedule que muestra un reloj en vivo allí. Una vez que cambie a User Schedule pestaña User Schedule , se llamará a componentDidMount para configurar el temporizador. Y una vez que vuelva a User Info , no es necesario mantener este enlace de intervalo y puede escribir su lógica de desvinculación / cancelación de la suscripción en el evento componentWillUnmount .

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

Answer 3

Si la biblioteca de envío de solicitudes de red admite el aborto de la llamada de solicitud de red en curso, definitivamente puede llamar al método componentWillUnmount .

Sin embargo, en relación con la limpieza de los elementos DOM es una preocupación. Daré un par de ejemplos, basados ​​en mi experiencia actual.

El primero es ...

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

Aquí estoy eliminando el detector de eventos de clic que agregué cuando se montó el componente.

La segunda es -

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

Aquí estoy tratando de integrar d3.js con reaccionar en componentWillUnmount ; Estoy eliminando el elemento del gráfico del DOM.

Aparte de eso, he usado componentWillUnmount para limpiar los modos de arranque después de abrir.

Estoy seguro de que hay muchos otros casos de uso por ahí, pero estos son los casos en los que he usado componentWillUnMount . Espero que te ayude.