==Как рендерится UI в React== 10:27 Фаза 1: Рендеринг и сравнение 10:44 Дерево элементов 14:26 Дерево волокон (React Fiber) 18:18 Что такое Fiber 19:03 Структура Fiber 25:38 Работа (effect) 36:04 Как происходит обновление интерфейса 46:53 Эвристика сравнения изменений 50:12 Фаза 2: Commit ==Оптимизация компонетов== 1:01:40 State Colocation 1:04:28 Ремаунты 1:10:19 HOC (Higher Order Components) 1:19:50 React.memo ==Отношение родительских и дочерних компонентов== 1:22:58 Props drilling 1:26:03 Контекст 1:32:19 Порталы ==Паттерны== 1:38:07 Паттерны 1:46:20 Ответы на вопросы
Спасибо за лекцию! заметил пару моментов: 36:34 "Мы с вами помним, что у нас есть два действия, которые вызывают ререндер - это установка состояния ... и изменение пропсов". Для ререндера есть только одно условие - это изменение стейта компоненты или ее родителя. Изменение пропсов - это частный случай изменения стейта родителя. 1:28:45 "Самая большая проблема контекста ... - это то, что при изменении значения у нас перерендериваются все дочерние компоненты". У контекста нет такой пробелмы. При изменении значения перерендериваться будут только потребители контеста, использующие useContext. 1:29:24 "RestorantsPage завернуть в memo". Оборачивание в memo не поможет, если компонента является потребителем контекста. Независимо от memo, при изменении значения value, компоненты с useContext будут ререндериться. Вообще использование memo тут неуместно, и следует лишь из неверного допущения о том, что все дочерние элементы ререндерятся при изменении значения контекста.
@@xxxxrat если не ошибаюсь то эта проблема решается использованием хука useContext , а проблема описанная вами это устаревший метод Consumer и все неверные предположения идут от него.
Качественный, детальный разбор работы react "под капотом" + автор непринужденно, красочными аналогиями и в простых примерах доносит далеко не самые простые концепции. Оч полезно, лайк)
просто офигеннейший доклад! Такого не хватает, ютуб сейчас на 99 наводнён бесполензным пересказами, как работают хуки и какие виды бывают... Про underhood, такое ощущение, либо никто не хочет знать, либо react-блогеры сами не понимают, как эта магия работает)
В иституте засыпаешь после 30 минут , а тут добровольно сидишь 2 часа, еще и слушаешь внимательно и пытаешься очмвслить. Вот она сила мотивации и хорошей подачи автора.
ХВхвх "Он знает своего родителя и знает одного своего родственника, либо брата либо сестру. Возможно его брат или сестра знают еще одного брата или сестру. Согласен, семейка странная" ххвхв это шедеврально, сделало мой день)
Правильно ли я понимаю, что в старых версиях React (15 и ниже) при вызове this.setState рендерилось всё дерево React элементов целиком, а затем начиналось сравнение деревьев React элементов? А в архитектуре Fiber рендеринг React элементов происходит поэтапно, в процессе создания Work In Progress Fiber дерева, и сравнение выполняется по мере обработки каждого узла Fiber?
Спасибо за лекцию! Не совсем ясно с порталами и модалками. Обычно модалке не задается position absolute. Делаем для нее position fixed, top:0, left:0 with и height - 100%. И модалка всегда по центу, внутри отрисовываем контент. Для чего тут создавать портал не совсем понятно.
такие вопросы к лектору: утверждается, что файбер нода мутабельна, но в то же время в презентации показывается, как файбер дерево клонируется(!). если файбер ноды клонируется, а старое дерево удаляется, значит файберы тоже иммутабельны? (или иллюстрации в презентации некорректные?). либо они могут себя вести по разному в зависимости от эффектов, которые должны быть выполнены, и тогда клонированное дерево может удалится, и только обновиться исходное?
O(n³) => O(n) за счет пользовательской настройки и изменения типа (что формально тоже задается пользователем react). Whaaaat... Пойду собесы по алгоритмам посмотрю)
1:31:25, Не совсем правильно. Redux не использует контекст от слова совсем. Это ядро, которое написано на ванильном JS'e и контекста там и близко нет. А вот контекст использует либа react-redux, чтобы коннектить наши компоненты со стором. Это принципиальная разница на самом деле.
@@temaProg не могу разобраться: запускаем наш код, срабатывают render всех компонентов, JSX разворачивает в React.createElement, строится дерево элементов и соответствующий ему связанный список fiber нод. Далее где-нибудь в середине дерева изменился стейт у компонента, каким образом появляется новое дерево? первоначальное построилось благодаря вызову всех существующих render, а новое? мы же заново не запускаем у абсолютно всех компонентов render? и уже 2 дерева сравниваются - обход связанного списка механизмом reconcillation
Я вооообще ничего не понял) не ну ладно, что-то понял, но вот например. Лектор сказал, что Fiber мутабельный, но почему создается новое дерево из Fiber? Почему каждый Fiber клонируется? Я всегда думал, что это происходит с VDOM-ом. А вот Fiber уже подлавливают новые React Element-ы.
Лекции 2 года, но вроде уже 2 года назад абсолютно каждый айтишник отлично знал что человек видит только 60 кадров это бред полный. Если ваш сайт будет отображать 60фпс на айфоне про версии у вашего руководителя, он пошлёт вас просто, потому что это будет лагать для него на фоне системы, которая работает в 120.
Что, опять? Ну как в такой серьезной лекции можно утверждать, что изменение пропсов влечет перерендеринг? Простой пример: пропсы завязываем на ref, чтобы не происходил перерендеринг, и по клику в родителе их меняем. Пока не произойдет перерендеринг родителя (а в нашем примере он не происходит), fiber не узнает про изменение пропсов, потому что return родителя не вызовется. В остальном очень полезно, спасибо.
Это уровень знаний эрудита, у которого много свободного времени. Думаю, что многие сеньоры не знают как работают файберы и как может пригодиться key, кроме как в списке элементов. Но лекция очень интересная. Тем, кому она попалась, очень повезло.
Могу ошибаться, но вроде изменение пропсов никак не влияет на решение React ререндерить элемент, и не важно изменилась ссылка на объект пропсов или нет. React всегда ререндерит элемент, если изменился стэйт родителя. Каждый раз сравнивать стейты было бы слишком дорого, поэтому мы сами должны сообщить React когда стоит сравнить пропсы через memo.
Верно ли что React.memo стоит юзать в тех случаях, когда у родителя меняется стейт, а у дочернего ничего не меняется? Для того, чтоб этот дочерний компонент не ререндерился? Немного запутала лекция тем, что изменение пропсов заставляет компонент ререндерится, хотя скорее речь о том, что изменение пропсов завязанных на стейте родителя вызывает ререндер. Что звучит абсурдно, учитывая что любой изменение стейта родителя вызывает ререндер дочерних. Короче я пока писал уже разобрался вроде как…
лекция классная, но первая часть слишком метафоричная, с отвлекающими отступлениями. Почему не сказать "сиблинги", а все время говорить про каких-то братьев и сестер, которые, по идее, ничем друг от друга не отличаются... Вторая часть отличная, спасибо ) Презентация ограничивала в объяснениях, не хватало лайфкодинга, манипуляций с кодом, из-за этого приходилось много жестикулировать
==Как рендерится UI в React==
10:27 Фаза 1: Рендеринг и сравнение
10:44 Дерево элементов
14:26 Дерево волокон (React Fiber)
18:18 Что такое Fiber
19:03 Структура Fiber
25:38 Работа (effect)
36:04 Как происходит обновление интерфейса
46:53 Эвристика сравнения изменений
50:12 Фаза 2: Commit
==Оптимизация компонетов==
1:01:40 State Colocation
1:04:28 Ремаунты
1:10:19 HOC (Higher Order Components)
1:19:50 React.memo
==Отношение родительских и дочерних компонентов==
1:22:58 Props drilling
1:26:03 Контекст
1:32:19 Порталы
==Паттерны==
1:38:07 Паттерны
1:46:20 Ответы на вопросы
Спасибо за лекцию! заметил пару моментов:
36:34 "Мы с вами помним, что у нас есть два действия, которые вызывают ререндер - это установка состояния ... и изменение пропсов".
Для ререндера есть только одно условие - это изменение стейта компоненты или ее родителя. Изменение пропсов - это частный случай изменения стейта родителя.
1:28:45 "Самая большая проблема контекста ... - это то, что при изменении значения у нас перерендериваются все дочерние компоненты".
У контекста нет такой пробелмы. При изменении значения перерендериваться будут только потребители контеста, использующие useContext.
1:29:24 "RestorantsPage завернуть в memo".
Оборачивание в memo не поможет, если компонента является потребителем контекста. Независимо от memo, при изменении значения value, компоненты с useContext будут ререндериться. Вообще использование memo тут неуместно, и следует лишь из неверного допущения о том, что все дочерние элементы ререндерятся при изменении значения контекста.
Разве при перерендеринге родителя все его потомки не уходят в перерендеринг?
@@xxxxrat если не ошибаюсь то эта проблема решается использованием хука useContext , а проблема описанная вами это устаревший метод Consumer и все неверные предположения идут от него.
Качественный, детальный разбор работы react "под капотом" + автор непринужденно, красочными аналогиями и в простых примерах доносит далеко не самые простые концепции. Оч полезно, лайк)
Спасибо большое за доклад! Очень понятно объяснили сложные темы 👍
Боже, как я кайфанул, 2 часа как 20 минут, спасибо большое. Лектор - просто красавчик, без воды, по фактам))
А ещё он отличные курсы ведёт 👍
@@dobermanpharaoh7567где?
Самая офигенная лекция по реакту
просто офигеннейший доклад! Такого не хватает, ютуб сейчас на 99 наводнён бесполензным пересказами, как работают хуки и какие виды бывают... Про underhood, такое ощущение, либо никто не хочет знать, либо react-блогеры сами не понимают, как эта магия работает)
Спасибо за лекцию - это единственная русскоязычная адекватная лекция для новичков
После скорого релиза React 19 было бы здорово увидеть апдейт про React на этом канале
Здравствуйте! Спасибо за идею, расскажем о вашем пожелании команде, подумаем, что можно сделать 🙌
Супер, после середины мне стало интересно.
И спасибо за примеры приближенные к реальности!
В иституте засыпаешь после 30 минут , а тут добровольно сидишь 2 часа, еще и слушаешь внимательно и пытаешься очмвслить. Вот она сила мотивации и хорошей подачи автора.
Спасибо 🙏🏻 объяснили то что я так долго не могла понять
Ого, про хоки крутой совет. Раньше использовал их только в реакт-редаксе и не понимал, как их можно еще использовать.
Спасибо, очень интересно!
2 часа пролетели как 1 час на скорости х2 😁
Гениально 😂😂
Очень круто
В одно время много провозился с перерендерами когда делал dnd элемент)
Спасибо, просто кайфую от подачи и качества информации. Круто!
Надеюсь увидеть продолжение про Redux
Спасибо большое за такой полезный и классный доклад 🤝
Лектор лучший и информация подана классно. Спасибо!
Спасибо огромное за ваш труд мы очень ценим
Это самый топовый урок по файберам
действительно шикарный материал
ХВхвх "Он знает своего родителя и знает одного своего родственника, либо брата либо сестру. Возможно его брат или сестра знают еще одного брата или сестру. Согласен, семейка странная" ххвхв это шедеврально, сделало мой день)
доходит до самого нижнего чайлда
- Я один ребенок одного родителя
(вздох) бывает...
Правильно ли я понимаю, что в старых версиях React (15 и ниже) при вызове this.setState рендерилось всё дерево React элементов целиком, а затем начиналось сравнение деревьев React элементов? А в архитектуре Fiber рендеринг React элементов происходит поэтапно, в процессе создания Work In Progress Fiber дерева, и сравнение выполняется по мере обработки каждого узла Fiber?
Спасибо за лекцию! Не совсем ясно с порталами и модалками. Обычно модалке не задается position absolute. Делаем для нее position fixed, top:0, left:0 with и height - 100%. И модалка всегда по центу, внутри отрисовываем контент. Для чего тут создавать портал не совсем понятно.
Если у родительского компонента есть transform, то fixed у дочернего не работает.
такие вопросы к лектору: утверждается, что файбер нода мутабельна, но в то же время в презентации показывается, как файбер дерево клонируется(!). если файбер ноды клонируется, а старое дерево удаляется, значит файберы тоже иммутабельны? (или иллюстрации в презентации некорректные?). либо они могут себя вести по разному в зависимости от эффектов, которые должны быть выполнены, и тогда клонированное дерево может удалится, и только обновиться исходное?
Компонент перерендовелся, перерендовелся да не перевырендовелся.
Большое Спасибо!
Лектор просто батя
O(n³) => O(n) за счет пользовательской настройки и изменения типа (что формально тоже задается пользователем react). Whaaaat... Пойду собесы по алгоритмам посмотрю)
Спасибо,оч доходчиво)
Спасибо, дружище
Спасибо!
HOC -- это HighER Order Component, HOF -- это HighER Order Function
Во славу Плети!
дайте плз ссылку на предыдущее видео
bnzcSC8AmHY
Спасибо
"Возможно его брат и сестра тоже знает о каком-то брате или сестре. Семейка странная, я согласен" :D
А как называется 3 часть видео про реакт и есть ли в плейлисте? Скиньте ссылку, пожалуйста
Здравствуйте! Увы, ссылкой поделиться не сможет, так как Ютуб их удаляет. Название третьей части: «React (Экосистема React приложения)».
@@YandexforFrontend спасибо!
1:31:25, Не совсем правильно. Redux не использует контекст от слова совсем. Это ядро, которое написано на ванильном JS'e и контекста там и близко нет. А вот контекст использует либа react-redux, чтобы коннектить наши компоненты со стором. Это принципиальная разница на самом деле.
Да, все верно, тут оговорился, имел ввиду react-redux библиотеку, которая поставляет инструменты для работы реакт приложения с редаксом
@@temaProg не могу разобраться: запускаем наш код, срабатывают render всех компонентов, JSX разворачивает в React.createElement, строится дерево элементов и соответствующий ему связанный список fiber нод. Далее где-нибудь в середине дерева изменился стейт у компонента, каким образом появляется новое дерево? первоначальное построилось благодаря вызову всех существующих render, а новое? мы же заново не запускаем у абсолютно всех компонентов render? и уже 2 дерева сравниваются - обход связанного списка механизмом reconcillation
Если я правильно понял, то в stack будет такая очередь правильно?
1.async tasks
2.fiber
3.micro tasks
4.macro tasks
на счет провадйеров не поняла, как нельзя несколько провайдеров обернуть? у меня в пет проекте 3 провайдера, и все компоненты получают доступ
Я вооообще ничего не понял) не ну ладно, что-то понял, но вот например. Лектор сказал, что Fiber мутабельный, но почему создается новое дерево из Fiber? Почему каждый Fiber клонируется? Я всегда думал, что это происходит с VDOM-ом. А вот Fiber уже подлавливают новые React Element-ы.
ПОПЕЙ ТЫ УЖЕ ЭТУ ВОДИЧКУ ПОЖАЛУЙСТА !!! ААААааААаааа
Ифаки 😂😂
2:51 представления потом сбой до 4:47
Изменение пропсов не вызывает перерендеринг, 01:38:52 - это жиза
вызывает
Лекции 2 года, но вроде уже 2 года назад абсолютно каждый айтишник отлично знал что человек видит только 60 кадров это бред полный. Если ваш сайт будет отображать 60фпс на айфоне про версии у вашего руководителя, он пошлёт вас просто, потому что это будет лагать для него на фоне системы, которая работает в 120.
Ты явно знаешь о чём говоришь
тупа лудшый
пожалуйста, приобретите менее чувствительные микрофоны, каждое чавкание и чвакание слышно. безумно отвлекает
В чем отличие чавканья от чваканья?
Пока не увидел этот коммент - не замечал
Любит сглатывать)
Что, опять? Ну как в такой серьезной лекции можно утверждать, что изменение пропсов влечет перерендеринг? Простой пример: пропсы завязываем на ref, чтобы не происходил перерендеринг, и по клику в родителе их меняем. Пока не произойдет перерендеринг родителя (а в нашем примере он не происходит), fiber не узнает про изменение пропсов, потому что return родителя не вызовется.
В остальном очень полезно, спасибо.
Здравствуйте. Тут оговорка, изменение пропсов не приводит к перерендеру, это последствия перерендера
53 минута, что означает дестроится ?
лекция по продвинутому реакту, а тему мы передаем пропс дриллингом без контекста?) Ну слабенький пример, но суть конечно ясна
Те кто уже работает, подскажите, это уровень знаний джуна или джуна+?
в 8 классе я проходил
P.S. Сеньор-реактер
Это уровень знаний эрудита, у которого много свободного времени. Думаю, что многие сеньоры не знают как работают файберы и как может пригодиться key, кроме как в списке элементов. Но лекция очень интересная. Тем, кому она попалась, очень повезло.
Могу ошибаться, но вроде изменение пропсов никак не влияет на решение React ререндерить элемент, и не важно изменилась ссылка на объект пропсов или нет. React всегда ререндерит элемент, если изменился стэйт родителя. Каждый раз сравнивать стейты было бы слишком дорого, поэтому мы сами должны сообщить React когда стоит сравнить пропсы через memo.
Верно ли что React.memo стоит юзать в тех случаях, когда у родителя меняется стейт, а у дочернего ничего не меняется? Для того, чтоб этот дочерний компонент не ререндерился? Немного запутала лекция тем, что изменение пропсов заставляет компонент ререндерится, хотя скорее речь о том, что изменение пропсов завязанных на стейте родителя вызывает ререндер. Что звучит абсурдно, учитывая что любой изменение стейта родителя вызывает ререндер дочерних. Короче я пока писал уже разобрался вроде как…
изменение пропсов невозможно без изменения состояния. так что де-факто, изменение пропсов треггирит ре-рендер
У меня проблемы с буквой "Р" ))
лекция классная, но первая часть слишком метафоричная, с отвлекающими отступлениями. Почему не сказать "сиблинги", а все время говорить про каких-то братьев и сестер, которые, по идее, ничем друг от друга не отличаются...
Вторая часть отличная, спасибо ) Презентация ограничивала в объяснениях, не хватало лайфкодинга, манипуляций с кодом, из-за этого приходилось много жестикулировать
Откуда взяли что человек 60 кадров видит? Хоть бы изучили инфу для начала
Тренированные лётчики видят вплоть до 1000 кадров
Есть у кого ссылка на видос про асинхронность?
Есть телеграм канал со всеми записями, ссылку не дает вставить
@@katiapervak а подскажите, пожалуйста, как найти этот телеграм канал?
@@katiapervak Можете пожалуйста название канала дать?
Записи открытых лекций яндекс 2022
@@katiapervak канал не отображает предыдущие записи для новых подписчиков. Есть ссылка на yuotube-видео про асинхронность?
опять сектанты свидетели «человеческий глаз больше 60 фпс не видит»