React Reconciliation

[@UlbiTV]

Очень хорошее видео!)

[@sashasyhinin3928]

Воу не ожидал тебя тут увидеть, Мужик у тебя тоже очень крутой контент. Ulbi TV, Синяк, CodeDojo, Frontend science и Минин мой личный TOP 5 - рекомендую!

[@UlbiTV]

@@sashasyhinin3928 ✊🏻✊🏻

[@levapveeskela4327]

@@sashasyhinin3928 полностью с тобой согласен

[@danildemchenko6004]

​@@sashasyhinin3928 Это же чем тебе люди так насолили, что ты Минина рекомендуешь к просмотру?)))

[@HauntMeGaming]

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

[@dmag3287]

пожалуй лучшее 👍 в youtube русскоязычное объяснение механизма React Reconciliation

[@it-sin9k]

Спасибо!

[@aleksandryudaiev9673]

Епта это вообще лучшее объяснения как работает virtual DOM под капотом. Thanks

[@it-sin9k]

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

[@krollsiphone]

Случайно наткнулся на этот канал (рекомендации) и офигел. Господа (вы же там не один?), это просто... классно! Теперь задача - пересмотреть все...

[@it-sin9k]

Добро пожаловать!) нас 2-ое) программист и видео инженер) Мы будем благодарны, если о нас еще и коллегам расскажете)

[@Ramosok]

Классно что я нашёл этот канал! просто супер!

[@it-sin9k]

Согласен) Классно, что вы нашли этот канал))

[@raufhashimov241]

Увидел пост в хабре, посмотрел видос, лайкнул и подписался красава .Контент годный советую

[@it-sin9k]

Спасибо! Будем рады, если поделитесь с коллегами)

[@alexsarny]

Невероятно качественный контент. Спасибо!

[@it-sin9k]

Спасибо! мы очень стараемся)

[@БатырбекАйгалиев]

Спасибо за видео! Объяснили всё понятно и доступно. Жду новых выпусков работы!)

[@it-sin9k]

Интересно собрать фидбек, какой тип выпуском наиболее интересен: это практические с react-router или может социальные проблемы как то глубже каким то исследованиям уделять или именно хочется понять как реакт работает глубже?

[@БатырбекАйгалиев]

@@it-sin9k Лично мне больше нравятся видео типа этого, потому что я пока не встречал в русском сегменте объяснения reconciliation, да и мало кто об этом рассказывает.

[@it-sin9k]

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

[@PashaRomanovich]

Отличный ролик! И графические примеры очень классные! Спасибо!

[@it-sin9k]

Спасибо!

[@irinal7766]

Потрясающе! Просто потрясающе!

[@it-sin9k]

Спасибо!

[@romanchebotaev_frontendblog]

Спасибо! Очень глубокое исследование темы)

[@daniyarzhanakhmetov7741]

Вы лучшие!

[@РусланКононов-ч9я]

Храни тебя господь

[@it-sin9k]

Аминь!

[@antontyronchik496]

Оч круто, нужно еще подробностей по подкапотке реакта

[@it-sin9k]

Заказ принят! Заказ выполнен! Целый плейлист про подкапотку реакта: kzbin.info/aero/PLz_dGYmQRrr-g02jHDzuu-6VlOt8-8Uu5

[@kirillcherkalov]

поделился плейлистом с коллегами по работе. реально хороший у вас контент по работе реакта

[@it-sin9k]

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

[@someChicoRy]

спасибо, было интересно и полезно. Не понятно, почему так мало подписчиков.

[@it-sin9k]

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

[@someChicoRy]

@@it-sin9k как только они появятся, то обязательно. Так скажем от отца к сыну)))

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

Это поям хорошо, лойс и заслуженный комментарий!

[@srt2046]

Ну, что сказать? Это очень круто! Лайк и комментарий!

[@drunk_craft]

Чувак, почему? Почему я не видел тебя раньше) сегодня в офисе коллега посоветовал твой канал сказав что ты «до безобразия любопытный». Мне это очень близко) продолжай в том же духе. Подписка, лайк, колокольчик и репост)

[@it-sin9k]

Ого!) Добро пожаловать на борт, будем вместе синячить))

[@drunk_craft]

@@it-sin9k крутяк) давай синячить вместе))

[@NORTHSTAR103]

Спасибо, все кратко и по делу !

[@fl1pp1x]

Geniously (react, react-reconciliation, react details, react-fiber)

[@СтаниславЗдановский]

Отлично все рассказываешь! Молодец! Продолжай еще!))

[@it-sin9k]

Спасибо!) будем стараться и дальше Вас радовать)

[@aleksandrzelenskiy4000]

Очень ясно. react, react-reconciliation, react details, react-fiber

[@ВероникаТен-ф3л]

Благодарю за видео!!!

[@it-sin9k]

Спасибо!!!

[@АндрейЛенков-м3е]

Очень крутые видео делаешь, спасибо, что делишься знаниями и своими исследованиями. Успехов

[@ИванБорисов-б1ж]

Топ контент!!! Давай ещё видео по теме react под капотом

[@it-sin9k]

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

[@Ramosok]

каждый раз перед собесами просматриваю большенство твоих роликов, очень классные выжимки без воды.

[@it-sin9k]

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

[@ОлегПетров-п4у]

Очень полезный контент! Спасибо! (React Reconciliation)

[@it-sin9k]

Посмотрите и другие видео на тему React, там много полезного)

[@Сергей-е4г5п]

Хорошее объяснение! Спасибо!

[@АнастасияШелухина-з7е]

отличный контент) браво!

[@Quentinrei]

топовый ролик !!!

[@mikhailstepanischev8316]

супер,спс ! React Reconciliation

[@igormalykhin5528]

Автору большая благодарность за материал и экпертизу. Очень помогаете учиться

[@spktv7260]

well yeah if you wanna do it primarily

[@АлексейЛоскутников-ю4р]

Интересное видео! Спасибо.

[@multtanker6365]

Htmlacademy даже в доп материалах на курсе по реакту указывает ссыль на твое видео по этой теме))

[@it-sin9k]

Ого) ничего себе) вот это неожиданно)

[@NoName-zh7cc]

Огонь!

[@mokkamokka4097]

ты лучший!

[@it-sin9k]

Спасибо!

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

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

[@ahmedmoka4702]

nice functional good working easy install thanks

[@romangoncharuk4455]

вдохновляет

[@MrKontsevoy]

Пожалуйста, запишите новый ролик о Fiber

[@it-sin9k]

А что хотелось бы увидеть в этом видео?

[@MrKontsevoy]

@@it-sin9k В какой момент и как именно строятся fiber-объекты, что именно происходит когда работа прерывается и в этот момент приходят новые изменения взамен старых (сверка начинается заново или продолжается с момента остановки). Когда нужно учитывать знания о fiber, как можно их применить (т.е. показать на живых примерах, как работало раньше и что улучшилось сейчас).

[@xice111]

Чел это топ

[@it-sin9k]

Все для вас) можете еще с коллегами поделиться)

[@arswarog]

круто!

[@underpog5347]

а как 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 "?

[@it-sin9k]

Когда вы обновили state в вашем компоненте, То React помещает fiber ноду, которую надо обновить. Я тот механизм не изучал особо, но думаю это работа с Lines, у них часто мелькает такой код, думаю они чуть ли не в массив собираю ноды которые надо обновить и обновляют их.

[@underpog5347]

ясно, спасибо за качественный контент

[@379sanek]

спасибо!!

[@ivan_kobzar]

Топ!

[@aliaksandrklimianok7156]

Great job!

[@it-sin9k]

Thank you!)

[@ineptDev]

Привет, Синяк! Я заметил что ты поздоровался) 3 раза заметил, гыыыы

[@it-sin9k]

Привет) будет 4-ый раз)

[@enjoymtx]

Подскажите, правильно ли в нынешних реалиях будет работать в основном с Redux, а не хуками? Я уже не совсем новичок и мне показался Redux более приятным и понятным..

[@enjoymtx]

И конечно же снова спасибо за новое видео!

[@it-sin9k]

Тут надо сразу понять что вы подразумеваете под хуками. Потому что Redux предоставляет свое API так же и через хуки. Поэтому по факту можно использовать хуки и redux одновременно. Если же речь идет о написании полностью проекта с использовать useReducer и useContext, то вероятно я бы не рекомендовал вам этого делать. Это достаточно экспериментальный путь, без особого опыта таким заниматься не рекоммендую, да и пользу явную это не принесет. Поэтому используйте Redux и не переживайте)

[@enjoymtx]

@@it-sin9k да, я про useReducer и useContext, спасибо большое за содержательный ответ!

[@НикитаГончаров-е8ш]

Топ🔥🔥🔥 Актуальна ли эта информация для функциональных компонентов?

[@it-sin9k]

Да, очень даже актуальна :)

[@НикитаГончаров-е8ш]

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

[@it-sin9k]

@@НикитаГончаров-е8ш Доверяй но проверяй!)

[@ДмитрийКлимов-й2щ]

Привет! Ты сам рисуешь/анимируешь сюжеты?

[@it-sin9k]

Привет! Я составляю контент и записываю аудио, а второй человек по тз все это визуализирует.

[@JestNest-b8v]

@АйТиСиняк, обнови плиз ссылки на priorities list

[@crocus161]

А как насчет 120 фпс на новых 120 герцовых экранах? Интересно, будет ли когда-то доработка этого момента. Спасибо за такой качественный контент

[@it-sin9k]

думаю не в ближайшее время) это все же сайт, и сайтам не нужно чаще всего такая детализация) хотя будущее не за горами и возможно все)

[@AMORPHOFUL]

Привет что имеется введу под допущением? Какие-то trade-offs для того, что бы покрыть более критичные сценарии? не совсем понял суть слова 'допущение'

[@it-sin9k]

допущения, это допустим. У тебя приходят в функцию цифры. И ты говоришь допустим они будут целые и положительные. Таким образом тебе не надо больше добавлять проверки, на то что число отрицательно и не целое. И ты на этом экономишь ресурсы. Так и реакт сделал свои допущения, чтобы делать меньше проверок и сэкономить на этом вычислительные ресурсы

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

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

[@it-sin9k]

Честно говоря я пока точно не отвечу, я недавно наткнулся на материал от Дена Абрамова, по поводу фаз, их там вроде даже 3 фразы, но я могу путать. Поэтому возможно соберусь с духом доизучаю и сделаю отдельный выпуск про это :)

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

@@it-sin9k Ну третья precommit фаза. Вопрос про commit, я узнал ответ - реализация и в react core и в реакт дом.

[@ineptDev]

"Фаза commit это отправка изменений в render environment" Думаю что это, делая вывод из сказанного в видео что фазы разделены.

[@vladimirpolyakov4382]

Агонь!!!!!!

[@КириллАкутин-п3д]

Жду этих вопросов на следующем собесе

[@it-sin9k]

я минимально по этой теме спрашиваю) скорее ковырну в курсе человек или нет) если нет ничего страшного)

[@КириллАкутин-п3д]

@@it-sin9k На одном из собесов, дали тестовое задание, реализовать свой алгоритм VirtualDom. Позиция была что-то между strong junior и middle. Поэтому удивляться уже не приходится никаким вопросам)

[@it-sin9k]

какие-то изуверы, занимаются всякой дичью)

[@ДмитрийГлазков-ф2ю]

ссылки на github к сожалению устарели

[@AndreyEricksonGame]

Интересно, а Реакт приоритезирует DOM-операции в зависимости от сложности выполнения операции, то есть, если DOM-операция в виде анимации требует больше времени, то она будет идти первой или это не обязательно? Просто по каким критериям Реакт ставит те или иные задачи на первое место ?

[@it-sin9k]

я честно скажу, что с этой темой мало работал, но из того что я видел, у них описаны через назовем его "enum", где каждая операция соответствует одной из опций enum

[@AndreyEricksonGame]

@@it-sin9k спасибо большое, за ответ). Ну а если строить догадки, то, как я понимаю, Реакт не обязательно делает приоритизацию задач по времени их выполнения. Т.к. анимация ховера может по времени выполняться, грубо говоря, за 20мс, а получение данных и их отображение может занять 50 мс, но Реакт поставит анимацию на первое место, как показано в вашем видео) Могу ошибаться, конечно

[@it-sin9k]

сложно что-то прогнозировать без знания кода. Но тут точно надо учитывать event loop, считать тики процессора и переключаться между задачами

[@alexup7437]

Почему консоль логи в ребенках отрисовываются первее, чем в родителе? Все обернуто в мемо и есть юзЕффекты

[@it-sin9k]

я уже не помню, где там точно console.log стоит. Сбросьте временную метку или опишите ситуацию :)

[@alexup7437]

@@it-sin9k Это не в Вашем ролике. У меня всегда было представление, что рендер идет сверху вниз и юзеффекты так же должны отрабатывать. Но если создать пустой проект, сделать родителя и ребенка, то в ребенке юзеффект отработает первым. Почему?

[@it-sin9k]

я частенько этот вопрос задаю на собеседованиях) суть следующая. Допустим есть компонент parent и child. вызываться будет следующим образом return (parent) -> return (child) -> useEffect(child) -> useEffect(parent) 1. Логика достаточно простая. Сначала вам надо начать рендерить родитель, чтобы узнать, а какие дети есть. Поэтому вызывается return (parent), там он узнает о детях и идет их вызывать return (child) 2. С другой стороны useEffect вызывается только после того как текущий компонент закончил полностью рендер. А может ли компонент parent закончить полностью рендер, если child еще не закончил. Поэтому useEffect(parent) вызывается только после того как все дети закончат рендеры

[@alexup7437]

@@it-sin9k Спасибо! Просто сильно заафектился на этом, когда у меня в компоненте и в юзеффекте получились разные состояние поля в стейте. Начал копать, но ничего умного не нашел.

[@it-sin9k]

не за что :)

[@maxovsanyuk1033]

👍💪

[@Алексей-т2х8й]

+

[@balabuyew]

Алгоритм не описан..

[@it-sin9k]

чего вам не хватило, чтобы сказать, что алгоритм описан?

[@balabuyew]

@@it-sin9kВ каком порядке обходятся ноды-чилдрены одного парента? И, особенно, как этот порядок обхода совмещается с тем фактом, что некоторые ноды имеют ключ?

[@it-sin9k]

@@balabuyew Это уже скорее про детали имплементации. Можно было бы с таким же успехом еще ожидать подробного рассказать о разных фазах рендеринга. Это тоже ключевая фича. Разбор как разные типы компонентов по разному обрабатываются. И все это за 10 минут. Как то это не очень реалистично звучит

[@balabuyew]

@@it-sin9kЭто не детали имплеметнации. Если, например, у меня есть десять чилдренов в одном каком-то паренте, пять из них имеют ключи, а остальные пять - не имеют, да еще и в новом состоянии чилдрены с ключами были передвинуты на другие места, я хочу знать какие именно чилдрены будут обновлены, а какие пересозданы заново. В документации, которую вы все дружно пересказываете, об этом не написано.

[@it-sin9k]

@@balabuyew Про это есть отдельное видео kzbin.info/www/bejne/haWknYOtjJ13hLc . Да и про ключи упоминалось даже в этом видео, что это и зачем это)

[@lesters]

спасибо, а то все рассказывают и показывают уже как делать на живом проекте или с 0 не обьясняя главных понятий работы реакта в целом

[@it-sin9k]

Добро пожаловать на канал! Тут много видео про то как реакт работает из нутри)