Question

当组件卸载时，是否会自动删除eventlisteners，或者我是否必须在componentWillUnmount()中删除它们？

我特指的是注册到实际组件的渲染内容的事件侦听器。

不手动删除它们是不好的做法吗？

示例：

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.content.addEventListener('click', () => alert('Hello'));
  }

  setRef = ref => {
    this.content = ref;
  }

  render() {
    return (
      <div ref={this.setRef}>
        <p>Hello World</p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

当组件卸载时，将从DOM中删除<div>元素。如果从DOM中删除元素，则也会删除其所有事件侦听器。

Answer 2

当组件卸载时，会自动删除eventlisteners吗？

不，它没有。

我是否必须在componentWillUnmount()删除它们？

是的，这是正确的方法。否则您可能会收到错误。下面是您在组件卸载时未正确删除的事件的回调中调用setState()时出现的错误示例：

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

以下是解决这个问题的方法：

componentDidMount() {
  this.content.addEventListener('click', this.myFunc);
}

componentWillUnmount() {
  this.content.removeEventListener('click', this.myFunc);
}

myFunc = () => {
  alert('Hello')
}

Answer 3

您必须使用componentWillUnmount方法删除事件侦听器，否则可能会导致内存泄漏，从而导致浏览器崩溃或无响应。

处理点击事件的推荐方法如下：

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {

  handleClick() {
    alert('Alert!');
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        <p>Hello World</p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

当组件卸载时，会自动删除eventlisteners吗？

3 个答案: