Разбираемся в React JSX
Рет қаралды 7,764
Күн бұрынВ данном видео мы разберем то, как работает JSX в React, во что он компилируется, и особенности при работе с компонентами.
Telegram-канал:
telegram.me/ayub_begimkulov_c...
GitHub репозиторий с примером:
github.com/Ayub-Begimkulov/yo...
Таймкоды:
00:00-00:18 - Интро
00:18-01:22 - Во что компилируется JSX?
01:22-02:44 - Как выглядит JSX ноды
02:44-03:22 - Флоу рендеринга JSX
03:22-06:05 - Задачи на работу JSX с компонентами
06:05-06:47 - Во что превращаются компоненты
06:47-09:15 - Разбираем ответ на первую задачу
09:15-13:24 - Разбираем ответ на вторую задачу
13:24-13:48 - Заключение
@batm1x Жыл бұрын
Супер! Тематики углубленного реакта очень мало на ютубе. Все снимают одно и то же по кругу для новичков. Хорошо, что Аюб тратит время, чтоб глубже во всем разобраться и рассказать нам 👍
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@egorpobylets6597 Ай бұрын
Очень интересно! Спасибо. Не видел ещё такого взгляда и комментария о JSX
@ivankurchin7181 Жыл бұрын
Очень полезно, поймал себя на мысли, что если и смотрел во что всё это компилируется, то очень давно, и помнил абстрактно, а тут ты прямо в деталях показал. Красавчик!
@ayub_begimkulov 11 ай бұрын
Спасибо за фидбэк!
@LevShuroff Жыл бұрын
Канал топовый, должно быть 100-200к подписчиков, просто многие не узнали ещё про него)
@ayub_begimkulov Жыл бұрын
Спасибо! Надеюсь скоро будет.
@lvan_lvanov Жыл бұрын
Молодец, горжусь тобой и твоим ростом. Давно наблюдаю за тобой. Безумно рад, что есть люди, которые не стоят на месте и развиваются в столь молодом и прекрасном возрасте. У тебя светлый ум и голова, успехов тебе. Спасибо за контент!
@ayub_begimkulov Жыл бұрын
Спасибо за фидбэк!
@y0na24 Жыл бұрын
Очень помогают такого рода контент, т.к понимать технологии «по верхам» такое себе. Я только в начале пути, поэтому читать исходный код тяжеловато, так что хотелось бы видеть больше видосов про фундаментальные вещи React’а, но без облегчения подаваемой информации, как это делает большинство.
@alexandroppolus Жыл бұрын
Хорошая тема, в своё время тоже разобрался с ней и многое стало понятно. Насчет второго вопроса я бы ещё добавил, что если пишем {Component()}, то вызов функции происходит прямо внутри вызова JSXTest, до return. А если , то вызов (рендер) Component произойдет, только когда выяснится, что данный элемент действительно попадает в дерево нативных реакт-элементов (которые 'div', 'span' и т.д.), что может быть как сразу, так и через много слоев других элементов, или вообще не быть (к примеру, JSXTest вернул , но компонент А не использовал свой children)
@IT-mp3op Жыл бұрын
Лайк. Полезная информация
@ayub_begimkulov Жыл бұрын
Спасибо!
@mikene5452 Жыл бұрын
Согласен, с предыдущими комментариями - такие подробные разборы простых вещей очень полезны
@ayub_begimkulov Жыл бұрын
Спасибо, будем продолжать.
@2difficult2do Жыл бұрын
Полезно, понятно, нпглчдно 😼 Тебе спасибо, коммент ютубу
@ayub_begimkulov Жыл бұрын
Спасибо за поддержку!
@KM-le8yz Жыл бұрын
спасибо за видео, очень полезная инфрормация
@ayub_begimkulov Жыл бұрын
Не за что!
@BorshBlack Жыл бұрын
Молодец!
@ayub_begimkulov Жыл бұрын
Спасибо!
@melodystic Жыл бұрын
Спасибо за видео!
@ayub_begimkulov Жыл бұрын
не за что!
@alexandr_s Жыл бұрын
Интересно было об этом узнать, но как вопрос для собеса... разве что ожидания по зп сбить Как думаешь, ответы на какие вопросы дают понять, будет ли соискатель писать код, с которым комфортно работать другим участникам команды, сможет ли он быстро выкатывать фичи в стиле "пришел, увидел, победил", не оставляя в коде сюрпризов, сможет ли эффективно вести коммуникацию?
@Lisimah063 Жыл бұрын
Спасибо за материал
@ayub_begimkulov Жыл бұрын
Не за что!
@user-gk1yb3vp4b Жыл бұрын
Продолжай пожалуйста в таком же духе))
@ayub_begimkulov Жыл бұрын
Спасибо, буду стараться!
@9sashaaa Жыл бұрын
Лучший!
@ayub_begimkulov Жыл бұрын
Спасибо!
@myspace2003 Жыл бұрын
Спасибо большое
@ayub_begimkulov Жыл бұрын
Рад помочь!
@ummyusuf8206 11 ай бұрын
🎉🎉🎉🎉🎉
@xxcrypt234 Жыл бұрын
круто
@ayub_begimkulov Жыл бұрын
Спаибо!
@user-kj6go4ft4j Жыл бұрын
🎉🎉🎉🎉🎉🎉🎉
@ivanmiarkulau8320 Жыл бұрын
Не понял почему при каждом клике на инкремент JSXTest ререндерится вместе с Component когда рендеришь Component через вызов функции. Не знал о такой разнице между вызовом компонента через JSX и вызовов как функции, спасибо за видео!)
@alexandroppolus Жыл бұрын
Случай {Component()} - это как если бы взяли всё содержимое Component и скопипастили в JSXTest. Соответственно, стейт тоже переезжает в JSXTest
@from_brest2631 Жыл бұрын
Лайки
@ayub_begimkulov Жыл бұрын
Спасибо!
@evgeny-chugaev Жыл бұрын
Зачем это спрашивать на собесах и зачем это нужно знать простому фронтендеру - непонятно. Слава богу меня такими странными вопросами не мучали и я прекрасно разрабатываю фронт на реакте, никак не используя знания о том, что там у него под капотом, в своей работе.
@ichestor509 Жыл бұрын
Значит скоро дойдешь до потолка своей проф пригодности))
@danilistomin5181 Жыл бұрын
как и замыкания, промисы, прототипы и прочие концепты которые "must have" для собеса, которые вспоминаешь когда пора менять работу
@NikolayKasparov Жыл бұрын
@@danilistomin5181больше всего люблю на эту тему хойстинг. За 5 лет во фронте ни разу не использовал var 🎉 Зато спрашивают на каждом собесе
@liganshow Жыл бұрын
Все же в вопросе номер 1 есть разница между первым вариантом и вторым. Допустим мы наши компоненты About и Home обернули в memo, и допустим у нас в корневом компоненте есть useState, или мы подписаны на какое-то состояния из какого то стора. В случае с рендер функцией, при перерендере корневого компонента, поменялось какое то состояние, рендер функции пересоздадутся. В компоненте, куда они ушли пропсом это будет считаться обновлением пропсов) с чилдренами такого не случиться
@CJIu3eHb Жыл бұрын
Помимо нюансов производительности есть еще самое главное - зачем использовать render props. В данном примере он бесполезен, т.к. не передается в аргументы функции ничего. Но если передавать, то разница уже существенная. В общем, в этом вопросе о разнице двух подходов я бы как раз выделил именно эти два момента: нюансы производительности (помню, айти синяк объяснял фишку с children при использовании контекста) и цель существования render props вообще. В общем, "душноват" вопросик, безусловно. Подойдет разве что для разговора "за жизнь" с каким-нибудь синьором-помидором.
@alenache1 Жыл бұрын
не понял почему сравнивается с Component(), же компилируется в _jsxs("Component" и т.д....), а не в Component()?
@ayub_begimkulov Жыл бұрын
Так в том то и дело, спрашивается в чем разница между этими записями. Что будет, если вызвать компонент, как обычную функцию? Что будет работать не так?
@NikolayKasparov Жыл бұрын
Очень странный пример. Зачем вызывать {Component()}? Можно написать {Component} и все работает как и с jsx
@NikolayKasparov Жыл бұрын
Это все равно что в onClick передавать fn() или fn
@ayub_begimkulov 11 ай бұрын
Так же код не сработает. Фукнция - не валдиные jsx элементы.
@sleepstream9433 Жыл бұрын
Ну честно говоря тут все очевидно, очень странно, что такой хороший отклик об ценности материала 😮
@ayub_begimkulov Жыл бұрын
Как раз хороший отклик показывает, что не для всех эта инфа очевидна. Я тоже в начале не хотел снимать, но потом понял, что у многих тут пробелы есть.
Ayub Begimkulov
Рет қаралды 9 М.