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（）

回答

相关问题