ReactJs如何正確使用componentWillUnmount（）

從官方教程： componentWillUnmount（）這之前一個組件是卸載和銷燬調用。在此方法中執行任何必要的清理，如無效定時器，取消網絡請求，或者清理在componentDidMountReactJs如何正確使用componentWillUnmount（）

創建的任何DOM元素，但我還沒有看到全面實施這種生活的一個真實的例子循環方法。

我知道如何使計時器無效。至於取消網絡請求，取回主要用於jQuery的反應項目，它還沒有中止功能。

所以這是我想知道的最後一部分：清理在componentDidMount

創建的這是什麼意思任何DOM元素？我怎樣才能實現它？

來源

2016-11-23 Ali Ankarali

如果網絡請求發送庫支持中止正在進行的網絡請求調用，您可以明確地調用componentWillUnmount方法。

但按照清潔DOM元素而言，我會根據我的經驗和用法給出一些示例。

第一個是 -

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

在這裏，我刪除，當組件安裝我添加了點擊事件監聽器。

第二個是 -

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打開後清理引導模式。

我確定有很多其他用例，但這些都是我用過的情況。我希望它能幫助你。

來源

2016-11-23 10:16:45 WitVault

使用React創建Components時，並非每個庫都與其想要管理DOM的理念完美地結合在一起。

一個例子是使用像c3這樣的圖形庫。 c3預計會得到一個DOM節點，並將創建/管理它自己的標記遠離React。在這種情況下，當組件從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> 
    ); 
    } 
}

這裏陣營創建一個單一div作爲c3佔位符添加它的內容。此過程在componentDidMount生命週期掛鉤中啓動，並在componentWillUnmount中再次清除。

來源

2016-11-23 10:19:15

ReactJs如何正確使用componentWillUnmount（）

回答

相關問題