KZhead

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

АйТи Синяк
2024 ж. 17 Мам.
17 984 Рет қаралды
Жүктеу

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_...
Поддержать Айти Синяка можно здесь:
KZhead: / @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 сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер

  • Пожалуйста, не убирайте субтитры, т.к. я слабслышащийся, другого способа воспринять инфу у меня нет, даже если это корявые сабы! Так держать, спасибо!

    @user-dy4uj4er6s@user-dy4uj4er6s Жыл бұрын

    • Привет :) Постараюсь вернуть субтитры ко всем видео и на будущее буду еще просматривать корявые субтитры в видео и править, где коряво переведено :) Так как я теперь знаю, что это кому то нужно) спасибо за комментарий!

      @it-sin9k@it-sin9k Жыл бұрын

    • Кстати, по сути можно сделать скрипт, воспринимающий все аудио и за счёт какой-то либы выводящий тебе текст

      @sphardegod5451@sphardegod545111 ай бұрын

  • Огонь! Посмотрел на одном дыхании, Дима интересно рассказывает

    @vegeman8954@vegeman8954 Жыл бұрын

  • Было очень интересно послушать. Спасибо!

    @user-fw4ew8wf3b@user-fw4ew8wf3b Жыл бұрын

  • ПО БОЛЬШЕМУ СЧЕТУ спасибо за доклад!

    @serhiimaliuha69@serhiimaliuha69 Жыл бұрын

  • Ребята, вы делаете большое дело) Реально, раскрывая на широкую публику такие важные механики реакта, вы просто конкретно улучшаете среду разработчиков, глубину их знаний, понимание, заинтересованность.. Просто хочу ещё поблагодарить за ваш труд! Продолжайте, пожалуйста))

    @gritsienkooleg3447@gritsienkooleg3447 Жыл бұрын

    • Спасибо!) будем продолжать в таком же духе)

      @it-sin9k@it-sin9k Жыл бұрын

  • Очень круто, спасибо большое!!!

    @gritsienkooleg3447@gritsienkooleg3447 Жыл бұрын

  • Новый выпуск, новый праздник) спасибо!

    @Ramosok@Ramosok Жыл бұрын

    • С Наступающим Новым Годом)

      @it-sin9k@it-sin9k Жыл бұрын

  • Круто, спасибо!

    @user-cr1pq1wz8v@user-cr1pq1wz8v Жыл бұрын

  • Спасибо, было интересно

    @BlueCell@BlueCell Жыл бұрын

  • Спасибо большое!

    @arswarog@arswarog Жыл бұрын

  • Синяк ты лучший!)

    @sergeypashkov1312@sergeypashkov1312Ай бұрын

    • спасибо!) очень приятно)

      @it-sin9k@it-sin9kАй бұрын

  • Класс, спасибо.

    @alexeysvetlenko2217@alexeysvetlenko2217 Жыл бұрын

  • Хороший доклад

    @user-pn6bp4cn4x@user-pn6bp4cn4x5 ай бұрын

  • найс,по факту-спасибо

    @valentynkuriato605@valentynkuriato605 Жыл бұрын

  • огонь!

    @romandeveloper7720@romandeveloper7720 Жыл бұрын

  • Классный спикер!

    @orucqarayev4759@orucqarayev4759 Жыл бұрын

  • Очуменный конечно канал)

    @multtanker6365@multtanker6365 Жыл бұрын

  • Классное видео. Не могу разобрать слово на 26:10, где все описано =) в ливе, либе, лире подскажите пожалуйста.

    @ilikecola378@ilikecola378 Жыл бұрын

  • вместо flushSync можно использовать requestAnimationFrame не трогаем все setState, а после них будет requestAnimationFrame(() => refFields[type]?.focus())

    @AttackHelicopter64@AttackHelicopter642 ай бұрын

  • Вопрос: решались ли Вы уже стартовать какой-нибудь коммерческий проект на 18-ой версии? Если да, то объясните почему, и если нет, то тоже интересно мнение. Спасибо)

    @ilyaprotsenko1023@ilyaprotsenko1023 Жыл бұрын

    • Привет :) Мы буквально 2-3 месяца назад, мигрировали огромный сложный проект на React 18, вроде особых проблем не увидели

      @it-sin9k@it-sin9k Жыл бұрын

    • Привет. Реакт 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 уже можно начать искать другие реакт-подобные либы. А какие вы знаете альтернативы реакту?

      @husky_ya@husky_ya Жыл бұрын

  • отличная лекция. У меня возник не большой вопрос про перерендер в реакте(перерендер в дом браузера имею ввиду). В реакте же только одна вещь вызывает перерендер - это изменение стейта, с помощью useState, useReducer, useContext(в этом случае меняется контекст и перерендриться только тот компонент в котором поменялся контекст). Да пропсы тоже влияют, но для этого у родителя нужно поменять стейт, что бы его дочерние компоненты у которых изменился пропс так же перерендрился и это влияет только на PureComponent-ах только. В обычных без PureComponent перерендер будет всегда, не смотря что стало с пропсами если обновляется родитель. Или это не так? Просто глянул лекцию кое где и поплыл...

    @lionstar3189@lionstar3189 Жыл бұрын

    • Если компонент начал рендериться по какой-либо причине, то все его дети так же будут рендериться, за исключением тех, кто является PureComponent. У этих будут сравниваться props и будет приниматься решение рендерить или нет на основнании результатов сравнения.

      @it-sin9k@it-sin9k Жыл бұрын

  • ух і перехвилювався мій теска ... успіхів йому з наступними доповідями

    @dimitro.cardellini@dimitro.cardellini Жыл бұрын

  • По большому счёту...

    @Bjatta@Bjatta Жыл бұрын

  • Хотим видео про эффектор!

    @chum2470@chum2470 Жыл бұрын

    • с языка снял

      @testchannel3265@testchannel3265 Жыл бұрын

    • хотим видео про видео как снималось видео 😅

      @gregdmitriev2784@gregdmitriev2784 Жыл бұрын

    • Есть такое в планах, но позже)

      @it-sin9k@it-sin9k Жыл бұрын

  • Ну так чё там? разобрался что передаётся по ссылке, а что по значению? видос про это будет?

    @zhenia14@zhenia14 Жыл бұрын

    • не) не будет) В интернете и так полно ресурсов на эту тему)

      @it-sin9k@it-sin9k Жыл бұрын

  • я тут задался серьезным вопросом, как мы знаем браузер генерит рендер дерево и после вызывает layout() для того чтобы определить расположение нод. Собственно layout не бесплатная операция и требует определенных ресурсов cpu и я задумался вот над чем, что происходит когда мы в реакте пишем что-то типа {isOpened && } получается мы маунтим Модалку в дерево и браузер должен будет вызвать layout? Почему бы не использовать вместо этого display: none и изменять только этот стиль когда нам нужно будет показать модалку, в таком случае браузеру достаточно будет вызвать paint(). Или может реакт под капотом так и работает, в любом случае интересно мнение автора данного канала. Видос супер!

    @npo51ema@npo51ema Жыл бұрын

    • Спасибо за комментарий! display none к сожалению это не серебряная пуля, так как на одном экране может быть 10-ки тултипов, поповеров и попапов и все они должны в таком случае отрисоваться и быть скритыми с помощью display: none. Хотя может не один из них пользователю так и не понадобится. Это выглядит не рационально. С другой стороны, вы тоже правы, что не хотелось бы постоянно отрисовывать и потом удалять попап из дерева. React команда тоже об этом думала и по этому поводу создала отдельный компонент Offscreen. Я записал видео про него: kzhead.info/sun/n7OOo95onpl6pqM/bejne.html

      @it-sin9k@it-sin9k Жыл бұрын

  • У меня было собеседование с ним)

    @user-vy8qy8cb9q@user-vy8qy8cb9q Жыл бұрын

    • Насколько мир мал))

      @it-sin9k@it-sin9k Жыл бұрын

  • Половина разработчиков думали что это новая фича? Это они собеседования проводят? 😂😂😂 Возьмите меня в штат. Я сеньор сразу тогда 🥳

    @fedordostoevskiy4209@fedordostoevskiy4209 Жыл бұрын

  • круто, но было бы неплохо еще на код глянуть, есть ссылка??

    @snowsnowy677@snowsnowy677 Жыл бұрын

    • дока

      @edwardfreedom@edwardfreedom Жыл бұрын

    • пну автора, мб подготовит ссылки :)

      @it-sin9k@it-sin9k Жыл бұрын

    • привет, youtube почему удалял коменты когда я пытался оставить ссылки, вообщем исходники из презы лежат на гите, можешь поискать по этому пользователю DmitriyGrosh. Репозитории называются react4 для 4 версии, react-batching-17v2 для 17 версии и react-batching-18 для 18 версии

      @user-zr2mo3gb2x@user-zr2mo3gb2x Жыл бұрын

    • Добавил ссылки в описание, Спасибо Диме за ссылки!)

      @it-sin9k@it-sin9k Жыл бұрын

  • Какой большой у него счет

    @skeelo3157@skeelo31577 ай бұрын

  • есть крутое видео про работу реакта, в данном видео спикер создает самую малую часть реакта, по сути это просто функция которая рендерит то что в нее передали, но видео тем не менее очень крутое и дает небольшое представление, вам можно сделать что-то подробное но добавить часть про reconciliation. либо можно сделать серию видео про создание "своего" реакта. вот ссылка на видео kzhead.info/sun/mZamfbOheoWgaJs/bejne.html

    @pavlof@pavlof Жыл бұрын

    • есть видео и про reconciliation: kzhead.info/sun/dJSQYtJqmKx-aKs/bejne.html и более широко раскрытый доклад, на эту же тему: kzhead.info/sun/gbSRetKDsKZ7hWw/bejne.html

      @it-sin9k@it-sin9k Жыл бұрын

    • @@it-sin9k спасибо

      @pavlof@pavlof Жыл бұрын

  • Выносить в стэйт-мэнеджер лодинги и логику модальных окон это через чюр.. Мусор в проекте и жесткая привязка ui к стэйт-мэнеджеру..

    @nikto1851@nikto1851 Жыл бұрын

  • Растешь в контенте.

    @popuguytheparrot_@popuguytheparrot_ Жыл бұрын

  • В принципе по большому щету автор прыгает не туда

    @max_cr_it@max_cr_it Жыл бұрын

  • блин мне больше заходит слово мердж, что логичнее :) реакт просто мерджит однотипные сетстейты, в разных частях кода

    @lesters@lesters Жыл бұрын
KZhead