Воу не ожидал тебя тут увидеть, Мужик у тебя тоже очень крутой контент. Ulbi TV, Синяк, CodeDojo, Frontend science и Минин мой личный TOP 5 - рекомендую!
Интересно собрать фидбек, какой тип выпуском наиболее интересен: это практические с react-router или может социальные проблемы как то глубже каким то исследованиям уделять или именно хочется понять как реакт работает глубже?
@@it-sin9k Лично мне больше нравятся видео типа этого, потому что я пока не встречал в русском сегменте объяснения reconciliation, да и мало кто об этом рассказывает.
Спасибо за фидбек!) для этого плейлиста есть идеи уже для нескольких видео, так же с подсмотреть под капот реакта) но провести исследование и сделать такое видео достаточно трудоемкий процесс, поэтому этот плейлист будет не очень часто пополняться
Чувак, почему? Почему я не видел тебя раньше) сегодня в офисе коллега посоветовал твой канал сказав что ты «до безобразия любопытный». Мне это очень близко) продолжай в том же духе. Подписка, лайк, колокольчик и репост)
Спасибо!) как раз видео которое прямо сейчас мы готовим (завтра буду записывать аудио дорожку) про React под капотом)) Но такие видео требуют исследований, поэтому немного дольше видео готовится)
топое видео! Спасибо) после просмотра видео на канале начал больше понимать как можно оптимизировать код, и какие факторы на это влияют(как реакт определяет когда перерендер делать)
@@it-sin9k В какой момент и как именно строятся fiber-объекты, что именно происходит когда работа прерывается и в этот момент приходят новые изменения взамен старых (сверка начинается заново или продолжается с момента остановки). Когда нужно учитывать знания о fiber, как можно их применить (т.е. показать на живых примерах, как работало раньше и что улучшилось сейчас).
а как react знает какую ноду нужно обновить? вот у нас внутри разметки используеться значение стейта "isTrue" {isTrue && 1} 2 когда "isTrue" поменяеться react должен поменять только эту часть разметки {isTrue&& 1}, но как он знает что именно эта нода изменилась? он сравнивает результат вызова React.createElement("div", null, isTrue &&React.createElement("h1", null, "1"),React.createElement("h1", null, "2")); до и после изменения "isTrue "?
Когда вы обновили state в вашем компоненте, То React помещает fiber ноду, которую надо обновить. Я тот механизм не изучал особо, но думаю это работа с Lines, у них часто мелькает такой код, думаю они чуть ли не в массив собираю ноды которые надо обновить и обновляют их.
@@it-sin9k я после этого видео решил даже проверить на своём опыте как это работает, восторгу не было предела))) И на функциональном компоненте действительно также ведёт себя
Подскажите, правильно ли в нынешних реалиях будет работать в основном с Redux, а не хуками? Я уже не совсем новичок и мне показался Redux более приятным и понятным..
Тут надо сразу понять что вы подразумеваете под хуками. Потому что Redux предоставляет свое API так же и через хуки. Поэтому по факту можно использовать хуки и redux одновременно. Если же речь идет о написании полностью проекта с использовать useReducer и useContext, то вероятно я бы не рекомендовал вам этого делать. Это достаточно экспериментальный путь, без особого опыта таким заниматься не рекоммендую, да и пользу явную это не принесет. Поэтому используйте Redux и не переживайте)
@@it-sin9k На одном из собесов, дали тестовое задание, реализовать свой алгоритм VirtualDom. Позиция была что-то между strong junior и middle. Поэтому удивляться уже не приходится никаким вопросам)
допущения, это допустим. У тебя приходят в функцию цифры. И ты говоришь допустим они будут целые и положительные. Таким образом тебе не надо больше добавлять проверки, на то что число отрицательно и не целое. И ты на этом экономишь ресурсы. Так и реакт сделал свои допущения, чтобы делать меньше проверок и сэкономить на этом вычислительные ресурсы
React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?
Честно говоря я пока точно не отвечу, я недавно наткнулся на материал от Дена Абрамова, по поводу фаз, их там вроде даже 3 фразы, но я могу путать. Поэтому возможно соберусь с духом доизучаю и сделаю отдельный выпуск про это :)
Интересно, а Реакт приоритезирует DOM-операции в зависимости от сложности выполнения операции, то есть, если DOM-операция в виде анимации требует больше времени, то она будет идти первой или это не обязательно? Просто по каким критериям Реакт ставит те или иные задачи на первое место ?
я честно скажу, что с этой темой мало работал, но из того что я видел, у них описаны через назовем его "enum", где каждая операция соответствует одной из опций enum
@@it-sin9k спасибо большое, за ответ). Ну а если строить догадки, то, как я понимаю, Реакт не обязательно делает приоритизацию задач по времени их выполнения. Т.к. анимация ховера может по времени выполняться, грубо говоря, за 20мс, а получение данных и их отображение может занять 50 мс, но Реакт поставит анимацию на первое место, как показано в вашем видео) Могу ошибаться, конечно
@@it-sin9k Это не в Вашем ролике. У меня всегда было представление, что рендер идет сверху вниз и юзеффекты так же должны отрабатывать. Но если создать пустой проект, сделать родителя и ребенка, то в ребенке юзеффект отработает первым. Почему?
я частенько этот вопрос задаю на собеседованиях) суть следующая. Допустим есть компонент parent и child. вызываться будет следующим образом return (parent) -> return (child) -> useEffect(child) -> useEffect(parent) 1. Логика достаточно простая. Сначала вам надо начать рендерить родитель, чтобы узнать, а какие дети есть. Поэтому вызывается return (parent), там он узнает о детях и идет их вызывать return (child) 2. С другой стороны useEffect вызывается только после того как текущий компонент закончил полностью рендер. А может ли компонент parent закончить полностью рендер, если child еще не закончил. Поэтому useEffect(parent) вызывается только после того как все дети закончат рендеры
@@it-sin9k Спасибо! Просто сильно заафектился на этом, когда у меня в компоненте и в юзеффекте получились разные состояние поля в стейте. Начал копать, но ничего умного не нашел.
@@it-sin9kВ каком порядке обходятся ноды-чилдрены одного парента? И, особенно, как этот порядок обхода совмещается с тем фактом, что некоторые ноды имеют ключ?
@@balabuyew Это уже скорее про детали имплементации. Можно было бы с таким же успехом еще ожидать подробного рассказать о разных фазах рендеринга. Это тоже ключевая фича. Разбор как разные типы компонентов по разному обрабатываются. И все это за 10 минут. Как то это не очень реалистично звучит
@@it-sin9kЭто не детали имплеметнации. Если, например, у меня есть десять чилдренов в одном каком-то паренте, пять из них имеют ключи, а остальные пять - не имеют, да еще и в новом состоянии чилдрены с ключами были передвинуты на другие места, я хочу знать какие именно чилдрены будут обновлены, а какие пересозданы заново. В документации, которую вы все дружно пересказываете, об этом не написано.
![[доклад] Подробно о React Reconciliation, или Как React добился 60 fps](http://i.ytimg.com/vi/NPXJnKytER4/mqdefault.jpg)
Очень хорошее видео!)
Воу не ожидал тебя тут увидеть, Мужик у тебя тоже очень крутой контент. Ulbi TV, Синяк, CodeDojo, Frontend science и Минин мой личный TOP 5 - рекомендую!
@@sashasyhinin3928 ✊🏻✊🏻
@@sashasyhinin3928 полностью с тобой согласен
@@sashasyhinin3928 Это же чем тебе люди так насолили, что ты Минина рекомендуешь к просмотру?)))
Вот если ульби такое говорит, то я просто физически не смогу не чекнуть этот видос)
пожалуй лучшее 👍 в youtube русскоязычное объяснение механизма React Reconciliation
Спасибо!
Случайно наткнулся на этот канал (рекомендации) и офигел. Господа (вы же там не один?), это просто... классно! Теперь задача - пересмотреть все...
Добро пожаловать!)
нас 2-ое) программист и видео инженер)
Мы будем благодарны, если о нас еще и коллегам расскажете)
Епта это вообще лучшее объяснения как работает virtual DOM под капотом. Thanks
Добро пожаловать!)
Классно что я нашёл этот канал! просто супер!
Согласен) Классно, что вы нашли этот канал))
Увидел пост в хабре, посмотрел видос, лайкнул и подписался красава .Контент годный советую
Спасибо! Будем рады, если поделитесь с коллегами)
Спасибо за видео! Объяснили всё понятно и доступно. Жду новых выпусков работы!)
Интересно собрать фидбек, какой тип выпуском наиболее интересен: это практические с react-router или может социальные проблемы как то глубже каким то исследованиям уделять или именно хочется понять как реакт работает глубже?
@@it-sin9k Лично мне больше нравятся видео типа этого, потому что я пока не встречал в русском сегменте объяснения reconciliation, да и мало кто об этом рассказывает.
Спасибо за фидбек!) для этого плейлиста есть идеи уже для нескольких видео, так же с подсмотреть под капот реакта) но провести исследование и сделать такое видео достаточно трудоемкий процесс, поэтому этот плейлист будет не очень часто пополняться
Невероятно качественный контент. Спасибо!
Спасибо! мы очень стараемся)
каждый раз перед собесами просматриваю большенство твоих роликов, очень классные выжимки без воды.
круто!) мне периодически говорят, что мои ролики помогают готовиться к собесам) очень радует)
Отличный ролик! И графические примеры очень классные! Спасибо!
Спасибо!
поделился плейлистом с коллегами по работе. реально хороший у вас контент по работе реакта
Спасибо за поддержку и распостранение!)
Рекомендую еще посмотреть про SOLID плейлист, судя по голосованию, он людям больше понравился чем реакт даже)
Автору большая благодарность за материал и экпертизу. Очень помогаете учиться
Чувак, почему? Почему я не видел тебя раньше) сегодня в офисе коллега посоветовал твой канал сказав что ты «до безобразия любопытный». Мне это очень близко) продолжай в том же духе. Подписка, лайк, колокольчик и репост)
Ого!) Добро пожаловать на борт, будем вместе синячить))
@@it-sin9k крутяк) давай синячить вместе))
спасибо, было интересно и полезно. Не понятно, почему так мало подписчиков.
Спасибо!) Про мало подписчиков люди пишут мне, еще когда было 100 подписчиков)) если поделитесь с коллегами, буду очень признателен!)
@@it-sin9k как только они появятся, то обязательно. Так скажем от отца к сыну)))
Потрясающе! Просто потрясающе!
Спасибо!
Очень крутые видео делаешь, спасибо, что делишься знаниями и своими исследованиями. Успехов
Оч круто, нужно еще подробностей по подкапотке реакта
Заказ принят! Заказ выполнен! Целый плейлист про подкапотку реакта:
th-cam.com/play/PLz_dGYmQRrr-g02jHDzuu-6VlOt8-8Uu5.html
Спасибо! Очень глубокое исследование темы)
Отлично все рассказываешь! Молодец! Продолжай еще!))
Спасибо!) будем стараться и дальше Вас радовать)
Ну, что сказать? Это очень круто! Лайк и комментарий!
Это поям хорошо, лойс и заслуженный комментарий!
Вы лучшие!
Спасибо, все кратко и по делу !
Топ контент!!! Давай ещё видео по теме react под капотом
Спасибо!) как раз видео которое прямо сейчас мы готовим (завтра буду записывать аудио дорожку) про React под капотом)) Но такие видео требуют исследований, поэтому немного дольше видео готовится)
Храни тебя господь
Аминь!
топое видео! Спасибо) после просмотра видео на канале начал больше понимать как можно оптимизировать код, и какие факторы на это влияют(как реакт определяет когда перерендер делать)
Очень полезный контент! Спасибо! (React Reconciliation)
Посмотрите и другие видео на тему React, там много полезного)
отличный контент) браво!
Хорошее объяснение! Спасибо!
Очень ясно. react, react-reconciliation, react details, react-fiber
Благодарю за видео!!!
Спасибо!!!
Htmlacademy даже в доп материалах на курсе по реакту указывает ссыль на твое видео по этой теме))
Ого) ничего себе) вот это неожиданно)
Geniously (react, react-reconciliation, react details, react-fiber)
ты лучший!
Спасибо!
топовый ролик !!!
well yeah if you wanna do it primarily
Интересное видео! Спасибо.
Привет, Синяк!
Я заметил что ты поздоровался)
3 раза заметил, гыыыы
Привет) будет 4-ый раз)
супер,спс ! React Reconciliation
Огонь!
Чел это топ
Все для вас)
можете еще с коллегами поделиться)
Пожалуйста, запишите новый ролик о Fiber
А что хотелось бы увидеть в этом видео?
@@it-sin9k В какой момент и как именно строятся fiber-объекты, что именно происходит когда работа прерывается и в этот момент приходят новые изменения взамен старых (сверка начинается заново или продолжается с момента остановки). Когда нужно учитывать знания о fiber, как можно их применить (т.е. показать на живых примерах, как работало раньше и что улучшилось сейчас).
@АйТиСиняк, обнови плиз ссылки на priorities list
nice functional good working easy install thanks
а как react знает какую ноду нужно обновить? вот у нас внутри разметки используеться значение стейта "isTrue"
{isTrue && 1}
2
когда "isTrue" поменяеться react должен поменять только эту часть разметки {isTrue&& 1}, но как он знает что именно эта нода изменилась?
он сравнивает результат вызова
React.createElement("div", null, isTrue &&React.createElement("h1", null, "1"),React.createElement("h1", null, "2"));
до и после изменения "isTrue "?
Когда вы обновили state в вашем компоненте, То React помещает fiber ноду, которую надо обновить. Я тот механизм не изучал особо, но думаю это работа с Lines, у них часто мелькает такой код, думаю они чуть ли не в массив собираю ноды которые надо обновить и обновляют их.
ясно, спасибо за качественный контент
Топ🔥🔥🔥
Актуальна ли эта информация для функциональных компонентов?
Да, очень даже актуальна :)
@@it-sin9k я после этого видео решил даже проверить на своём опыте как это работает, восторгу не было предела)))
И на функциональном компоненте действительно также ведёт себя
@@НикитаГончаров-е8ш Доверяй но проверяй!)
Great job!
Thank you!)
вдохновляет
Подскажите, правильно ли в нынешних реалиях будет работать в основном с Redux, а не хуками? Я уже не совсем новичок и мне показался Redux более приятным и понятным..
И конечно же снова спасибо за новое видео!
Тут надо сразу понять что вы подразумеваете под хуками. Потому что Redux предоставляет свое API так же и через хуки. Поэтому по факту можно использовать хуки и redux одновременно.
Если же речь идет о написании полностью проекта с использовать useReducer и useContext, то вероятно я бы не рекомендовал вам этого делать. Это достаточно экспериментальный путь, без особого опыта таким заниматься не рекоммендую, да и пользу явную это не принесет.
Поэтому используйте Redux и не переживайте)
@@it-sin9k да, я про useReducer и useContext, спасибо большое за содержательный ответ!
круто!
Топ!
А как насчет 120 фпс на новых 120 герцовых экранах? Интересно, будет ли когда-то доработка этого момента. Спасибо за такой качественный контент
думаю не в ближайшее время) это все же сайт, и сайтам не нужно чаще всего такая детализация) хотя будущее не за горами и возможно все)
спасибо!!
Привет! Ты сам рисуешь/анимируешь сюжеты?
Привет! Я составляю контент и записываю аудио, а второй человек по тз все это визуализирует.
Агонь!!!!!!
Жду этих вопросов на следующем собесе
я минимально по этой теме спрашиваю) скорее ковырну в курсе человек или нет) если нет ничего страшного)
@@it-sin9k На одном из собесов, дали тестовое задание, реализовать свой алгоритм VirtualDom. Позиция была что-то между strong junior и middle. Поэтому удивляться уже не приходится никаким вопросам)
какие-то изуверы, занимаются всякой дичью)
Привет
что имеется введу под допущением? Какие-то trade-offs для того, что бы покрыть более критичные сценарии?
не совсем понял суть слова 'допущение'
допущения, это допустим. У тебя приходят в функцию цифры. И ты говоришь допустим они будут целые и положительные. Таким образом тебе не надо больше добавлять проверки, на то что число отрицательно и не целое. И ты на этом экономишь ресурсы. Так и реакт сделал свои допущения, чтобы делать меньше проверок и сэкономить на этом вычислительные ресурсы
ссылки на github к сожалению устарели
React Reconciliation имеет две фазы, commit и render. Фаза commit это отправка изменений в render environment или commit реализация уже внутри render environment?
Честно говоря я пока точно не отвечу, я недавно наткнулся на материал от Дена Абрамова, по поводу фаз, их там вроде даже 3 фразы, но я могу путать. Поэтому возможно соберусь с духом доизучаю и сделаю отдельный выпуск про это :)
@@it-sin9k Ну третья precommit фаза. Вопрос про commit, я узнал ответ - реализация и в react core и в реакт дом.
"Фаза commit это отправка изменений в render environment"
Думаю что это, делая вывод из сказанного в видео что фазы разделены.
Интересно, а Реакт приоритезирует DOM-операции в зависимости от сложности выполнения операции, то есть, если DOM-операция в виде анимации требует больше времени, то она будет идти первой или это не обязательно? Просто по каким критериям Реакт ставит те или иные задачи на первое место ?
я честно скажу, что с этой темой мало работал, но из того что я видел, у них описаны через назовем его "enum", где каждая операция соответствует одной из опций enum
@@it-sin9k спасибо большое, за ответ). Ну а если строить догадки, то, как я понимаю, Реакт не обязательно делает приоритизацию задач по времени их выполнения. Т.к. анимация ховера может по времени выполняться, грубо говоря, за 20мс, а получение данных и их отображение может занять 50 мс, но Реакт поставит анимацию на первое место, как показано в вашем видео) Могу ошибаться, конечно
сложно что-то прогнозировать без знания кода. Но тут точно надо учитывать event loop, считать тики процессора и переключаться между задачами
Почему консоль логи в ребенках отрисовываются первее, чем в родителе? Все обернуто в мемо и есть юзЕффекты
я уже не помню, где там точно console.log стоит. Сбросьте временную метку или опишите ситуацию :)
@@it-sin9k Это не в Вашем ролике. У меня всегда было представление, что рендер идет сверху вниз и юзеффекты так же должны отрабатывать. Но если создать пустой проект, сделать родителя и ребенка, то в ребенке юзеффект отработает первым. Почему?
я частенько этот вопрос задаю на собеседованиях)
суть следующая. Допустим есть компонент parent и child.
вызываться будет следующим образом
return (parent) -> return (child) -> useEffect(child) -> useEffect(parent)
1. Логика достаточно простая. Сначала вам надо начать рендерить родитель, чтобы узнать, а какие дети есть. Поэтому вызывается return (parent), там он узнает о детях и идет их вызывать return (child)
2. С другой стороны useEffect вызывается только после того как текущий компонент закончил полностью рендер. А может ли компонент parent закончить полностью рендер, если child еще не закончил. Поэтому useEffect(parent) вызывается только после того как все дети закончат рендеры
@@it-sin9k Спасибо! Просто сильно заафектился на этом, когда у меня в компоненте и в юзеффекте получились разные состояние поля в стейте. Начал копать, но ничего умного не нашел.
не за что :)
👍💪
Алгоритм не описан..
чего вам не хватило, чтобы сказать, что алгоритм описан?
@@it-sin9kВ каком порядке обходятся ноды-чилдрены одного парента? И, особенно, как этот порядок обхода совмещается с тем фактом, что некоторые ноды имеют ключ?
@@balabuyew Это уже скорее про детали имплементации. Можно было бы с таким же успехом еще ожидать подробного рассказать о разных фазах рендеринга. Это тоже ключевая фича. Разбор как разные типы компонентов по разному обрабатываются. И все это за 10 минут. Как то это не очень реалистично звучит
@@it-sin9kЭто не детали имплеметнации.
Если, например, у меня есть десять чилдренов в одном каком-то паренте, пять из них имеют ключи, а остальные пять - не имеют, да еще и в новом состоянии чилдрены с ключами были передвинуты на другие места, я хочу знать какие именно чилдрены будут обновлены, а какие пересозданы заново.
В документации, которую вы все дружно пересказываете, об этом не написано.
@@balabuyew Про это есть отдельное видео th-cam.com/video/OtAlPwW8DNU/w-d-xo.html . Да и про ключи упоминалось даже в этом видео, что это и зачем это)
+
спасибо, а то все рассказывают и показывают уже как делать на живом проекте или с 0 не обьясняя главных понятий работы реакта в целом
Добро пожаловать на канал! Тут много видео про то как реакт работает из нутри)