Лабораторная работа №11: Работа с эффектами: useEffect и жизненный цикл

Теоретическая часть

Хук useEffect — это один из основных хуков React, который позволяет выполнять побочные эффекты в функциональных компонентах. Основные понятия:

Побочные эффекты — операции, которые взаимодействуют с внешним миром (запросы к API, подписки, таймеры и т.д.)
Жизненный цикл компонента — этапы существования компонента (монтирование, обновление, размонтирование)
Зависимости эффекта — массив зависимостей, определяющий, когда эффект должен запускаться

Синтаксис useEffect:

useEffect(() => {
  // Код побочного эффекта
  
  return () => {
    // Код для очистки эффекта (опционально)
  };
}, [зависимости]);

Варианты использования useEffect:

Пустой массив зависимостей [] — эффект выполняется один раз после монтирования компонента (аналог componentDidMount)
Массив с зависимостями [dep1, dep2] — эффект выполняется при монтировании и при изменении любой из зависимостей
Отсутствие массива зависимостей — эффект выполняется после каждого рендера

В этой лабораторной работе мы используем useEffect для загрузки данных о курсах с локального JSON-файла.

Задание

Реализовать загрузку данных о курсах с локального JSON-файла с использованием хука useEffect.

Пошаговая инструкция

Создайте JSON-файл с данными

В папке public создайте файл courses.json с данными о курсах:

# В терминале
touch public/courses.json

Добавьте следующее содержимое:

[
  {
    "id": 1,
    "title": "Английский",
    "description": "Курс для начинающих и продолжающих. Уровни A1-C1.",
    "price": 15000,
    "image": "https://via.placeholder.com/300x200?text=Английский"
  },
  {
    "id": 2,
    "title": "Немецкий",
    "description": "Изучайте немецкий язык с носителями. Все уровни.",
    "price": 14000,
    "image": "https://via.placeholder.com/300x200?text=Немецкий"
  },
  {
    "id": 3,
    "title": "Французский",
    "description": "Курс французского языка для путешествий и работы.",
    "price": 13000,
    "image": "https://via.placeholder.com/300x200?text=Французский"
  }
]

Модифицируйте компонент Courses

Откройте файл src/pages/Courses.js и добавьте импорт useEffect и useState:

import React, { useState, useEffect } from 'react';

Добавьте состояние для хранения курсов

Замените статический массив coursesData на состояние:

const [courses, setCourses] = useState([]);

Реализуйте эффект загрузки данных

Добавьте эффект, который будет загружать данные при монтировании компонента:

useEffect(() => {
  // Показываем индикатор загрузки
  console.log('Загрузка данных...');
  
  // Загружаем данные с JSON-файла
  fetch('/courses.json')
    .then(response => {
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных');
      }
      return response.json();
    })
    .then(data => {
      console.log('Данные загружены:', data);
      setCourses(data);
    })
    .catch(error => {
      console.error('Ошибка:', error);
      // Можно установить сообщение об ошибке в состояние
    });
  
  // Функция очистки (опционально)
  return () => {
    console.log('Очистка эффекта');
  };
}, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании

Обновите отображение карточек

Замените использование coursesData на courses в методе map():

{courses.map(course => (
  
))}

Добавьте индикатор загрузки

Добавьте состояние для отслеживания процесса загрузки:

const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

Обновите эффект загрузки:

useEffect(() => {
  setIsLoading(true);
  setError(null);
  
  fetch('/courses.json')
    .then(response => {
      if (!response.ok) {
        throw new Error('Сетевая ошибка');
      }
      return response.json();
    })
    .then(data => {
      setCourses(data);
      setIsLoading(false);
    })
    .catch(err => {
      setError(err.message);
      setIsLoading(false);
    });
}, []);

Добавьте отображение состояния загрузки и ошибки:

{isLoading ? (

Загрузка...

Загрузка курсов...

) : error ? (

Ошибка загрузки данных: {error}

) : (

{courses.map(course => (

))}

)}

Проверьте результат

Запустите проект и убедитесь, что данные о курсах загружаются из JSON-файла и отображаются на странице.

Если вы видите индикатор загрузки, а затем список курсов, значит, эффект реализован верно.

Если вы получаете ошибку CORS, убедитесь, что проект запущен через npm start, а не через открытие HTML-файла напрямую.

Дополнительное задание

Реализуйте автоматическое обновление данных каждые 5 минут с использованием setInterval в useEffect.

useEffect(() => {
  const fetchData = () => {
    setIsLoading(true);
    fetch('/courses.json')
      .then(response => response.json())
      .then(data => {
        setCourses(data);
        setIsLoading(false);
      })
      .catch(() => {
        setError('Ошибка загрузки данных');
        setIsLoading(false);
      });
  };
  
  // Загружаем данные при монтировании
  fetchData();
  
  // Устанавливаем интервал для автоматического обновления
  const intervalId = setInterval(fetchData, 300000); // 5 минут
  
  // Очищаем интервал при размонтировании компонента
  return () => clearInterval(intervalId);
}, []);

Критерий	Баллы
Использован `useEffect`	3
Загрузка данных из JSON	3
Обработка состояния загрузки	2
Обработка ошибок	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Интегрировать программный код в соответствующую инфраструктуру

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

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык интеграции программного кода в соответствующий участках проекта
Умение использовать выбранные языки программирования для написания программного кода

Лабораторная работа №11: Работа с эффектами: useEffect и жизненный цикл

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Дополнительное задание

Критерии оценки

Связь с демонстрационным экзаменом