@eugenedrvnk

Какой аналог Vue.mixin в React?

При написании проектов на Vue довольно часто прибегал к использованию плагина (который являлся глобальным миксином) для получения размеров экрана. Т.е, я где угодно в приложении мог заюзать this.windowWidth и this.windowHeight и это было максимально удобно.

Сейчас появилась необходимость сделать что-то похожее в реакте. Изначально написал хук, который динамически возвращает размеры окна :

import {useState, useEffect} from 'react'

export const useWindowSize = () => {
  const [size, setSize] = useState({
    width: window.innerWidth, 
    height: window.innerHeight
  })

  const updateWindowSize = () => {
    setSize({
      width: window.innerWidth, 
      height: window.innerHeight
    })
  }

  useEffect(() => {
    window.addEventListener('resize', updateWindowSize)

    return window.removeEventListener(updateWindowSize)
  }, [])

  return size
}


И в принципе его то можно использовать, но если импортить его в каждый компонент, то, условно при наличии таких 5 компонентов, у меня 5 раз продублируется навешивание слушателя на resize. Какие есть удобные и аккуратные варианты для решения подобной ситуации, что бы эти размеры окна вычислялись в одном месте и дальше повсеместно использовались?

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

import WindowSize from './WindowSize';
const {width, height} = useContext(WindowSize)


Т.к. вьюшный вариант с тем, что не нужно что - либо импортировать, а просто берёшь и юзаешь this.windowWidth будет поудобнее :(
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
@krakaka
общее для разных компонентов состояние нужно хранить в сторе
изменение данных окна меняет стор с дебаунсом
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Если цель получить размер, то в чем проблема получить его вот так window.innerWidth, в любом месте программы?

Если надо реагировать на изменение размера, то напиши соответствующий хук и используй где надо. Или скопипасти с интернета.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы