React Batching от создания (v0.4.0) до React 18

  Рет қаралды 18,107

АйТи Синяк

АйТи Синяк

Күн бұрын

React Batching - это инструмент, который неявно присутствует в ежедневной разработке, но все же его понимание, может помочь ускорить вашу страницу, а так же объяснить иногда казалось бы странное поведение рендера
Исходники:
React v17 - github.com/DmitriyGrosh/react...
React v18 - github.com/DmitriyGrosh/react...
React v0.4.0 - github.com/DmitriyGrosh/react4
Для тех кто хочет стать спикером: holyjs.ru/callforpapers/?utm_...
Поддержать Айти Синяка можно здесь:
KZfaq: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
01:25 Знакомство со спикером
02:44 Задачки по батчингу
07:35 От теории к практике
09:55 Что есть батчинг
11:08 unstable_batchedUpdates
14:15 Пример из реальной жизни
17:14 flushSync
21:31 Redux не решает проблему
24:12 История батчинга
28:38 Вспоминаем React версии 0.4.0
30:00 Благодарность
30:45 Вопросы и Ответы
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
________________
Канал о Фронтенде, который хочется порекомендовать (telegram):
t.me/frontendnoteschannel
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер: 56
@user-dy4uj4er6s
@user-dy4uj4er6s Жыл бұрын
Пожалуйста, не убирайте субтитры, т.к. я слабслышащийся, другого способа воспринять инфу у меня нет, даже если это корявые сабы! Так держать, спасибо!
@it-sin9k
@it-sin9k Жыл бұрын
Привет :) Постараюсь вернуть субтитры ко всем видео и на будущее буду еще просматривать корявые субтитры в видео и править, где коряво переведено :) Так как я теперь знаю, что это кому то нужно) спасибо за комментарий!
@sphardegod5451
@sphardegod5451 Жыл бұрын
Кстати, по сути можно сделать скрипт, воспринимающий все аудио и за счёт какой-то либы выводящий тебе текст
@vegeman8954
@vegeman8954 Жыл бұрын
Огонь! Посмотрел на одном дыхании, Дима интересно рассказывает
@gritsienkooleg3447
@gritsienkooleg3447 Жыл бұрын
Ребята, вы делаете большое дело) Реально, раскрывая на широкую публику такие важные механики реакта, вы просто конкретно улучшаете среду разработчиков, глубину их знаний, понимание, заинтересованность.. Просто хочу ещё поблагодарить за ваш труд! Продолжайте, пожалуйста))
@it-sin9k
@it-sin9k Жыл бұрын
Спасибо!) будем продолжать в таком же духе)
@user-fw4ew8wf3b
@user-fw4ew8wf3b Жыл бұрын
Было очень интересно послушать. Спасибо!
@serhiimaliuha69
@serhiimaliuha69 Жыл бұрын
ПО БОЛЬШЕМУ СЧЕТУ спасибо за доклад!
@gritsienkooleg3447
@gritsienkooleg3447 Жыл бұрын
Очень круто, спасибо большое!!!
@Ramosok
@Ramosok Жыл бұрын
Новый выпуск, новый праздник) спасибо!
@it-sin9k
@it-sin9k Жыл бұрын
С Наступающим Новым Годом)
@BlueCell
@BlueCell Жыл бұрын
Спасибо, было интересно
@user-cr1pq1wz8v
@user-cr1pq1wz8v Жыл бұрын
Круто, спасибо!
@arswarog
@arswarog Жыл бұрын
Спасибо большое!
@alexeysvetlenko2217
@alexeysvetlenko2217 Жыл бұрын
Класс, спасибо.
@sergeypashkov1312
@sergeypashkov1312 Ай бұрын
Синяк ты лучший!)
@it-sin9k
@it-sin9k Ай бұрын
спасибо!) очень приятно)
@orucqarayev4759
@orucqarayev4759 Жыл бұрын
Классный спикер!
@romandeveloper7720
@romandeveloper7720 Жыл бұрын
огонь!
@multtanker6365
@multtanker6365 Жыл бұрын
Очуменный конечно канал)
@user-pn6bp4cn4x
@user-pn6bp4cn4x 5 ай бұрын
Хороший доклад
@valentynkuriato605
@valentynkuriato605 Жыл бұрын
найс,по факту-спасибо
@ilikecola378
@ilikecola378 Жыл бұрын
Классное видео. Не могу разобрать слово на 26:10, где все описано =) в ливе, либе, лире подскажите пожалуйста.
@zhenia14
@zhenia14 Жыл бұрын
Ну так чё там? разобрался что передаётся по ссылке, а что по значению? видос про это будет?
@it-sin9k
@it-sin9k Жыл бұрын
не) не будет) В интернете и так полно ресурсов на эту тему)
@ilyaprotsenko1023
@ilyaprotsenko1023 Жыл бұрын
Вопрос: решались ли Вы уже стартовать какой-нибудь коммерческий проект на 18-ой версии? Если да, то объясните почему, и если нет, то тоже интересно мнение. Спасибо)
@it-sin9k
@it-sin9k Жыл бұрын
Привет :) Мы буквально 2-3 месяца назад, мигрировали огромный сложный проект на React 18, вроде особых проблем не увидели
@husky_ya
@husky_ya Жыл бұрын
Привет. Реакт 18 уже не будет такой предсказуемый для разработчика, как 17. Это сулит трудностями не в создании страниц, а в реализации желаемого поведения. Посмотрите сами, как теперь стало неочевидно триггерить фокус на инпуте, хотя казалось бы. Разрабатываю проект, тяжеловесный, многие модули которого очень завязаны на логике с рефами. (здесь очевидно нужен был другой инструмент, точно не реакт, однако выбрали его из-за простоты) Из-за непредсказуемых рендеров DOM в 18 реакте, и следовательно, как сказал докладчик, всегда отложенной инициализации рефов, от апгрейда до 18 решили отказаться. Нам возможности типа Offscreen, не нужны, частные ситуации этого юзкейса решаем руками. А useEvent, про который автор канала рассказывал недавно, на стеке mobx+react не нужен: любой колбэк (являющийся экшеном) уже является физически одной и той же ссылкой и не меняется. Это кстати и к изменяемым объектам тоже относится. Проблему перфоманса JS, в частности батчинга, решаем стандартными средствами mobx + аккуратной расстановкой key + ... нелюбимым в официальной прессе React.memo. Звучит это всё непрозрачно. Однако проблема решается - путём взятия рендеринга под свой контроль, там это можно, все инструменты для этого на вышеупомянутом стеке есть. Реакт17 = всё ещё шаблонизатор, не более. Для нового проекта (который у меня пока не предвидится), использовать react@18 или он же в яркой обёртке next@13 - побоялся бы, считаю что "не выстрелит" из-за проблем с рефами, всё-таки их не только ради focus() и скролла юзают. Там есть ещё проблема одна - закадровые рендеры (startTransition, и возможно не только) теперь в проде!, но с этим разработчики живут ещё со времён StrictMode и вроде как даже привыкли. Для нового проекта, с учетом зрелости 17.0.2 уже можно начать искать другие реакт-подобные либы. А какие вы знаете альтернативы реакту?
@AttackHelicopter64
@AttackHelicopter64 3 ай бұрын
вместо flushSync можно использовать requestAnimationFrame не трогаем все setState, а после них будет requestAnimationFrame(() => refFields[type]?.focus())
@lionstar3189
@lionstar3189 Жыл бұрын
отличная лекция. У меня возник не большой вопрос про перерендер в реакте(перерендер в дом браузера имею ввиду). В реакте же только одна вещь вызывает перерендер - это изменение стейта, с помощью useState, useReducer, useContext(в этом случае меняется контекст и перерендриться только тот компонент в котором поменялся контекст). Да пропсы тоже влияют, но для этого у родителя нужно поменять стейт, что бы его дочерние компоненты у которых изменился пропс так же перерендрился и это влияет только на PureComponent-ах только. В обычных без PureComponent перерендер будет всегда, не смотря что стало с пропсами если обновляется родитель. Или это не так? Просто глянул лекцию кое где и поплыл...
@it-sin9k
@it-sin9k Жыл бұрын
Если компонент начал рендериться по какой-либо причине, то все его дети так же будут рендериться, за исключением тех, кто является PureComponent. У этих будут сравниваться props и будет приниматься решение рендерить или нет на основнании результатов сравнения.
@Bjatta
@Bjatta Жыл бұрын
По большому счёту...
@dimitro.cardellini
@dimitro.cardellini Жыл бұрын
ух і перехвилювався мій теска ... успіхів йому з наступними доповідями
@chum2470
@chum2470 Жыл бұрын
Хотим видео про эффектор!
@testchannel3265
@testchannel3265 Жыл бұрын
с языка снял
@gregdmitriev2784
@gregdmitriev2784 Жыл бұрын
хотим видео про видео как снималось видео 😅
@it-sin9k
@it-sin9k Жыл бұрын
Есть такое в планах, но позже)
@npo51ema
@npo51ema Жыл бұрын
я тут задался серьезным вопросом, как мы знаем браузер генерит рендер дерево и после вызывает layout() для того чтобы определить расположение нод. Собственно layout не бесплатная операция и требует определенных ресурсов cpu и я задумался вот над чем, что происходит когда мы в реакте пишем что-то типа {isOpened && } получается мы маунтим Модалку в дерево и браузер должен будет вызвать layout? Почему бы не использовать вместо этого display: none и изменять только этот стиль когда нам нужно будет показать модалку, в таком случае браузеру достаточно будет вызвать paint(). Или может реакт под капотом так и работает, в любом случае интересно мнение автора данного канала. Видос супер!
@it-sin9k
@it-sin9k Жыл бұрын
Спасибо за комментарий! display none к сожалению это не серебряная пуля, так как на одном экране может быть 10-ки тултипов, поповеров и попапов и все они должны в таком случае отрисоваться и быть скритыми с помощью display: none. Хотя может не один из них пользователю так и не понадобится. Это выглядит не рационально. С другой стороны, вы тоже правы, что не хотелось бы постоянно отрисовывать и потом удалять попап из дерева. React команда тоже об этом думала и по этому поводу создала отдельный компонент Offscreen. Я записал видео про него: kzfaq.info/get/bejne/orWFpt1hzM2oo58.html
@skeelo3157
@skeelo3157 7 ай бұрын
Какой большой у него счет
@user-vy8qy8cb9q
@user-vy8qy8cb9q Жыл бұрын
У меня было собеседование с ним)
@it-sin9k
@it-sin9k Жыл бұрын
Насколько мир мал))
@fedordostoevskiy4209
@fedordostoevskiy4209 Жыл бұрын
Половина разработчиков думали что это новая фича? Это они собеседования проводят? 😂😂😂 Возьмите меня в штат. Я сеньор сразу тогда 🥳
@snowsnowy677
@snowsnowy677 Жыл бұрын
круто, но было бы неплохо еще на код глянуть, есть ссылка??
@edwardfreedom
@edwardfreedom Жыл бұрын
дока
@it-sin9k
@it-sin9k Жыл бұрын
пну автора, мб подготовит ссылки :)
@user-zr2mo3gb2x
@user-zr2mo3gb2x Жыл бұрын
привет, youtube почему удалял коменты когда я пытался оставить ссылки, вообщем исходники из презы лежат на гите, можешь поискать по этому пользователю DmitriyGrosh. Репозитории называются react4 для 4 версии, react-batching-17v2 для 17 версии и react-batching-18 для 18 версии
@it-sin9k
@it-sin9k Жыл бұрын
Добавил ссылки в описание, Спасибо Диме за ссылки!)
@pavlof
@pavlof Жыл бұрын
есть крутое видео про работу реакта, в данном видео спикер создает самую малую часть реакта, по сути это просто функция которая рендерит то что в нее передали, но видео тем не менее очень крутое и дает небольшое представление, вам можно сделать что-то подробное но добавить часть про reconciliation. либо можно сделать серию видео про создание "своего" реакта. вот ссылка на видео kzfaq.info/get/bejne/nJidgLKaqLnOZZc.html
@it-sin9k
@it-sin9k Жыл бұрын
есть видео и про reconciliation: kzfaq.info/get/bejne/d5aHZdFjxuCsZac.html и более широко раскрытый доклад, на эту же тему: kzfaq.info/get/bejne/hLaIfdF83tqpgmg.html
@pavlof
@pavlof Жыл бұрын
@@it-sin9k спасибо
@nikto1851
@nikto1851 Жыл бұрын
Выносить в стэйт-мэнеджер лодинги и логику модальных окон это через чюр.. Мусор в проекте и жесткая привязка ui к стэйт-мэнеджеру..
@popuguytheparrot_
@popuguytheparrot_ Жыл бұрын
Растешь в контенте.
@max_cr_it
@max_cr_it Жыл бұрын
В принципе по большому щету автор прыгает не туда
@lesters
@lesters Жыл бұрын
блин мне больше заходит слово мердж, что логичнее :) реакт просто мерджит однотипные сетстейты, в разных частях кода
Невероятный Vite под микроскопом
14:51
АйТи Синяк
Рет қаралды 32 М.
React Reconciliation
11:53
АйТи Синяк
Рет қаралды 84 М.
[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr
01:00
是曼玉不是鳗鱼
Рет қаралды 49 МЛН
格斗裁判暴力执法!#fighting #shorts
00:15
武林之巅
Рет қаралды 90 МЛН
Sigma Girl Education #sigma #viral #comedy
00:16
CRAZY GREAPA
Рет қаралды 82 МЛН
Virtual DOM in React JS | Reconciliation | React Fiber
10:43
Делюсь опытом по использованию reselect
8:23
АйТи Синяк
Рет қаралды 9 М.
7 внаглую скрытых вещей
1:00
дизайн-студия и производство мебели
Рет қаралды 3,3 МЛН
Как стартовать новый проект в 2023 году?
10:36
АйТи Синяк
Рет қаралды 30 М.
Mastering React Batch Updating
10:23
Jack Herrington
Рет қаралды 43 М.
Все ли вы знаете о React key?
8:47
АйТи Синяк
Рет қаралды 36 М.