面试题：React中如何使用useEventListener实现基本的事件监听

创建自定义钩子 useEventListener：

import { useEffect } from'react';

const useEventListener = (eventName, handler, element = window) => {
  useEffect(() => {
    const target = element;
    if (target.addEventListener) {
      target.addEventListener(eventName, handler);
    }
    return () => {
      if (target.removeEventListener) {
        target.removeEventListener(eventName, handler);
      }
    };
  }, [eventName, handler, element]);
};

在组件中使用 useEventListener 监听窗口滚动事件：

import React, { useRef } from'react';

const MyComponent = () => {
  const scrollRef = useRef(0);

  const handleScroll = () => {
    const scrollY = window.pageYOffset;
    if (scrollY >= 100 && scrollRef.current < 100) {
      console.log('滚动距离达到100px');
    }
    scrollRef.current = scrollY;
  };

  useEventListener('scroll', handleScroll);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

useEffect 的作用：
- 在 useEventListener 中，useEffect 用于在组件挂载时添加事件监听器，并在组件卸载时移除事件监听器。这确保了事件监听器的正确生命周期管理，避免内存泄漏。例如，在挂载时，通过 target.addEventListener(eventName, handler) 添加事件监听器，在卸载时，通过 target.removeEventListener(eventName, handler) 移除事件监听器。
useRef 的作用：
- 在 MyComponent 中，useRef 创建了一个可变的 scrollRef 对象，其 .current 属性可以在组件的多次渲染之间保持不变。通过 scrollRef.current 记录上一次的滚动距离，这样可以避免在滚动过程中多次打印消息。只有当滚动距离从小于100px变为大于等于100px时才打印消息，而不是每次滚动到100px以上都打印。

面试题：React中如何使用useEventListener实现基本的事件监听

知识考点

面试题答案