ym104432846
Вставьте ссылку на видео из Youtube, Rutube, VK видео
Задайте вопрос по видео
Что вас интересует?
00:00:17
React и хуки useEffect:
  • 1. Рассматриваются способы реализации работы хука `useEffect` в функциональных и классических (классовых) компонентах React
  • 2. Приведен пример практического использования метода жизненного цикла компонента через состояние `state` и обновление значения через кнопку
  • 3. Упоминаются конкретные методы жизненного цикла (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`) и их связь с работой хука `useEffect`
00:01:05
Пример работы useEffect с простым состоянием:
  • 1. Реализован вывод сообщения через юзерский эффект (`useEffect`) при монтировании компонента
  • 2. Использование функции обновления страницы после изменения состояния (через `componentDidUpdate`)
  • 3. Юзерский эффект срабатывает единожды при первом монтировании компонента, передавая пустой массив вторым аргументом
00:02:14
Использование API-запросов через useEffect:
  • 1. Используют бесплатный API jsonplaceholder для получения данных
  • 2. Результат запроса помещают в состояние «дата»
  • 3. Применяют метод `map` к массиву полученных данных
00:04:06
Работа с уникальным ключом и массивом постов:
  • 1. Реакт предложили использовать уникальный ключ (id поста) для элементов массива
  • 2. Уникальные ключи применены, ошибки устранены
00:04:26
Создание компонента с использованием useEffect:
  • 1. Создан компонент, получающий данные одного поста через API по уникальному идентификатору
  • 2. Номер поста сохраняется в переменной `page`
  • 3. Реализован механизм постраничного перехода (пейджинга), увеличивающий номер страницы на единицу при каждом переходе
00:05:49
Детализация работы useEffect в компоненте Post:
  • 1. Разработан компонент поста, выполняющий корректный запрос к API и отображающий данные поста (заголовок, тело, идентификатор)
  • 2. Реализован механизм обновления данных при изменении номера страницы через зависимость от переменной пейдж в юз эффекте
  • 3. Добавлена возможность очистки данных и замены содержимого на три точки после удаления компонента с использованием метода unmount hook
0: Привет, это Дмитрий и канал типичный веб разработчик. Сегодня расскажу, что такое react, хук юс эффект и на примере покажу, как он работает. Поехали, я использую компьютер на базе windows вижл.
1: Studio code и стандартную сборку create react app все ссылки есть в описании к видео хук юз эффект привносит методы жизненного цикла, функциональные компоненты, а именно youth эффект срабатывает при монтировании компонент.
2: Как метод компонент дит маунт в классовом компоненте также юз эффект срабатывает каждый раз при обновлении компонента, как метод компонент ит апдейт и при удалении как метод компонент Вил анмаунт.
3: Для примера использую компонент состоянием велью из 1 видео, в котором я рассказывал про хук ю. Стейт итак, есть простой функциональный компонент состоянием и кнопкой обновления состояния вместе с состоянием велью Бо.
4: Является весь компонент. Таким образом, это идеально подходит для демонстрации работы hookah. Юз эффект, импортирую юз эффект.
5: Добавляю из эффект в компонент.
6: 1 параметром передаю функцию, которая просто выводит в лог слово эффект.
7: Обновляю страницу.
8: Use эффект отработал как метод компонент дисмаунт и в консоли видно результат
9: Теперь кликаю по кнопке, обновляю состояние велью и при этом обновляется весь компонент, так как я не передавал 2 параметр. Вью стейт юстей также обновляется вместе с компонентом. Имитируя метод компонент дит апдейт. Передаю
10: 2 параметр в виде пустого массива таким образом, юз эффект отрабатывает только 1 раз при монтировании компонента.
11: Вывод в консоль происходит только 1 раз. Усложняю задачу я хочу получить массив постов по ape, используя фетч.
12: Создаю состояние, дата для хранения массива.
13: Для получения данных использую бесплатный апи json плейсхолдер.
14: Беру готовый пример запроса и вставляю его в uz эффект.
15: Помещаю результат запроса в состояние дата.
16: Вывожу дата в разметку.
17: Так как дата массив используем метод map.
18: Вывожу заголовок поста в разметку.
19: Вывожу тело поста.
20: Проверяю.
21: Обрати внимание, реакт предлагает использовать уникальный ключ для каждого элемента массива добавляю id поста как ключ.
22: Проверяю, теперь работает без ошибок.
23: Получаю по апи список постов и вывожу его на страницу. Ещё немного усложняю задачу. Хочу создать компонент, который будет работать с апи и получать данные 1 поста самостоятельно. Мне надо будет только передавать идентификатор.
24: Поста в этот компонент удаляю юз эффект у компонента Пейч будет свой.
25: Пускай номер поста хранится в page.
26: Таким образом, например, можно читать посты по 1, начиная с 1.
27: Переименую функцию в at page.
28: При вызове номер страницы увеличится на 1.
29: Ввожу номер страницы в разметку.
30: При клике на кнопку вызываю ат пейдж.
31: Удаляю лишнюю разметку.
32: Удаляю юс эффект.
33: Компонент работает без ошибок. Создаю новый компонент пост.
34: Добавляю юз эффект спеч.
35: Создаю состояние post data для хранения данных поста.
36: Значение по умолчанию пустой объект.
37: Импортирую ю стейт и us эффект.
38: Помещаю результат запроса в пост дата.
39: Добавляю идентификатор поста в запрос.
40: Идентификатор получаю в виде пропса.
41: Вывожу заголовок поста в разметку.
42: Вывожу тело поста.
43: Вывожу айди.
44: Возвращаюсь в компонент апп gsx.
45: Импортирую компонент пост.
46: Вставляю его в разметку.
47: Передаю пейдж в виде пропса.
48: Проверяю.
49: Компонент пост выполняет запрос к api и получает пост с id 1.
50: Изменяю номер страницы, как видишь, ничего не происходит.
51: Добавляю пейдж в массив зависимостей. Теперь юз эффект как бы зависит от page, и при изменении значения. Пейдж выполняет новый запрос к апи. Теперь все работает корректно.
52: Также хук юз эффект позволяет имитировать метод компонент Вил анмаунт, то есть функция, которую я возвращаю с помощью ретон, выполнится при удалении компонента.
53: Например, заменю заголовок и тело поста на 3 точки.
54: И обнулю айди.
55: Чтобы увидеть результат, установлю таймаут в полсекунды на выполнение запроса.
56: Видно, как при загрузке новых данных старые тайтл и body заменяются точками.
57: На этом все, пробуй экспериментируй и у тебя все получится. Спасибо за внимание. До встречи в новых видео.