[доклад] Подробно о React Reconciliation, или Как React добился 60 fps
Вставка
- Опубліковано 11 лип 2024
- Данное видео является выступлением на 6-дневной онлайн конференции Frontend Live 2020. Доклад более широко раскрывает видео React Reconciliation и по оценкам из 50 докладов занял 6 место
Поддержать Айти Синяка можно здесь:
UA-cam: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
Таймкоды:
00:00 Объявление темы
00:30 Кто я такой и чем занимаюсь
03:34 Virtual DOM
08:41 Проблемы которые решает Virtual DOM
14:36 Как работает реакт
18:40 Разделение среды рендеринга
19:55 Алгоритм сравнения деревьев
22:00 Допущения Реакта
32:33 Приоритизация
37:35 Приоризация на github
40:30 Немного истории
43:28 Источники информации
45:50 Подписывайтесь!
46:30 Вопрос и Ответы
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Видео просто огонь, спасибо большое за подробные обьяснения! Не все понимал так в начале просмотра, хоть и прочитал документацию два раза
Супер доклад! очень много полезной и интересной информации! Спасибо)
Спасибо, понятное и доступное объяснение такой сложной темы. Буду применять.
Спасибо за доклад. Очень круто!
Спасбо за контент! Очень лаконично и приятно) Лайк, подписка
Отличное видео! Спасибо большое!
Превосходный доклад, спасибо
Спасибо тебе! после прочтения доки это видео супер!!!
Очень познавательная и полезная информация )
Пушка! Спасибо громадное!
Супер, посмотрел до середины. Круто, то что надо. Как раз сам готовлю доклад по оптимизации рендеринга в реакте и много чего прояснил. Спасибо. Обязательно досмотрю, обещаю :)
Рад быть полезным) надеюсь и другие видео пригодятся)
очень интересно рассказываешь!)
Александр, спасибо вам большое!
Вот это подробности, спасибо. Прошу, не останавливайтесь!
Спасибо!) будем продолжать в том же духе)
доклад топ, спасибо!
Доклад огонь 🚀
Отличное видео!
Круто чувак, не закидывай канал) уже очень крутая подача и анимация от синяка
Спасибо!) лучшая поддержка, чтобы мы не бросили, это поделиться этим канал со своими коллегами)
@@it-sin9k делюсь со всеми )
@@it-sin9k даже бабушке скидываю, только не бросай !))
@@user-fu7gm5fx5g ахахах) в таком случае точно нельзя бросать) завтра кстати новое видео выйдет)
@@it-sin9k всё можно)) даже бросить что-то, главное чтоб кайф это приносило лично тебе и ты был счастлив) но, думаю ты и так знаешь,что счастье когда помогаешь кому-то, а твой труд однозначно помогает многим😉 главное не заставлять себя это делать,когда этого не хочется,ибо это тоже нормально)
Интересный доклад, а твоя подача информации отдельно радует). Далеко не каждый умеет объяснять понятно сложные темы. Огромное спасибо за твой труд!
P.S.: Даже не смей бросать канал!))
Спасибо!) Пока в планах бросать канал нет) только вперед))
🔥 спасибо!
Это лучшее видео про устройство Реакта! Спасибо)
Спасибо!
Офигенно, просто топ контент. Пилишь себе проекты, кажется, что все знаешь, а оказывается нюансов вагон
Хорошо сказано :)
ВААААААУУУУ!!!! Четко, структурировано, красочно, шикарно подготовлено и чудесно изложено, информативно, супер полезно. Спасибо большое, посмотрел взахлеб)))) А самое главное поминимуму технического языка, спать не хотелось, а даже наоборот, просидел с застывшим лицом в позе "ВАУ". Круто, спасибо П.С Синяк - мой герой)))
Спасибо за такой лестный комментарий!!!)
нам очень это помогает двигаться дальше и развивать канал)
еще очень поможет, если вы этим каналом поделитесь со своими коллегами)
Крутооо. Хотелось бы такой же доклад о Concurrent Mode. Много информации об этом но ты всё по полочкам прям раскладываешь.
Да, эту тему точно нельзя обходить стороной)
чётко, благодарю за доклад
Спасибо!
Очень крутая лекция! Обычно все по верхам. Автору лайк и подписка! Открытие прям!
Добро пожаловать на канал!) надеюсь здесь найдете еще много интересного)
@@it-sin9k уже нашёл! Видосы про Солид - просто огонь)
Вынуждаете меня посмотреть все, что у вас есть по реату))
Большое спасибо 🙏
Очень полезный доклад!!!!!
Спасибо!
Спасибо огромное, доклад очень стоящий, скину в чат коллегам на работе) Ты просил(надеюсь не страшно,я то на ты;)) писать в комментах предложения по темам. Очень хочется послушать что то ещё про оптимизации в реакте. В духе как ты рассказал о том, как на практике можно воспользоваться знаниями о допущениях.
Я очень рад, что тебе зашел доклад) и отдельное спасибо за распространение моих роликов!
А по поводу пожеланий, в данный момент, я как раз создаю целый плейлист посвященный этой теме "React под капотом", где будет много полезных мелочей ускользавших от глаза
Вот например сегодня вышло новое видео о useCallback - ua-cam.com/video/2Wp7QPTkpms/v-deo.html
Оно бьет все рекорды на моем канале по просмотрам :)
Красавчик, мало такого контента на просторах интеренета
Спасибо) по этой причине и решил завести этот канал) сам мало где могу получить информацию)
Спасибо 🔥
приятно слушать, спасибо!
решили экспериментально залить мой доклад, как думаете стоит ли заливать такого рода вещи на канал? возможно и других доклады на специфик темы могут быть интересны? или придерживаться старого формата видео?
@@it-sin9k точно стоит, ваша подача в любом формате заходит и пополняет знания, а формат ваще не важен имхо
Отличное объяснение. Все четко понял. Кроме requestAnimationFrame и requestIdleCallback. Придется их изучить
IT синяк это я каждую пятницу
Это один из лучших контентов, работаю в альфе, там тебя и посоветовали, Альфа с тобой брат)))
Ого) это круто) я свое ИП тоже обслуживаю в Альфа банке, так что я тоже с Альфой))
Спасибо!
6:20 такого я давно не слышал, раньше тоже самое говорили про 24 кадра 🤣
Скоро и до 300+ кадров дойдем. Эволюция 😂😂😂
Супер-доклад.
Спасибо! много хороших отзывов получил доклад, поэтому надо видимо делать еще доклады)
ОГОНЬ! ТЫ - ГЕНИЙ! НИКТО НЕ МОЖЕТ ЛУЧШЕ ОБЪЯСНИТЬ. ДАЖЕ СОЗДАТЕЛИ REACT!
Ого) такая высокая оценка!) спасибо!)
Просто вау! Спасибо тебе. Есть мысли сделать ещё видео о приоритизации? Какие действия попадают под категории? Как он это понимает? Вот пользователь навел на ховер - ок немедленный приоритет. Но как он это понял? Если у нас есть готовый список данных на следующую секунду рендера, как он меняет список? Что вообще такое этот список? Как он выглядит?
Ты стал моим кумиром )
спасибо!)
пока с темы React я переключился на другую. Но я думаю вернусь еще к этой теме)
Хотелось бы видео про react-query, с акцентом на то, как лучше организовывать ui state и про мутацию серверного состояния, складывать ли серверный стейт в локальный в хуках и мутировать, либо напрямую в кэше, или подключать отдельные пакеты - mobx, redux, или использовать контекст.
Великолепный канал! Где я был раньше?
Добро пожаловать :)
Действительно хорошая лекция. Многое прояснилось в голове. Спикеру респект!
Спасибо!)
Спасибо большое за доклад! Лучшее, что я нашел про 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 приложений.
Скажи, пожалуйста, правильно ли я все понял? :)
Честно говоря до файбера, я не до конца уверен, что из себя представляло виртуальное дерево. Если говорить предположениями, то я думаю ваши мысли очень близки к истине
React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?
Спасибо! Было бы интересно послушать и другие ваши доклады, я конечно, при помощи поиска нашел кое-что. Но возможно есть что-то еще =)
Спасибо) но это первое, что то достойное от меня) я не сильно люблю формат доклада, но иногда практикую
Привет, спасибо за очень интересный и понятный доклад! у меня вопрос сколько Virtual DOM создает React?
По идее 2 виртуальных дома, но все это не точно)
@@it-sin9k thank you)
И сам спикер тоже как будто в DOMике с жёлтой крышей)
Кому еще интересно, процесс построения реакт ворк-ин-прогресс трее прерываемый, реакт может отменить его. А вот процесс замены, реакт каррент трее на ворк-ин-прогресс трее не прерываемый.
Очень крутой контент и подача!Но про 60 кадров - ошибка) даже между 60 и 120fps можно сразу заметить разницу, а воспринимать возможно и до 150fps вроде
Видимо у вас глаз наметан хорошо и моник хороший) Я даже специально гуглил разные характеристики мониторов, оказалось что почти вся бюджетная линия мониторов не поддерживает свыше 60)
@@it-sin9k Сейчас уже много мониторов до 200 баксов 75-144hz, и я как чел, который перешел с 144 на 240, могу сказать что разница в плавности существенная. Я не говорю уже о разнице между 60hz и 240)
Согласен насчёт фпс но это присуще только людям связанным с игровой индустрией.
У меня был довольно старый, но не уже не элт, монитор с поддержкой 75 кадров/с, на нем с 60 кадрами была весьма заметная разница. А уж 60-120 так совсем.
А в бюджетном сегменте неудивительно, что все 60, там больше ненужно
серёжки красивые. беленькие как снежинки.
смотрю постоянно на часы, тебе идёт))
подскажи пожалуйста модель)
Один из самых неожиданных комментариев)
это подарок жены, фоточка прилагается :)
joxi.net/bmoDvZzTOJg672
@@it-sin9k первый раз с днём недели часы вижу, спасибо что поделился фоткой, крутые)
Знал, что React использует какую-то эвристику для сравнения деревьев и знал, что при замене родительского узла происходит перемонтирование дочерних. Но то, что эти 2 факта так тесно связаны, стало для меня открытием) Спасибо)
Всегда пожалуйста :)
Я один вижу больше 60 кадров в секунду?)
Ниже в комментариях чел вообще сказал что я бомжевидео запилил, ведь человек видит всего 24 кадра :)
@@it-sin9k нет, материал хороший! Смотрю периодически твой канал. Синяку привет)
Я правильно понимаю, что виртуал дом для реакта нужен чисто для того, что бы браузер layout веб страницы отрисовывал по минимуму. К примеру если у какого то элемента поменять style, это вызывает отрисовку layout(а), поэтому рекомендуют не писать 100 раз style, а прописать чисто класс(это вызывает только 1 раз отрисовку layout(а)). Реакт стремиться свести к минимуму.
Идея правильная, а пример не совсем правильный :)
Пою диферамбы данному каналу )
Спасибо!
2:29 2024 год, мы как пользователи хотим 120Hz )))
Всегда нужно больше))
а приоритеты загрузки мы можем самостоятельно указывать? или всетаки лучше что бы реакт сам определял?
Если речь идет про те приоритеты, про которые речь в видео, то на них влиять мы не можем. Но с другой стороны, мы можем сами написать код так, чтобы пока этот код не выполнится, загрузка данных например не начнется
@@it-sin9k да, именно про те что в видео, спасибо
А нет прямо ссылочки на статью Эндрю Кларка?
да, конечно)
github.com/acdlite/react-fiber-architecture
Снимаю шляпу перед оратором!
спасибо!)
я обновил реакт с 15.3 до 16.8 и вообще не заметил разницы в скооости работы проекта. при этом около 2500 нод присутствуют у большинства страниц по данным гугл тестирования.
Интересный опыт :)
Возможно у вас было написано приложение и так достаточно эффективно
*Про 60 FPS вообще орнул)), то-то все мобилки уже под 120 герц экраны делают))), мысль то твоя понятна, что мы рендерем виртуальный дом больше раз чем рендерим в реальный. По этому конкурент моде накапливает изменения стейтов, батчит их, а потом раз в кадр рендерит*
Крутой чувак! не синяч там
Знаете, какой вопрос не разобран: что если задать div key=1, а затем поменять его на span key=1. Будет ререндер?
да) конечно) как я и говорил в видео, если тип изменится, значит и будет mount новый) и не важно, что key тот же) это независимые условия)
Блин так хорошо начал. И начинаешь втирать про 60 кадров)
не уловил суть проблемы :(
как реакт понимает что элемент не во viewport будет?
Вопрос хороший, точного ответа у меня нет. Если попробовать порассуждать, то React строит виртуальный DOM, который знает размеры всех блоков, позицию скрола и размер экрана пользователя тоже не сложно узнать. Вот все эти данные и используют
Спасибо за доклад, кому интересно более глубокое и детальное объяснение - ua-cam.com/video/0ympFIwQFJw/v-deo.html&ab_channel=PhilipFabianek
В смысле человек не видит больше 60 кадров в сек??? Ещё как видит... стыдненько этого не знать(((
Люблю комментарии под этим видео, чуть ниже человек пишет что я дурак, мол человек не видит больше 24 кадров, другой пишет стыдно не знать что человек видит больше))
@@it-sin9k Ну, я не вру. Если челу показать 60 и 120 кадров, он разницу заметит с первых секунд))) Где-то слышал, что наш глаз способен воспринимать 2400 кадров в сек))) Ну короче, об этом есть куча инфы в инете))
@@paljm345 Да, я тоже читал, особенно геймеры могут отличать все эти вещи. Но для веба это не сильно критично :)
@@it-sin9k Для веба, 60 фпс, это как для геймера стабильные 200))
@@paljm345 Хорошо сказано)
Реакт кстате ещё в пдф умеет
Надеюсь сама команда этого канала не работает в синезисе.
Балииин, какой же зашквар в синезине работать после протестов..... Разочарование года
Человек не может видеть больше 60 кадров в секунду? Это же не правда, вводить в заблуждение...
Самое интересное, что в комментариях много обвинений на эту тему) одни говорят люди и больше 24 не видят, другие не согласны, что больше 60 не видит человек)
Мое мнение человек вроде как может видеть больше 60) это нужно разве что для геймеров и такого рода специфических кейсов. Для обычного сайта и 24 кадра в секунду уже много в большинстве мест) В рамках доклада, не самая важная казалось бы информация)
@@it-sin9k с этим полностью согласен, глаз видит больше 1000 фпс, но для сайтов хватит и 60, потому что далеко не у всех сейчас 60+ герц мониторы и для плавного, приятного вида сайта 60фпс вполне достаточно.
Зажрались мы, недавно и 20фпс сайты было нормой :)
С момента про ограничение в 60 фпс желание смотреть дальше мгновенно отпало. Сейчас бы не знать такой базовой вещи что человеческий глаз не воспринимает частоту выше 24 кадров в секунду с соотношением сторон 16 на 9. Мда. Дизлайк.
По этому поводу, я как то прочел интересную цитату: "Профессор Чопин убеждён, что для передачи информации нет смысла идти выше 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