面试题：React中如何在组件内添加事件监听器并移除

Question

请描述在React组件中，怎样添加一个点击事件监听器，并且在组件卸载时移除该监听器。请结合类组件和函数组件分别阐述实现方式。

Answer 1

类组件

1. 添加点击事件监听器： 在类组件的 render 方法中，通过 onClick 属性为元素添加点击事件处理函数。例如：

import React, { Component } from'react';

class ClickComponent extends Component {
  handleClick = () => {
    console.log('按钮被点击了');
  }

  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

export default ClickComponent;

2. 移除点击事件监听器： 如果是要移除一些自定义的 DOM 元素上的监听器（而不是 React 元素通过 onClick 这种方式添加的监听器，React 会自动管理其生命周期内的事件绑定与解绑），可以在 componentWillUnmount 生命周期方法中进行移除操作。假设我们在 componentDidMount 中为 window 添加了一个点击事件监听器：

import React, { Component } from'react';

class ClickComponent extends Component {
  handleClick = () => {
    console.log('窗口被点击了');
  }

  componentDidMount() {
    window.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    window.removeEventListener('click', this.handleClick);
  }

  render() {
    return <div>这是一个组件</div>;
  }
}

export default ClickComponent;

函数组件

1. 添加点击事件监听器： 在函数组件中同样通过 onClick 属性添加点击事件处理函数。例如：

import React from'react';

const ClickComponent = () => {
  const handleClick = () => {
    console.log('按钮被点击了');
  }
  return <button onClick={handleClick}>点击我</button>;
}

export default ClickComponent;

2. 移除点击事件监听器： 使用 useEffect Hook 来模拟类组件的生命周期行为。如果要移除自定义 DOM 元素上的监听器，useEffect 返回的清理函数会在组件卸载时执行。例如为 window 添加点击事件监听器并在卸载时移除：

import React, { useEffect } from'react';

const ClickComponent = () => {
  const handleClick = () => {
    console.log('窗口被点击了');
  }

  useEffect(() => {
    window.addEventListener('click', handleClick);
    return () => {
      window.removeEventListener('click', handleClick);
    };
  }, []);

  return <div>这是一个组件</div>;
}

export default ClickComponent;

这里 useEffect 的第二个参数 [] 表示该副作用只在组件挂载和卸载时执行，相当于 componentDidMount 和 componentWillUnmount 的结合。