Продолжаем изучение React. Заглянем «под капот» и разберём тонкости использования библиотеки.
Жүктеу.....
Пікірлер: 82
@evergreen- Жыл бұрын
==Как рендерится 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 Ответы на вопросы
@amalker Жыл бұрын
Спасибо, просто кайфую от подачи и качества информации. Круто!
@isephar Жыл бұрын
Лектор лучший и информация подана классно. Спасибо!
@user-ww3qz7yx1t7 ай бұрын
Спасибо за лекцию! заметил пару моментов: 36:34 "Мы с вами помним, что у нас есть два действия, которые вызывают ререндер - это установка состояния ... и изменение пропсов". Для ререндера есть только одно условие - это изменение стейта компоненты или ее родителя. Изменение пропсов - это частный случай изменения стейта родителя. 1:28:45 "Самая большая проблема контекста ... - это то, что при изменении значения у нас перерендериваются все дочерние компоненты". У контекста нет такой пробелмы. При изменении значения перерендериваться будут только потребители контеста, использующие useContext. 1:29:24 "RestorantsPage завернуть в memo". Оборачивание в memo не поможет, если компонента является потребителем контекста. Независимо от memo, при изменении значения value, компоненты с useContext будут ререндериться. Вообще использование memo тут неуместно, и следует лишь из неверного допущения о том, что все дочерние элементы ререндерятся при изменении значения контекста.
@xxxxrat
15 күн бұрын
Разве при перерендеринге родителя все его потомки не уходят в перерендеринг?
@d0paminer Жыл бұрын
Качественный, детальный разбор работы react "под капотом" + автор непринужденно, красочными аналогиями и в простых примерах доносит далеко не самые простые концепции. Оч полезно, лайк)
@chirkov Жыл бұрын
Супер, после середины мне стало интересно. И спасибо за примеры приближенные к реальности!
@StrayVegan Жыл бұрын
Спасибо большое за такой полезный и классный доклад 🤝
@denispepper2830 Жыл бұрын
Спасибо за лекцию - это единственная русскоязычная адекватная лекция для новичков
@user-yj8tf7xb6g4 ай бұрын
Спасибо большое за доклад! Очень понятно объяснили сложные темы 👍
@user-cv5eo9eu9z Жыл бұрын
Спасибо огромное за ваш труд мы очень ценим
@user-fz7fe8cn7i Жыл бұрын
Боже, как я кайфанул, 2 часа как 20 минут, спасибо большое. Лектор - просто красавчик, без воды, по фактам))
@dobermanpharaoh7567
8 ай бұрын
А ещё он отличные курсы ведёт 👍
@pvttrix
6 ай бұрын
@@dobermanpharaoh7567где?
@LadyBugFeature2 ай бұрын
Спасибо 🙏🏻 объяснили то что я так долго не могла понять
@elmarklimov54582 ай бұрын
просто офигеннейший доклад! Такого не хватает, ютуб сейчас на 99 наводнён бесполензным пересказами, как работают хуки и какие виды бывают... Про underhood, такое ощущение, либо никто не хочет знать, либо react-блогеры сами не понимают, как эта магия работает)
@user-mn2po8ns2z Жыл бұрын
действительно шикарный материал
@PalladinGOLDАй бұрын
Самая офигенная лекция по реакту
@Vlad-sw4zd Жыл бұрын
Ого, про хоки крутой совет. Раньше использовал их только в реакт-редаксе и не понимал, как их можно еще использовать.
@floky1342 Жыл бұрын
Надеюсь увидеть продолжение про Redux
@fpvba4 ай бұрын
Очень круто В одно время много провозился с перерендерами когда делал dnd элемент)
@mansur.gabidullin Жыл бұрын
Большое Спасибо!
@vladimiryazvinskiy294810 ай бұрын
Спасибо,оч доходчиво)
@user-rn5cl2fr8b Жыл бұрын
Спасибо!
@erassylzh5658 Жыл бұрын
Спасибо, очень интересно! 2 часа пролетели как 1 час на скорости х2 😁
@fpvba
4 ай бұрын
Гениально 😂😂
@user-lm8py5rb4m Жыл бұрын
Это самый топовый урок по файберам
@lliarona Жыл бұрын
Спасибо, дружище
@zorislaw Жыл бұрын
Спасибо.
@user-lc3le2ic1t10 ай бұрын
ХВхвх "Он знает своего родителя и знает одного своего родственника, либо брата либо сестру. Возможно его брат или сестра знают еще одного брата или сестру. Согласен, семейка странная" ххвхв это шедеврально, сделало мой день)
@alexx5151
6 ай бұрын
доходит до самого нижнего чайлда - Я один ребенок одного родителя (вздох) бывает...
@lifeisbeautifu1 Жыл бұрын
Спасибо
@deniskalinin51018 ай бұрын
Лектор просто батя
@griha296 Жыл бұрын
тупа лудшый
@enlighty Жыл бұрын
Во славу Плети!
@user-ei9jd7pw4s Жыл бұрын
Компонент перерендовелся, перерендовелся да не перевырендовелся.
@romanr58432 ай бұрын
Спасибо за лекцию! Не совсем ясно с порталами и модалками. Обычно модалке не задается position absolute. Делаем для нее position fixed, top:0, left:0 with и height - 100%. И модалка всегда по центу, внутри отрисовываем контент. Для чего тут создавать портал не совсем понятно.
@ru_irina
Ай бұрын
Если у родительского компонента есть transform, то fixed у дочернего не работает.
@661marker11 ай бұрын
такие вопросы к лектору: утверждается, что файбер нода мутабельна, но в то же время в презентации показывается, как файбер дерево клонируется(!). если файбер ноды клонируется, а старое дерево удаляется, значит файберы тоже иммутабельны? (или иллюстрации в презентации некорректные?). либо они могут себя вести по разному в зависимости от эффектов, которые должны быть выполнены, и тогда клонированное дерево может удалится, и только обновиться исходное?
@FahradLevonyan Жыл бұрын
Если я правильно понял, то в stack будет такая очередь правильно? 1.async tasks 2.fiber 3.micro tasks 4.macro tasks
@petruhinmaxim7 ай бұрын
O(n³) => O(n) за счет пользовательской настройки и изменения типа (что формально тоже задается пользователем react). Whaaaat... Пойду собесы по алгоритмам посмотрю)
@kinderhero8897 Жыл бұрын
дайте плз ссылку на предыдущее видео
@dmytrovoronov9320
Жыл бұрын
bnzcSC8AmHY
@Denisqa-ke1xo10 ай бұрын
"Возможно его брат и сестра тоже знает о каком-то брате или сестре. Семейка странная, я согласен" :D
@anastasiia_idle7 ай бұрын
на счет провадйеров не поняла, как нельзя несколько провайдеров обернуть? у меня в пет проекте 3 провайдера, и все компоненты получают доступ
@acidentd9722 Жыл бұрын
2:51 представления потом сбой до 4:47
@pandalove67958 ай бұрын
Я вооообще ничего не понял) не ну ладно, что-то понял, но вот например. Лектор сказал, что Fiber мутабельный, но почему создается новое дерево из Fiber? Почему каждый Fiber клонируется? Я всегда думал, что это происходит с VDOM-ом. А вот Fiber уже подлавливают новые React Element-ы.
@maximk56209 ай бұрын
Ифаки 😂😂
@rin2004able6 ай бұрын
HOC -- это HighER Order Component, HOF -- это HighER Order Function
@Gdyvfjttyhhh Жыл бұрын
1:31:25, Не совсем правильно. Redux не использует контекст от слова совсем. Это ядро, которое написано на ванильном JS'e и контекста там и близко нет. А вот контекст использует либа react-redux, чтобы коннектить наши компоненты со стором. Это принципиальная разница на самом деле.
@temaProg
Жыл бұрын
Да, все верно, тут оговорился, имел ввиду react-redux библиотеку, которая поставляет инструменты для работы реакт приложения с редаксом
@georgegrinding1793
Жыл бұрын
@@temaProg не могу разобраться: запускаем наш код, срабатывают render всех компонентов, JSX разворачивает в React.createElement, строится дерево элементов и соответствующий ему связанный список fiber нод. Далее где-нибудь в середине дерева изменился стейт у компонента, каким образом появляется новое дерево? первоначальное построилось благодаря вызову всех существующих render, а новое? мы же заново не запускаем у абсолютно всех компонентов render? и уже 2 дерева сравниваются - обход связанного списка механизмом reconcillation
@kowkavn23563 ай бұрын
Те кто уже работает, подскажите, это уровень знаний джуна или джуна+?
@whiteguards43 Жыл бұрын
53 минута, что означает дестроится ?
@user-yk9nj6co9d Жыл бұрын
У меня проблемы с буквой "Р" ))
@xxxxrat15 күн бұрын
Что, опять? Ну как в такой серьезной лекции можно утверждать, что изменение пропсов влечет перерендеринг? Простой пример: пропсы завязываем на ref, чтобы не происходил перерендеринг, и по клику в родителе их меняем. Пока не произойдет перерендеринг родителя (а в нашем примере он не происходит), fiber не узнает про изменение пропсов, потому что return родителя не вызовется. В остальном очень полезно, спасибо.
@temaProg
11 күн бұрын
Здравствуйте. Тут оговорка, изменение пропсов не приводит к перерендеру, это последствия перерендера
@user-uy1fz3gv9i Жыл бұрын
Могу ошибаться, но вроде изменение пропсов никак не влияет на решение React ререндерить элемент, и не важно изменилась ссылка на объект пропсов или нет. React всегда ререндерит элемент, если изменился стэйт родителя. Каждый раз сравнивать стейты было бы слишком дорого, поэтому мы сами должны сообщить React когда стоит сравнить пропсы через memo.
@pavuk7086
9 ай бұрын
Верно ли что React.memo стоит юзать в тех случаях, когда у родителя меняется стейт, а у дочернего ничего не меняется? Для того, чтоб этот дочерний компонент не ререндерился? Немного запутала лекция тем, что изменение пропсов заставляет компонент ререндерится, хотя скорее речь о том, что изменение пропсов завязанных на стейте родителя вызывает ререндер. Что звучит абсурдно, учитывая что любой изменение стейта родителя вызывает ререндер дочерних. Короче я пока писал уже разобрался вроде как…
@anastasiia_idle
7 ай бұрын
изменение пропсов невозможно без изменения состояния. так что де-факто, изменение пропсов треггирит ре-рендер
@tahirdibirov1430 Жыл бұрын
Изменение пропсов не вызывает перерендеринг, 01:38:52 - это жиза
@romandeveloper7720
8 ай бұрын
вызывает
@gyros9162 Жыл бұрын
лекция классная, но первая часть слишком метафоричная, с отвлекающими отступлениями. Почему не сказать "сиблинги", а все время говорить про каких-то братьев и сестер, которые, по идее, ничем друг от друга не отличаются... Вторая часть отличная, спасибо ) Презентация ограничивала в объяснениях, не хватало лайфкодинга, манипуляций с кодом, из-за этого приходилось много жестикулировать
@user-yk7sm4mr4o9 ай бұрын
пожалуйста, приобретите менее чувствительные микрофоны, каждое чавкание и чвакание слышно. безумно отвлекает
@user-kf5tp5ps9b
8 ай бұрын
В чем отличие чавканья от чваканья?
@alfanidj
8 ай бұрын
Пока не увидел этот коммент - не замечал
@user-nj6dh2ck2y
Ай бұрын
Любит сглатывать)
@cyberbullya9 ай бұрын
Откуда взяли что человек 60 кадров видит? Хоть бы изучили инфу для начала
@johnramirezzz
Ай бұрын
Тренированные лётчики видят вплоть до 1000 кадров
@gubatenkov Жыл бұрын
Есть у кого ссылка на видос про асинхронность?
@katiapervak
Жыл бұрын
Есть телеграм канал со всеми записями, ссылку не дает вставить
@sweeterEater
Жыл бұрын
@@katiapervak а подскажите, пожалуйста, как найти этот телеграм канал?
@MrSanya789
Жыл бұрын
@@katiapervak Можете пожалуйста название канала дать?
@katiapervak
Жыл бұрын
Записи открытых лекций яндекс 2022
@gubatenkov
Жыл бұрын
@@katiapervak канал не отображает предыдущие записи для новых подписчиков. Есть ссылка на yuotube-видео про асинхронность?
@eliassmith7949 Жыл бұрын
опять сектанты свидетели «человеческий глаз больше 60 фпс не видит»
Пікірлер: 82
==Как рендерится 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
15 күн бұрын
Разве при перерендеринге родителя все его потомки не уходят в перерендеринг?
Качественный, детальный разбор работы react "под капотом" + автор непринужденно, красочными аналогиями и в простых примерах доносит далеко не самые простые концепции. Оч полезно, лайк)
Супер, после середины мне стало интересно. И спасибо за примеры приближенные к реальности!
Спасибо большое за такой полезный и классный доклад 🤝
Спасибо за лекцию - это единственная русскоязычная адекватная лекция для новичков
Спасибо большое за доклад! Очень понятно объяснили сложные темы 👍
Спасибо огромное за ваш труд мы очень ценим
Боже, как я кайфанул, 2 часа как 20 минут, спасибо большое. Лектор - просто красавчик, без воды, по фактам))
@dobermanpharaoh7567
8 ай бұрын
А ещё он отличные курсы ведёт 👍
@pvttrix
6 ай бұрын
@@dobermanpharaoh7567где?
Спасибо 🙏🏻 объяснили то что я так долго не могла понять
просто офигеннейший доклад! Такого не хватает, ютуб сейчас на 99 наводнён бесполензным пересказами, как работают хуки и какие виды бывают... Про underhood, такое ощущение, либо никто не хочет знать, либо react-блогеры сами не понимают, как эта магия работает)
действительно шикарный материал
Самая офигенная лекция по реакту
Ого, про хоки крутой совет. Раньше использовал их только в реакт-редаксе и не понимал, как их можно еще использовать.
Надеюсь увидеть продолжение про Redux
Очень круто В одно время много провозился с перерендерами когда делал dnd элемент)
Большое Спасибо!
Спасибо,оч доходчиво)
Спасибо!
Спасибо, очень интересно! 2 часа пролетели как 1 час на скорости х2 😁
@fpvba
4 ай бұрын
Гениально 😂😂
Это самый топовый урок по файберам
Спасибо, дружище
Спасибо.
ХВхвх "Он знает своего родителя и знает одного своего родственника, либо брата либо сестру. Возможно его брат или сестра знают еще одного брата или сестру. Согласен, семейка странная" ххвхв это шедеврально, сделало мой день)
@alexx5151
6 ай бұрын
доходит до самого нижнего чайлда - Я один ребенок одного родителя (вздох) бывает...
Спасибо
Лектор просто батя
тупа лудшый
Во славу Плети!
Компонент перерендовелся, перерендовелся да не перевырендовелся.
Спасибо за лекцию! Не совсем ясно с порталами и модалками. Обычно модалке не задается position absolute. Делаем для нее position fixed, top:0, left:0 with и height - 100%. И модалка всегда по центу, внутри отрисовываем контент. Для чего тут создавать портал не совсем понятно.
@ru_irina
Ай бұрын
Если у родительского компонента есть transform, то fixed у дочернего не работает.
такие вопросы к лектору: утверждается, что файбер нода мутабельна, но в то же время в презентации показывается, как файбер дерево клонируется(!). если файбер ноды клонируется, а старое дерево удаляется, значит файберы тоже иммутабельны? (или иллюстрации в презентации некорректные?). либо они могут себя вести по разному в зависимости от эффектов, которые должны быть выполнены, и тогда клонированное дерево может удалится, и только обновиться исходное?
Если я правильно понял, то в stack будет такая очередь правильно? 1.async tasks 2.fiber 3.micro tasks 4.macro tasks
O(n³) => O(n) за счет пользовательской настройки и изменения типа (что формально тоже задается пользователем react). Whaaaat... Пойду собесы по алгоритмам посмотрю)
дайте плз ссылку на предыдущее видео
@dmytrovoronov9320
Жыл бұрын
bnzcSC8AmHY
"Возможно его брат и сестра тоже знает о каком-то брате или сестре. Семейка странная, я согласен" :D
на счет провадйеров не поняла, как нельзя несколько провайдеров обернуть? у меня в пет проекте 3 провайдера, и все компоненты получают доступ
2:51 представления потом сбой до 4:47
Я вооообще ничего не понял) не ну ладно, что-то понял, но вот например. Лектор сказал, что Fiber мутабельный, но почему создается новое дерево из Fiber? Почему каждый Fiber клонируется? Я всегда думал, что это происходит с VDOM-ом. А вот Fiber уже подлавливают новые React Element-ы.
Ифаки 😂😂
HOC -- это HighER Order Component, HOF -- это HighER Order Function
1:31:25, Не совсем правильно. Redux не использует контекст от слова совсем. Это ядро, которое написано на ванильном JS'e и контекста там и близко нет. А вот контекст использует либа react-redux, чтобы коннектить наши компоненты со стором. Это принципиальная разница на самом деле.
@temaProg
Жыл бұрын
Да, все верно, тут оговорился, имел ввиду react-redux библиотеку, которая поставляет инструменты для работы реакт приложения с редаксом
@georgegrinding1793
Жыл бұрын
@@temaProg не могу разобраться: запускаем наш код, срабатывают render всех компонентов, JSX разворачивает в React.createElement, строится дерево элементов и соответствующий ему связанный список fiber нод. Далее где-нибудь в середине дерева изменился стейт у компонента, каким образом появляется новое дерево? первоначальное построилось благодаря вызову всех существующих render, а новое? мы же заново не запускаем у абсолютно всех компонентов render? и уже 2 дерева сравниваются - обход связанного списка механизмом reconcillation
Те кто уже работает, подскажите, это уровень знаний джуна или джуна+?
53 минута, что означает дестроится ?
У меня проблемы с буквой "Р" ))
Что, опять? Ну как в такой серьезной лекции можно утверждать, что изменение пропсов влечет перерендеринг? Простой пример: пропсы завязываем на ref, чтобы не происходил перерендеринг, и по клику в родителе их меняем. Пока не произойдет перерендеринг родителя (а в нашем примере он не происходит), fiber не узнает про изменение пропсов, потому что return родителя не вызовется. В остальном очень полезно, спасибо.
@temaProg
11 күн бұрын
Здравствуйте. Тут оговорка, изменение пропсов не приводит к перерендеру, это последствия перерендера
Могу ошибаться, но вроде изменение пропсов никак не влияет на решение React ререндерить элемент, и не важно изменилась ссылка на объект пропсов или нет. React всегда ререндерит элемент, если изменился стэйт родителя. Каждый раз сравнивать стейты было бы слишком дорого, поэтому мы сами должны сообщить React когда стоит сравнить пропсы через memo.
@pavuk7086
9 ай бұрын
Верно ли что React.memo стоит юзать в тех случаях, когда у родителя меняется стейт, а у дочернего ничего не меняется? Для того, чтоб этот дочерний компонент не ререндерился? Немного запутала лекция тем, что изменение пропсов заставляет компонент ререндерится, хотя скорее речь о том, что изменение пропсов завязанных на стейте родителя вызывает ререндер. Что звучит абсурдно, учитывая что любой изменение стейта родителя вызывает ререндер дочерних. Короче я пока писал уже разобрался вроде как…
@anastasiia_idle
7 ай бұрын
изменение пропсов невозможно без изменения состояния. так что де-факто, изменение пропсов треггирит ре-рендер
Изменение пропсов не вызывает перерендеринг, 01:38:52 - это жиза
@romandeveloper7720
8 ай бұрын
вызывает
лекция классная, но первая часть слишком метафоричная, с отвлекающими отступлениями. Почему не сказать "сиблинги", а все время говорить про каких-то братьев и сестер, которые, по идее, ничем друг от друга не отличаются... Вторая часть отличная, спасибо ) Презентация ограничивала в объяснениях, не хватало лайфкодинга, манипуляций с кодом, из-за этого приходилось много жестикулировать
пожалуйста, приобретите менее чувствительные микрофоны, каждое чавкание и чвакание слышно. безумно отвлекает
@user-kf5tp5ps9b
8 ай бұрын
В чем отличие чавканья от чваканья?
@alfanidj
8 ай бұрын
Пока не увидел этот коммент - не замечал
@user-nj6dh2ck2y
Ай бұрын
Любит сглатывать)
Откуда взяли что человек 60 кадров видит? Хоть бы изучили инфу для начала
@johnramirezzz
Ай бұрын
Тренированные лётчики видят вплоть до 1000 кадров
Есть у кого ссылка на видос про асинхронность?
@katiapervak
Жыл бұрын
Есть телеграм канал со всеми записями, ссылку не дает вставить
@sweeterEater
Жыл бұрын
@@katiapervak а подскажите, пожалуйста, как найти этот телеграм канал?
@MrSanya789
Жыл бұрын
@@katiapervak Можете пожалуйста название канала дать?
@katiapervak
Жыл бұрын
Записи открытых лекций яндекс 2022
@gubatenkov
Жыл бұрын
@@katiapervak канал не отображает предыдущие записи для новых подписчиков. Есть ссылка на yuotube-видео про асинхронность?
опять сектанты свидетели «человеческий глаз больше 60 фпс не видит»