[доклад] Подробно о React Reconciliation, или Как React добился 60 fps

[@fl1pp1x]

Круто чувак, не закидывай канал) уже очень крутая подача и анимация от синяка

[@it-sin9k]

Спасибо!) лучшая поддержка, чтобы мы не бросили, это поделиться этим канал со своими коллегами)

[@fl1pp1x]

@@it-sin9k делюсь со всеми )

[@Никита-ж2з7п]

@@it-sin9k даже бабушке скидываю, только не бросай !))

[@it-sin9k]

@@Никита-ж2з7п ахахах) в таком случае точно нельзя бросать) завтра кстати новое видео выйдет)

[@Никита-ж2з7п]

@@it-sin9k всё можно)) даже бросить что-то, главное чтоб кайф это приносило лично тебе и ты был счастлив) но, думаю ты и так знаешь,что счастье когда помогаешь кому-то, а твой труд однозначно помогает многим😉 главное не заставлять себя это делать,когда этого не хочется,ибо это тоже нормально)

[@РоманТищук-е6в]

Крутооо. Хотелось бы такой же доклад о Concurrent Mode. Много информации об этом но ты всё по полочкам прям раскладываешь.

[@it-sin9k]

Да, эту тему точно нельзя обходить стороной)

[@pnx_gfy]

Интересный доклад, а твоя подача информации отдельно радует). Далеко не каждый умеет объяснять понятно сложные темы. Огромное спасибо за твой труд! P.S.: Даже не смей бросать канал!))

[@it-sin9k]

Спасибо!) Пока в планах бросать канал нет) только вперед))

[@andr1127]

Спасбо за контент! Очень лаконично и приятно) Лайк, подписка

[@МирославМилаев]

Спасибо!🥳

[@serhiirumiantsev7736]

Супер, посмотрел до середины. Круто, то что надо. Как раз сам готовлю доклад по оптимизации рендеринга в реакте и много чего прояснил. Спасибо. Обязательно досмотрю, обещаю :)

[@it-sin9k]

Рад быть полезным) надеюсь и другие видео пригодятся)

[@ИванИванов-у3ч4м]

Отличное видео! Спасибо большое!

[@dmitriibo458]

Вот это подробности, спасибо. Прошу, не останавливайтесь!

[@it-sin9k]

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

[@disposables72]

Действительно хорошая лекция. Многое прояснилось в голове. Спикеру респект!

[@it-sin9k]

Спасибо!)

[@denskorpi]

Спасибо огромное, доклад очень стоящий, скину в чат коллегам на работе) Ты просил(надеюсь не страшно,я то на ты;)) писать в комментах предложения по темам. Очень хочется послушать что то ещё про оптимизации в реакте. В духе как ты рассказал о том, как на практике можно воспользоваться знаниями о допущениях.

[@it-sin9k]

Я очень рад, что тебе зашел доклад) и отдельное спасибо за распространение моих роликов! А по поводу пожеланий, в данный момент, я как раз создаю целый плейлист посвященный этой теме "React под капотом", где будет много полезных мелочей ускользавших от глаза Вот например сегодня вышло новое видео о useCallback - kzbin.info/www/bejne/aIjTaISGidCjo9U Оно бьет все рекорды на моем канале по просмотрам :)

[@АнатолийГорбов-о1ь]

Супер доклад! очень много полезной и интересной информации! Спасибо)

[@prog-hak]

ВААААААУУУУ!!!! Четко, структурировано, красочно, шикарно подготовлено и чудесно изложено, информативно, супер полезно. Спасибо большое, посмотрел взахлеб)))) А самое главное поминимуму технического языка, спать не хотелось, а даже наоборот, просидел с застывшим лицом в позе "ВАУ". Круто, спасибо П.С Синяк - мой герой)))

[@it-sin9k]

Спасибо за такой лестный комментарий!!!) нам очень это помогает двигаться дальше и развивать канал) еще очень поможет, если вы этим каналом поделитесь со своими коллегами)

[@PlayMrGolem]

Отличное объяснение. Все четко понял. Кроме requestAnimationFrame и requestIdleCallback. Придется их изучить

[@uNkind33]

доклад топ, спасибо!

[@andreydiakonov57]

Видео просто огонь, спасибо большое за подробные обьяснения! Не все понимал так в начале просмотра, хоть и прочитал документацию два раза

[@РоманНарожнов]

Пушка! Спасибо громадное!

[@МихаилФокин-л4у]

Спасибо за доклад. Очень круто!

[@Alexander_1ov]

Это лучшее видео про устройство Реакта! Спасибо)

[@it-sin9k]

Спасибо!

[@user-paint-alexandra]

Спасибо, понятное и доступное объяснение такой сложной темы. Буду применять.

[@MrGreen-zs7on]

Доклад огонь 🚀

[@elcapitan8693]

Очень крутой контент и подача!Но про 60 кадров - ошибка) даже между 60 и 120fps можно сразу заметить разницу, а воспринимать возможно и до 150fps вроде

[@it-sin9k]

Видимо у вас глаз наметан хорошо и моник хороший) Я даже специально гуглил разные характеристики мониторов, оказалось что почти вся бюджетная линия мониторов не поддерживает свыше 60)

[@fedyasick5177]

@@it-sin9k Сейчас уже много мониторов до 200 баксов 75-144hz, и я как чел, который перешел с 144 на 240, могу сказать что разница в плавности существенная. Я не говорю уже о разнице между 60hz и 240)

[@АртемТерещенко-ц4э]

Согласен насчёт фпс но это присуще только людям связанным с игровой индустрией.

[@tyt-no-udee-nick]

У меня был довольно старый, но не уже не элт, монитор с поддержкой 75 кадров/с, на нем с 60 кадрами была весьма заметная разница. А уж 60-120 так совсем. А в бюджетном сегменте неудивительно, что все 60, там больше ненужно

[@kirillpodolinniy309]

Александр, спасибо вам большое!

[@dmitrysvetlov6001]

Превосходный доклад, спасибо

[@muratx10]

🔥 спасибо!

[@kolyabokov88]

Очень крутая лекция! Обычно все по верхам. Автору лайк и подписка! Открытие прям!

[@it-sin9k]

Добро пожаловать на канал!) надеюсь здесь найдете еще много интересного)

[@kolyabokov88]

@@it-sin9k уже нашёл! Видосы про Солид - просто огонь) Вынуждаете меня посмотреть все, что у вас есть по реату))

[@NoName-zh7cc]

Офигенно, просто топ контент. Пилишь себе проекты, кажется, что все знаешь, а оказывается нюансов вагон

[@it-sin9k]

Хорошо сказано :)

[@ArtemMindsurfer]

очень интересно рассказываешь!)

[@MaximFilanovich]

Спасибо большое за доклад! Лучшее, что я нашел про React Reconciliation на русском языке! Также появился вопрос по поводу React Fiber. Fiber - это переделанная реализация алгоритма reconciliation. Получается до версии React 16.0.0 у нас были объекты Node с ключами $$typeof, type, props и др. С React Fiber объект Node был заменен на объект Fiber, в свойствах у которого хранятся type, key, child, sibling, return, pendingProps, memorizedProps, pendingWorkPriority и др. И благодаря этим новым свойствам у React получилось реализовать приоритизацию и улучшить скорость работы React приложений. Скажи, пожалуйста, правильно ли я все понял? :)

[@it-sin9k]

Честно говоря до файбера, я не до конца уверен, что из себя представляло виртуальное дерево. Если говорить предположениями, то я думаю ваши мысли очень близки к истине

[@lenapeleka197]

Спасибо тебе! после прочтения доки это видео супер!!!

[@barakex6766]

Это один из лучших контентов, работаю в альфе, там тебя и посоветовали, Альфа с тобой брат)))

[@it-sin9k]

Ого) это круто) я свое ИП тоже обслуживаю в Альфа банке, так что я тоже с Альфой))

[@dmitrysvetlov6001]

Хотелось бы видео про react-query, с акцентом на то, как лучше организовывать ui state и про мутацию серверного состояния, складывать ли серверный стейт в локальный в хуках и мутировать, либо напрямую в кэше, или подключать отдельные пакеты - mobx, redux, или использовать контекст.

[@dmitriyvahrameev4828]

Очень познавательная и полезная информация )

[@spoonjeee4785]

приятно слушать, спасибо!

[@it-sin9k]

решили экспериментально залить мой доклад, как думаете стоит ли заливать такого рода вещи на канал? возможно и других доклады на специфик темы могут быть интересны? или придерживаться старого формата видео?

[@spoonjeee4785]

@@it-sin9k точно стоит, ваша подача в любом формате заходит и пополняет знания, а формат ваще не важен имхо

[@БекназарКемелов]

Привет, спасибо за очень интересный и понятный доклад! у меня вопрос сколько Virtual DOM создает React?

[@it-sin9k]

По идее 2 виртуальных дома, но все это не точно)

[@БекназарКемелов]

@@it-sin9k thank you)

[@ИванИванов-ц5ю6х]

React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?

[@illiazolotarov8766]

Просто вау! Спасибо тебе. Есть мысли сделать ещё видео о приоритизации? Какие действия попадают под категории? Как он это понимает? Вот пользователь навел на ховер - ок немедленный приоритет. Но как он это понял? Если у нас есть готовый список данных на следующую секунду рендера, как он меняет список? Что вообще такое этот список? Как он выглядит? Ты стал моим кумиром )

[@it-sin9k]

спасибо!) пока с темы React я переключился на другую. Но я думаю вернусь еще к этой теме)

[@vitaliiiashchuk1534]

Спасибо! Было бы интересно послушать и другие ваши доклады, я конечно, при помощи поиска нашел кое-что. Но возможно есть что-то еще =)

[@it-sin9k]

Спасибо) но это первое, что то достойное от меня) я не сильно люблю формат доклада, но иногда практикую

[@from_brest2631]

чётко, благодарю за доклад

[@it-sin9k]

Спасибо!

[@ddflruc]

Очень полезный доклад!!!!!

[@it-sin9k]

Спасибо!

[@cikada3398]

Красавчик, мало такого контента на просторах интеренета

[@it-sin9k]

Спасибо) по этой причине и решил завести этот канал) сам мало где могу получить информацию)

[@МаксимВ-к9ч]

ОГОНЬ! ТЫ - ГЕНИЙ! НИКТО НЕ МОЖЕТ ЛУЧШЕ ОБЪЯСНИТЬ. ДАЖЕ СОЗДАТЕЛИ REACT!

[@it-sin9k]

Ого) такая высокая оценка!) спасибо!)

[@N1ckish]

Великолепный канал! Где я был раньше?

[@it-sin9k]

Добро пожаловать :)

[@dmtrkskv]

Знал, что React использует какую-то эвристику для сравнения деревьев и знал, что при замене родительского узла происходит перемонтирование дочерних. Но то, что эти 2 факта так тесно связаны, стало для меня открытием) Спасибо)

[@it-sin9k]

Всегда пожалуйста :)

[@PacoOfficial]

6:20 такого я давно не слышал, раньше тоже самое говорили про 24 кадра 🤣

[@abbze8272]

Скоро и до 300+ кадров дойдем. Эволюция 😂😂😂

[@lionstar3189]

Я правильно понимаю, что виртуал дом для реакта нужен чисто для того, что бы браузер layout веб страницы отрисовывал по минимуму. К примеру если у какого то элемента поменять style, это вызывает отрисовку layout(а), поэтому рекомендуют не писать 100 раз style, а прописать чисто класс(это вызывает только 1 раз отрисовку layout(а)). Реакт стремиться свести к минимуму.

[@it-sin9k]

Идея правильная, а пример не совсем правильный :)

[@boldureans]

IT синяк это я каждую пятницу

[@vladvoloshenko5701]

смотрю постоянно на часы, тебе идёт)) подскажи пожалуйста модель)

[@it-sin9k]

Один из самых неожиданных комментариев) это подарок жены, фоточка прилагается :) joxi.net/bmoDvZzTOJg672

[@vladvoloshenko5701]

@@it-sin9k первый раз с днём недели часы вижу, спасибо что поделился фоткой, крутые)

[@АндрейИльин-д6ж]

серёжки красивые. беленькие как снежинки.

[@shilza8336]

Спасибо!

[@lionstar3189]

Кому еще интересно, процесс построения реакт ворк-ин-прогресс трее прерываемый, реакт может отменить его. А вот процесс замены, реакт каррент трее на ворк-ин-прогресс трее не прерываемый.

[@jses8560]

Супер-доклад.

[@it-sin9k]

Спасибо! много хороших отзывов получил доклад, поэтому надо видимо делать еще доклады)

[@my-jorney]

И сам спикер тоже как будто в DOMике с жёлтой крышей)

[@VeaceslavBARBARII]

2:29 2024 год, мы как пользователи хотим 120Hz )))

[@it-sin9k]

Всегда нужно больше))

[@romanmed9035]

я обновил реакт с 15.3 до 16.8 и вообще не заметил разницы в скооости работы проекта. при этом около 2500 нод присутствуют у большинства страниц по данным гугл тестирования.

[@it-sin9k]

Интересный опыт :) Возможно у вас было написано приложение и так достаточно эффективно

[@AlexeyNeklesa]

Пою диферамбы данному каналу )

[@it-sin9k]

Спасибо!

[@arsen..]

Блин так хорошо начал. И начинаешь втирать про 60 кадров)

[@it-sin9k]

не уловил суть проблемы :(

[@artemy5594]

Я один вижу больше 60 кадров в секунду?)

[@it-sin9k]

Ниже в комментариях чел вообще сказал что я бомжевидео запилил, ведь человек видит всего 24 кадра :)

[@artemy5594]

@@it-sin9k нет, материал хороший! Смотрю периодически твой канал. Синяку привет)

[@АлексейСоснин-р4й]

*Про 60 FPS вообще орнул)), то-то все мобилки уже под 120 герц экраны делают))), мысль то твоя понятна, что мы рендерем виртуальный дом больше раз чем рендерим в реальный. По этому конкурент моде накапливает изменения стейтов, батчит их, а потом раз в кадр рендерит*

[@lafoyta7674]

Есть устаревшая информация в видео? Так как мне очень понравилось видео надеюсь ответите "нету")

[@it-sin9k]

да, вроде все актуально, разве что они еще накрутили поверх этого чуть сложнее)

[@nikolaytydir2203]

а приоритеты загрузки мы можем самостоятельно указывать? или всетаки лучше что бы реакт сам определял?

[@it-sin9k]

Если речь идет про те приоритеты, про которые речь в видео, то на них влиять мы не можем. Но с другой стороны, мы можем сами написать код так, чтобы пока этот код не выполнится, загрузка данных например не начнется

[@nikolaytydir2203]

@@it-sin9k да, именно про те что в видео, спасибо

[@Elator11777]

Снимаю шляпу перед оратором!

[@it-sin9k]

спасибо!)

[@kspshnik]

А нет прямо ссылочки на статью Эндрю Кларка?

[@it-sin9k]

да, конечно) github.com/acdlite/react-fiber-architecture

[@TarasovFrontDev]

Знаете, какой вопрос не разобран: что если задать div key=1, а затем поменять его на span key=1. Будет ререндер?

[@it-sin9k]

да) конечно) как я и говорил в видео, если тип изменится, значит и будет mount новый) и не важно, что key тот же) это независимые условия)

[@AbraKadabra000]

Крутой чувак! не синяч там

[@asktosimon]

как реакт понимает что элемент не во viewport будет?

[@it-sin9k]

Вопрос хороший, точного ответа у меня нет. Если попробовать порассуждать, то React строит виртуальный DOM, который знает размеры всех блоков, позицию скрола и размер экрана пользователя тоже не сложно узнать. Вот все эти данные и используют

[@paljm345]

В смысле человек не видит больше 60 кадров в сек??? Ещё как видит... стыдненько этого не знать(((

[@it-sin9k]

Люблю комментарии под этим видео, чуть ниже человек пишет что я дурак, мол человек не видит больше 24 кадров, другой пишет стыдно не знать что человек видит больше))

[@paljm345]

@@it-sin9k Ну, я не вру. Если челу показать 60 и 120 кадров, он разницу заметит с первых секунд))) Где-то слышал, что наш глаз способен воспринимать 2400 кадров в сек))) Ну короче, об этом есть куча инфы в инете))

[@it-sin9k]

@@paljm345 Да, я тоже читал, особенно геймеры могут отличать все эти вещи. Но для веба это не сильно критично :)

[@paljm345]

@@it-sin9k Для веба, 60 фпс, это как для геймера стабильные 200))

[@it-sin9k]

@@paljm345 Хорошо сказано)

[@ivan_kobzar]

Спасибо за доклад, кому интересно более глубокое и детальное объяснение - kzbin.info/www/bejne/ZqrQoXl_rLZ5gNk&ab_channel=PhilipFabianek

[@abbze8272]

Человек не может видеть больше 60 кадров в секунду? Это же не правда, вводить в заблуждение...

[@it-sin9k]

Самое интересное, что в комментариях много обвинений на эту тему) одни говорят люди и больше 24 не видят, другие не согласны, что больше 60 не видит человек) Мое мнение человек вроде как может видеть больше 60) это нужно разве что для геймеров и такого рода специфических кейсов. Для обычного сайта и 24 кадра в секунду уже много в большинстве мест) В рамках доклада, не самая важная казалось бы информация)

[@abbze8272]

@@it-sin9k с этим полностью согласен, глаз видит больше 1000 фпс, но для сайтов хватит и 60, потому что далеко не у всех сейчас 60+ герц мониторы и для плавного, приятного вида сайта 60фпс вполне достаточно. Зажрались мы, недавно и 20фпс сайты было нормой :)

[@ДенисПручковский-ы5ф]

Балииин, какой же зашквар в синезине работать после протестов..... Разочарование года

[@dzmitryrabinkin]

Надеюсь сама команда этого канала не работает в синезисе.

[@bogdanshelomanov5668]

Реакт кстате ещё в пдф умеет

[@tagnati5585]

С момента про ограничение в 60 фпс желание смотреть дальше мгновенно отпало. Сейчас бы не знать такой базовой вещи что человеческий глаз не воспринимает частоту выше 24 кадров в секунду с соотношением сторон 16 на 9. Мда. Дизлайк.

[@it-sin9k]

По этому поводу, я как то прочел интересную цитату: "Профессор Чопин убеждён, что для передачи информации нет смысла идти выше 24 кадров в секунду, принятых в кино. Тем не менее он понимает, что люди видят разницу между 20 и 60 герцами." 60 кадров в секунду - это уже своего рода стандарт, при котором, людей все устраивает. Даже в играх больше разгонять свой комп смысла особого нет. Если вы думаете, что все это фигня, то обратите внимание, что даже React core команда ориентируется на те же 60fps, когда говорит о перфомансе: "A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps." reactnative.dev/docs/performance

[@alexandrkositsky7698]

Спасибо 🔥

[@Evgeny..]

Отличное видео!

[@NursultanBegaliev]

Большое спасибо 🙏