Работая над одним проектом, мне нужно было убедиться, что он полностью адаптирован к мобильным устройствам без каких-либо проблем, и поскольку я хотел взять на себя 100% ответственности за процессы приложения, мне нужно было отслеживать определенные изменения во времени, поскольку это было ключевым для приложения.
Я нашел в Интернете несколько решений, большинство из которых имели свои недостатки, и я не был слишком впечатлен, поэтому я решил, что лучше всего будет вырезать свое. Ниже приведены мои фрагменты кода, которые сделали волшебство, которое привело меня к созданию пользовательского хука. Мне понравилась идея хуков (useState, useRef, useReducer, useContext++)… простота в реализации привела меня к использованию их возможностей наилучшим образом.
Поэтому я постарался максимально упростить свое решение, чтобы его можно было повторить для решения других задач.
useWindowDimensions.jsx
import React, { useEffect, useState } from "react";
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowDimensions;
}
*Как это использовать. в пользовательском компоненте ‘MyComponent’.
import React from 'react';
import useWindowDimensions from './hooks/useWindowDimensions';
const MyComponent = () => {
......
const { width:w, height:h} = useWindowDimensions();
......
return (
<>
<AnotherComponent width={w} height={h} />
</>
);
}
export default MyComponent
Надеюсь, это было действительно полезно…
дайте мне знать, что вы думаете, ребята.