ReactJs Jak prawidłowo używać componentWillUnmount()

Question

Od oficjalnego tutoriala: componentWillUnmount() jest wywoływany bezpośrednio przed składnikiem jest odmontowany i zniszczone. Wykonać wszelkie niezbędne porządki w tej metodzie, takich jak liczniki unieważniania, anulowanie żądania sieciowe lub czyszczenia żadnych elementów DOM, które zostały utworzone w componentDidMount

Ale ja naprawdę nie widział prawdziwego przykład pełnej realizacji tego życia metoda-cyk.

Wiem, jak unieważniać liczniki czasu. Jeśli chodzi o anulowanie żądań sieciowych, pobieranie jest najczęściej używane w projektach reagujących na jQuery i nie przerwała jeszcze funkcjonalności.

więc jest to ostatnia część Zastanawiam: sprzątanie żadnych elementów DOM, które zostały utworzone w componentDidMount

Co to znaczy? Jak mogę to wdrożyć?

Answer 1

Jeśli sieć poprosi bibliotekę obsługującą o przerwanie trwającego połączenia z siecią, możesz ją wywołać w metodzie componentWillUnmount.

Ale jeśli chodzi o czyszczenie elementów DOM, podam przykłady na podstawie mojego doświadczenia i zastosowania.

Pierwszy z nich to -

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

Oto jestem usuwania słuchacza zdarzenia kliknięcia które dodaną gdy komponent zamontowane.

drugi jest -

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

Tutaj staram się zintegrować d3.js z zareagować. W componentWillUnmount Usuwam element wykresu z domingu.

Poza tym użyłem componentWillUnmount do czyszczenia modów bootstrap po otwarciu.

Jestem pewien, że istnieje mnóstwo innych przypadków użycia, ale są to przypadki, w których użyłem. Mam nadzieję, że Ci to pomoże.

Answer 2

Podczas tworzenia Components za pomocą Reacta nie każda biblioteka dobrze integruje się z filozofią zarządzania modelem DOM.

Przykładem może być biblioteka graficzna, taka jak c3. c3 spodziewa się, że otrzyma węzeł DOM i utworzy/będzie zarządzał własnym znacznikiem z dala od React. W takim przypadku należy usunąć wszystkie elementy utworzone przez tę bibliotekę, gdy komponent zostanie usunięty z 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> 
    ); 
    } 
} 

Tutaj React tworzy pojedynczy div jako zastępczy dla c3 dodać jego zawartość. Ten proces jest uruchamiany w haku cyklu życia componentDidMount i ponownie oczyszczony w componentWillUnmount.