如何为同一个 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

你可以像这样创建一个自定义钩子：

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 (...)

}

笔记：

这将要求您转到组件的钩子实现。

所以如果你在使用this.state = { ... }，你需要去学习如何使用 React 的useState钩子：React useState Hook

更新：

如果您希望挂钩更灵活，例如选择您希望组件挂钩的事件侦听器，那么您可以这样做：

export const useResizeScroll = (eventListener, callback) => {

  useEffect(() => {

    window.addEventListener(eventListener, callback);

    return () => window.removeEventListener(eventListener, callback);

  }, [callback]);

};

然后像这样实现它：

useResizeScroll('resize scroll', handleVisible)

更高级的用例：

您还可以通过使用 React Context 来改进您的自定义钩子。这是一个实现跟踪窗口宽度的钩子的示例。

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()

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

Answer 2

这个 ：

window.addEventListener('resize scroll', callback);

对我不起作用。

我不得不这样做：

window.addEventListener('resize', callback);
window.addEventListener('scroll', callback);

但这有效：

window.removeEventListener('resize scroll', handleResize)