javascript - 如何为同一个React组件添加多个事件监听器？

Question

如何以更可重用的方式在同一组件中添加多个事件监听器？

  componentDidMount: function() {
    window.addEventListener('resize', this.handleVisible);
    window.addEventListener('scroll', this.handleVisible);
...
  },

  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleVisible);
    window.removeEventListener('scroll', this.handleVisible);
...

  },

Answer 1

您可以创建一个像这样的自定义钩子(Hook):

import { useEffect } from 'react'

export const useResizeScroll = callback => {
  useEffect(() => {
    window.addEventListener('resize scroll', callback);
    return () => window.removeEventListener('resize scroll', callback);
  }, [callback]);
};

然后在您的组件中实现它，如下所示:

const MyComponent = () => {
  useResizeScroll(handleVisible)

  function handleVisible() { ... }

  return (...)
}

注意:

这将要求您转移到组件的钩子(Hook)实现。

因此，如果您使用 this.state = { ... }，您需要学习如何使用 React 的 useState 钩子(Hook):React useState Hook

更新:

如果您希望 Hook 更加灵活，例如选择希望组件 Hook 的事件监听器，那么您可以这样做:

export const useResizeScroll = (eventListener, callback) => {
  useEffect(() => {
    window.addEventListener(eventListener, callback);
    return () => window.removeEventListener(eventListener, callback);
  }, [callback]);
};

然后像这样实现:

useResizeScroll('resize scroll', handleVisible)

更高级的用例:

您还可以通过使用 React Context 来改进您的自定义钩子(Hook)。下面是实现跟踪窗口宽度的 Hook 的示例。

import React, { createContext, useContent, useEffect, useState } from 'react'

const ViewportContext = createContext({ width: window.innerWidth })

export const ViewportProvider = ({ children }) => {
  const [width, setWidth] = useState(window.innerWidth)

  function handleResize() {
    setWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <ViewportContext.Provider value={{ width }}>
      {children}
    </ViewportContext.Provider>
  )
}

export const useViewport = () => {
  const { width } = useContext(ViewportContext)
  return { width }
}

然后您可以在任何组件中使用它，如下所示:

const { width } = useViewport()

这应该为您提供足够的信息来构建自定义 Hook 来匹配您的用例。