Реактивная навигация с пользовательским React-хуком

Введение

В этом проекте вы научитесь создавать пользовательский React-хук под названием useWindowSize, чтобы получить текущий размер окна и использовать его для условного рендеринга панели навигации в веб-приложении.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Реализовать пользовательский хук useWindowSize, чтобы получить текущий размер окна
• Использовать хук useWindowSize в компоненте App, чтобы обновить панель навигации в зависимости от ширины окна

🏆 Достижения

После завершения этого проекта вы сможете:

• Создать пользовательский React-хук для encapsulation повторно используемой функциональности
• Использовать хуки useState и useEffect для управления состоянием и побочными эффектами
• Условно рендерить компоненты в зависимости от текущего размера окна

Skills Graph

Реализация хука useWindowSize

Для начала откройте редактор. Вы можете увидеть следующие файлы в редакторе.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

В этом шаге вы научитесь реализовывать пользовательский хук useWindowSize, чтобы получить текущий размер окна.

1. Откройте файл useWindowSize.js, расположенный в директории src/Hooks.
2. В этом файле импортируйте необходимые зависимости:

import { useEffect, useState } from "react";

3. Определите функцию useWindowSize:

import { useEffect, useState } from "react";

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

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

Пояснение:

• Функция useWindowSize возвращает объект, содержащий текущую ширину и высоту окна.
• Хуки useState используется для создания переменной состояния windowSize и функции setWindowSize для ее обновления.
• Функция changeWindowSize определена для обновления состояния windowSize при изменении размера окна.
• Хуки useEffect используется для добавления слушателя события resize и удаления его при отмонтировании компонента.
• Объект windowSize возвращается из функции useWindowSize.

Тестирование приложения

1. Сохраните файл useWindowSize.js.
2. Загрузите зависимости с помощью команды npm install в терминале, подождите, пока зависимости будут загружены, а затем запустите проект с помощью команды npm start.
3. Как только проект успешно запустится, нажмите на "Web 8080", чтобы просмотреть его в браузере.
4. Эффект заключается в том, что при изменении размера окна пользователем нижний контент будет отображать ширину окна, а верхняя панель навигации будет скрывать два подменю на маленьких экранах и показывать три меню на больших экранах.

Поздравляем! Вы успешно реализовали хук useWindowSize и использовали его в компоненте App для обновления панели навигации в зависимости от размера окна.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.