Как добавить несколько слушателей событий для одного и того же компонента реакции?

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 = { ... }, вам нужно будет go узнать, как использовать React's useState hook: React useState Hook

UPDATE:

Если вы хотите, чтобы ловушка была более гибкой, например, выбирая, какие прослушиватели событий вы хотите, компонент для подключения, тогда вы можете сделать это:

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

Это должно предоставить вам достаточно информация для создания пользовательского хука, соответствующего вашему варианту использования.