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