迹忆客 专注技术分享

在 React 的函数组件中使用 addEventListener 方法：

1. 在元素上设置 ref 属性。
2. 使用 ref 上的当前属性来访问元素。
3. 在 useEffect 挂钩中添加事件侦听器。

import {useRef, useEffect} from 'react';

const App = () => {
  const ref = useRef(null);

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

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

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
};

export default App;

我们在功能组件的 useEffect 钩子中向元素添加了一个事件侦听器。

如果要向窗口或文档对象添加事件侦听器，请使用相同的方法，但不包括 ref。

useRef() 钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的按钮元素。

当我们将 ref prop 传递给元素时，例如 <div ref={myRef} />，React将ref对象的 .current 属性设置为对应的DOM节点。

我们将一个空的 dependencies 数组传递给 useEffect 钩子，因此它只会在组件安装时运行。

我们只想调用一次 addEventListener 方法 - 当组件安装时。

useEffect(() => {
  const handleClick = event => {
    console.log('Button clicked');
  };

  const element = ref.current;

  element.addEventListener('click', handleClick);

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

我们将对该元素的引用存储在一个变量中，并使用 addEventListener 方法向按钮添加一个点击事件侦听器。

该方法采用的第一个参数是要侦听的事件类型，第二个参数是在指定类型的事件发生时调用的函数。

我们从 useEffect 钩子返回的函数在组件卸载时被调用。

我们使用 removeEventListener 方法来删除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。