如何在ReactJs中正确使用componentWillUnmount() [英] How to properly use componentWillUnmount() in ReactJs

问题描述

摘自官方教程:

componentWillUnmount()在卸载和销毁组件之前立即被调用.使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除在 componentDidMount

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount

我了解使计时器无效".可以使用 AbortController 中止 fetch .但是我不理解清理在 componentDidMount 中创建的所有DOM元素"，我能看到这种情况的示例吗?

I understood "invalidating timers". fetch can be aborted with AbortController. But I don't understand "cleaning up any DOM elements that were created in componentDidMount", can I see examples for that case?

推荐答案

如果网络请求发送库支持中止正在进行的网络请求调用，则可以肯定地在 componentWillUnmount 方法中调用它.

If the network request sending library supports aborting the ongoing network request call, you can definitely call that in componentWillUnmount method.

但是，与清理 DOM 元素有关的问题值得关注.根据目前的经验，我将举几个例子.

However in relation to cleaning up of DOM elements is of concern. I will give a couple of examples, based on my current experience.

第一个是-

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

在这里，我要删除在安装组件时添加的click事件监听器.

Here I am removing the click event listener which I added when the component mounted.

第二个是-

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 与react集成到 componentWillUnmount 中；我正在从DOM中删除图表元素.

Here I am trying to integrate d3.js with react into componentWillUnmount; I am removing the chart element from the DOM.

除此之外，我已经使用 componentWillUnmount 在打开后清理引导程序模式.

Apart from that I have used componentWillUnmount for cleaning up bootstrap modals after opening.

我肯定还有很多其他用例，但是这些都是我使用 componentWillUnMount 的情况.希望对您有帮助.

I am sure there are tons of other use cases out there, but these are the cases where I have used componentWillUnMount. I hope it helps you.

这篇关于如何在ReactJs中正确使用componentWillUnmount()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！