@@it-sin9k всё можно)) даже бросить что-то, главное чтоб кайф это приносило лично тебе и ты был счастлив) но, думаю ты и так знаешь,что счастье когда помогаешь кому-то, а твой труд однозначно помогает многим😉 главное не заставлять себя это делать,когда этого не хочется,ибо это тоже нормально)
Интересный доклад, а твоя подача информации отдельно радует). Далеко не каждый умеет объяснять понятно сложные темы. Огромное спасибо за твой труд! P.S.: Даже не смей бросать канал!))
Супер, посмотрел до середины. Круто, то что надо. Как раз сам готовлю доклад по оптимизации рендеринга в реакте и много чего прояснил. Спасибо. Обязательно досмотрю, обещаю :)
Хотелось бы видео про react-query, с акцентом на то, как лучше организовывать ui state и про мутацию серверного состояния, складывать ли серверный стейт в локальный в хуках и мутировать, либо напрямую в кэше, или подключать отдельные пакеты - mobx, redux, или использовать контекст.
React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?
Очень крутой контент и подача!Но про 60 кадров - ошибка) даже между 60 и 120fps можно сразу заметить разницу, а воспринимать возможно и до 150fps вроде
Видимо у вас глаз наметан хорошо и моник хороший) Я даже специально гуглил разные характеристики мониторов, оказалось что почти вся бюджетная линия мониторов не поддерживает свыше 60)
@@it-sin9k Сейчас уже много мониторов до 200 баксов 75-144hz, и я как чел, который перешел с 144 на 240, могу сказать что разница в плавности существенная. Я не говорю уже о разнице между 60hz и 240)
У меня был довольно старый, но не уже не элт, монитор с поддержкой 75 кадров/с, на нем с 60 кадрами была весьма заметная разница. А уж 60-120 так совсем. А в бюджетном сегменте неудивительно, что все 60, там больше ненужно
Кому еще интересно, процесс построения реакт ворк-ин-прогресс трее прерываемый, реакт может отменить его. А вот процесс замены, реакт каррент трее на ворк-ин-прогресс трее не прерываемый.
ВААААААУУУУ!!!! Четко, структурировано, красочно, шикарно подготовлено и чудесно изложено, информативно, супер полезно. Спасибо большое, посмотрел взахлеб)))) А самое главное поминимуму технического языка, спать не хотелось, а даже наоборот, просидел с застывшим лицом в позе "ВАУ". Круто, спасибо П.С Синяк - мой герой)))
Спасибо за такой лестный комментарий!!!) нам очень это помогает двигаться дальше и развивать канал) еще очень поможет, если вы этим каналом поделитесь со своими коллегами)
Спасибо огромное, доклад очень стоящий, скину в чат коллегам на работе) Ты просил(надеюсь не страшно,я то на ты;)) писать в комментах предложения по темам. Очень хочется послушать что то ещё про оптимизации в реакте. В духе как ты рассказал о том, как на практике можно воспользоваться знаниями о допущениях.
Я очень рад, что тебе зашел доклад) и отдельное спасибо за распространение моих роликов! А по поводу пожеланий, в данный момент, я как раз создаю целый плейлист посвященный этой теме "React под капотом", где будет много полезных мелочей ускользавших от глаза Вот например сегодня вышло новое видео о useCallback - th-cam.com/video/2Wp7QPTkpms/w-d-xo.html Оно бьет все рекорды на моем канале по просмотрам :)
Знал, что React использует какую-то эвристику для сравнения деревьев и знал, что при замене родительского узла происходит перемонтирование дочерних. Но то, что эти 2 факта так тесно связаны, стало для меня открытием) Спасибо)
Я правильно понимаю, что виртуал дом для реакта нужен чисто для того, что бы браузер layout веб страницы отрисовывал по минимуму. К примеру если у какого то элемента поменять style, это вызывает отрисовку layout(а), поэтому рекомендуют не писать 100 раз style, а прописать чисто класс(это вызывает только 1 раз отрисовку layout(а)). Реакт стремиться свести к минимуму.
Спасибо большое за доклад! Лучшее, что я нашел про 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 приложений. Скажи, пожалуйста, правильно ли я все понял? :)
Честно говоря до файбера, я не до конца уверен, что из себя представляло виртуальное дерево. Если говорить предположениями, то я думаю ваши мысли очень близки к истине
Просто вау! Спасибо тебе. Есть мысли сделать ещё видео о приоритизации? Какие действия попадают под категории? Как он это понимает? Вот пользователь навел на ховер - ок немедленный приоритет. Но как он это понял? Если у нас есть готовый список данных на следующую секунду рендера, как он меняет список? Что вообще такое этот список? Как он выглядит? Ты стал моим кумиром )
я обновил реакт с 15.3 до 16.8 и вообще не заметил разницы в скооости работы проекта. при этом около 2500 нод присутствуют у большинства страниц по данным гугл тестирования.
решили экспериментально залить мой доклад, как думаете стоит ли заливать такого рода вещи на канал? возможно и других доклады на специфик темы могут быть интересны? или придерживаться старого формата видео?
*Про 60 FPS вообще орнул)), то-то все мобилки уже под 120 герц экраны делают))), мысль то твоя понятна, что мы рендерем виртуальный дом больше раз чем рендерим в реальный. По этому конкурент моде накапливает изменения стейтов, батчит их, а потом раз в кадр рендерит*
Если речь идет про те приоритеты, про которые речь в видео, то на них влиять мы не можем. Но с другой стороны, мы можем сами написать код так, чтобы пока этот код не выполнится, загрузка данных например не начнется
Вопрос хороший, точного ответа у меня нет. Если попробовать порассуждать, то React строит виртуальный DOM, который знает размеры всех блоков, позицию скрола и размер экрана пользователя тоже не сложно узнать. Вот все эти данные и используют
Люблю комментарии под этим видео, чуть ниже человек пишет что я дурак, мол человек не видит больше 24 кадров, другой пишет стыдно не знать что человек видит больше))
@@it-sin9k Ну, я не вру. Если челу показать 60 и 120 кадров, он разницу заметит с первых секунд))) Где-то слышал, что наш глаз способен воспринимать 2400 кадров в сек))) Ну короче, об этом есть куча инфы в инете))
Самое интересное, что в комментариях много обвинений на эту тему) одни говорят люди и больше 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
![[доклад] React memo - сплетни исходники грань полезности](http://i.ytimg.com/vi/DuGFpxdU3VM/mqdefault.jpg)
![[доклад] React memo — сплетни исходники грань полезности](/img/tr.png)
Круто чувак, не закидывай канал) уже очень крутая подача и анимация от синяка
Спасибо!) лучшая поддержка, чтобы мы не бросили, это поделиться этим канал со своими коллегами)
@@it-sin9k делюсь со всеми )
@@it-sin9k даже бабушке скидываю, только не бросай !))
@@Никита-ж2з7п ахахах) в таком случае точно нельзя бросать) завтра кстати новое видео выйдет)
@@it-sin9k всё можно)) даже бросить что-то, главное чтоб кайф это приносило лично тебе и ты был счастлив) но, думаю ты и так знаешь,что счастье когда помогаешь кому-то, а твой труд однозначно помогает многим😉 главное не заставлять себя это делать,когда этого не хочется,ибо это тоже нормально)
Крутооо. Хотелось бы такой же доклад о Concurrent Mode. Много информации об этом но ты всё по полочкам прям раскладываешь.
Да, эту тему точно нельзя обходить стороной)
Интересный доклад, а твоя подача информации отдельно радует). Далеко не каждый умеет объяснять понятно сложные темы. Огромное спасибо за твой труд!
P.S.: Даже не смей бросать канал!))
Спасибо!) Пока в планах бросать канал нет) только вперед))
Твој глас је 💕, али да ли имаш програме учења за мене као да сам у Индонезији или на Маурицијусу?
Спасбо за контент! Очень лаконично и приятно) Лайк, подписка
Супер, посмотрел до середины. Круто, то что надо. Как раз сам готовлю доклад по оптимизации рендеринга в реакте и много чего прояснил. Спасибо. Обязательно досмотрю, обещаю :)
Рад быть полезным) надеюсь и другие видео пригодятся)
Отличное объяснение. Все четко понял. Кроме requestAnimationFrame и requestIdleCallback. Придется их изучить
Хотелось бы видео про react-query, с акцентом на то, как лучше организовывать ui state и про мутацию серверного состояния, складывать ли серверный стейт в локальный в хуках и мутировать, либо напрямую в кэше, или подключать отдельные пакеты - mobx, redux, или использовать контекст.
React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?
Отличное видео! Спасибо большое!
Вот это подробности, спасибо. Прошу, не останавливайтесь!
Спасибо!) будем продолжать в том же духе)
Очень крутой контент и подача!Но про 60 кадров - ошибка) даже между 60 и 120fps можно сразу заметить разницу, а воспринимать возможно и до 150fps вроде
Видимо у вас глаз наметан хорошо и моник хороший) Я даже специально гуглил разные характеристики мониторов, оказалось что почти вся бюджетная линия мониторов не поддерживает свыше 60)
@@it-sin9k Сейчас уже много мониторов до 200 баксов 75-144hz, и я как чел, который перешел с 144 на 240, могу сказать что разница в плавности существенная. Я не говорю уже о разнице между 60hz и 240)
Согласен насчёт фпс но это присуще только людям связанным с игровой индустрией.
У меня был довольно старый, но не уже не элт, монитор с поддержкой 75 кадров/с, на нем с 60 кадрами была весьма заметная разница. А уж 60-120 так совсем.
А в бюджетном сегменте неудивительно, что все 60, там больше ненужно
Действительно хорошая лекция. Многое прояснилось в голове. Спикеру респект!
Спасибо!)
Кому еще интересно, процесс построения реакт ворк-ин-прогресс трее прерываемый, реакт может отменить его. А вот процесс замены, реакт каррент трее на ворк-ин-прогресс трее не прерываемый.
Спасибо! Было бы интересно послушать и другие ваши доклады, я конечно, при помощи поиска нашел кое-что. Но возможно есть что-то еще =)
Спасибо) но это первое, что то достойное от меня) я не сильно люблю формат доклада, но иногда практикую
6:20 такого я давно не слышал, раньше тоже самое говорили про 24 кадра 🤣
Скоро и до 300+ кадров дойдем. Эволюция 😂😂😂
ВААААААУУУУ!!!! Четко, структурировано, красочно, шикарно подготовлено и чудесно изложено, информативно, супер полезно. Спасибо большое, посмотрел взахлеб)))) А самое главное поминимуму технического языка, спать не хотелось, а даже наоборот, просидел с застывшим лицом в позе "ВАУ". Круто, спасибо П.С Синяк - мой герой)))
Спасибо за такой лестный комментарий!!!)
нам очень это помогает двигаться дальше и развивать канал)
еще очень поможет, если вы этим каналом поделитесь со своими коллегами)
Привет, спасибо за очень интересный и понятный доклад! у меня вопрос сколько Virtual DOM создает React?
По идее 2 виртуальных дома, но все это не точно)
@@it-sin9k thank you)
Спасибо огромное, доклад очень стоящий, скину в чат коллегам на работе) Ты просил(надеюсь не страшно,я то на ты;)) писать в комментах предложения по темам. Очень хочется послушать что то ещё про оптимизации в реакте. В духе как ты рассказал о том, как на практике можно воспользоваться знаниями о допущениях.
Я очень рад, что тебе зашел доклад) и отдельное спасибо за распространение моих роликов!
А по поводу пожеланий, в данный момент, я как раз создаю целый плейлист посвященный этой теме "React под капотом", где будет много полезных мелочей ускользавших от глаза
Вот например сегодня вышло новое видео о useCallback - th-cam.com/video/2Wp7QPTkpms/w-d-xo.html
Оно бьет все рекорды на моем канале по просмотрам :)
Знал, что React использует какую-то эвристику для сравнения деревьев и знал, что при замене родительского узла происходит перемонтирование дочерних. Но то, что эти 2 факта так тесно связаны, стало для меня открытием) Спасибо)
Всегда пожалуйста :)
Супер доклад! очень много полезной и интересной информации! Спасибо)
Видео просто огонь, спасибо большое за подробные обьяснения! Не все понимал так в начале просмотра, хоть и прочитал документацию два раза
Спасибо 🔥
Я правильно понимаю, что виртуал дом для реакта нужен чисто для того, что бы браузер layout веб страницы отрисовывал по минимуму. К примеру если у какого то элемента поменять style, это вызывает отрисовку layout(а), поэтому рекомендуют не писать 100 раз style, а прописать чисто класс(это вызывает только 1 раз отрисовку layout(а)). Реакт стремиться свести к минимуму.
Идея правильная, а пример не совсем правильный :)
смотрю постоянно на часы, тебе идёт))
подскажи пожалуйста модель)
Один из самых неожиданных комментариев)
это подарок жены, фоточка прилагается :)
joxi.net/bmoDvZzTOJg672
@@it-sin9k первый раз с днём недели часы вижу, спасибо что поделился фоткой, крутые)
Спасибо, понятное и доступное объяснение такой сложной темы. Буду применять.
доклад топ, спасибо!
Это лучшее видео про устройство Реакта! Спасибо)
Спасибо!
серёжки красивые. беленькие как снежинки.
Спасибо за доклад. Очень круто!
Очень крутая лекция! Обычно все по верхам. Автору лайк и подписка! Открытие прям!
Добро пожаловать на канал!) надеюсь здесь найдете еще много интересного)
@@it-sin9k уже нашёл! Видосы про Солид - просто огонь)
Вынуждаете меня посмотреть все, что у вас есть по реату))
Спасибо большое за доклад! Лучшее, что я нашел про 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 я переключился на другую. Но я думаю вернусь еще к этой теме)
Офигенно, просто топ контент. Пилишь себе проекты, кажется, что все знаешь, а оказывается нюансов вагон
Хорошо сказано :)
Превосходный доклад, спасибо
я обновил реакт с 15.3 до 16.8 и вообще не заметил разницы в скооости работы проекта. при этом около 2500 нод присутствуют у большинства страниц по данным гугл тестирования.
Интересный опыт :)
Возможно у вас было написано приложение и так достаточно эффективно
Я один вижу больше 60 кадров в секунду?)
Ниже в комментариях чел вообще сказал что я бомжевидео запилил, ведь человек видит всего 24 кадра :)
@@it-sin9k нет, материал хороший! Смотрю периодически твой канал. Синяку привет)
И сам спикер тоже как будто в DOMике с жёлтой крышей)
приятно слушать, спасибо!
решили экспериментально залить мой доклад, как думаете стоит ли заливать такого рода вещи на канал? возможно и других доклады на специфик темы могут быть интересны? или придерживаться старого формата видео?
@@it-sin9k точно стоит, ваша подача в любом формате заходит и пополняет знания, а формат ваще не важен имхо
Спасибо тебе! после прочтения доки это видео супер!!!
Доклад огонь 🚀
очень интересно рассказываешь!)
ОГОНЬ! ТЫ - ГЕНИЙ! НИКТО НЕ МОЖЕТ ЛУЧШЕ ОБЪЯСНИТЬ. ДАЖЕ СОЗДАТЕЛИ REACT!
Ого) такая высокая оценка!) спасибо!)
Очень познавательная и полезная информация )
🔥 спасибо!
Великолепный канал! Где я был раньше?
Добро пожаловать :)
чётко, благодарю за доклад
Спасибо!
Красавчик, мало такого контента на просторах интеренета
Спасибо) по этой причине и решил завести этот канал) сам мало где могу получить информацию)
Очень полезный доклад!!!!!
Спасибо!
IT синяк это я каждую пятницу
2:29 2024 год, мы как пользователи хотим 120Hz )))
Всегда нужно больше))
Большое спасибо 🙏
Пою диферамбы данному каналу )
Спасибо!
А нет прямо ссылочки на статью Эндрю Кларка?
да, конечно)
github.com/acdlite/react-fiber-architecture
Блин так хорошо начал. И начинаешь втирать про 60 кадров)
не уловил суть проблемы :(
Есть устаревшая информация в видео? Так как мне очень понравилось видео надеюсь ответите "нету")
да, вроде все актуально, разве что они еще накрутили поверх этого чуть сложнее)
Знаете, какой вопрос не разобран: что если задать div key=1, а затем поменять его на span key=1. Будет ререндер?
да) конечно) как я и говорил в видео, если тип изменится, значит и будет mount новый) и не важно, что key тот же) это независимые условия)
*Про 60 FPS вообще орнул)), то-то все мобилки уже под 120 герц экраны делают))), мысль то твоя понятна, что мы рендерем виртуальный дом больше раз чем рендерим в реальный. По этому конкурент моде накапливает изменения стейтов, батчит их, а потом раз в кадр рендерит*
а приоритеты загрузки мы можем самостоятельно указывать? или всетаки лучше что бы реакт сам определял?
Если речь идет про те приоритеты, про которые речь в видео, то на них влиять мы не можем. Но с другой стороны, мы можем сами написать код так, чтобы пока этот код не выполнится, загрузка данных например не начнется
@@it-sin9k да, именно про те что в видео, спасибо
Снимаю шляпу перед оратором!
спасибо!)
Супер-доклад.
Спасибо! много хороших отзывов получил доклад, поэтому надо видимо делать еще доклады)
Спасибо!
как реакт понимает что элемент не во viewport будет?
Вопрос хороший, точного ответа у меня нет. Если попробовать порассуждать, то React строит виртуальный DOM, который знает размеры всех блоков, позицию скрола и размер экрана пользователя тоже не сложно узнать. Вот все эти данные и используют
Крутой чувак! не синяч там
Спасибо за доклад, кому интересно более глубокое и детальное объяснение - th-cam.com/video/0ympFIwQFJw/w-d-xo.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
Отличное видео!
Спасибо!🥳