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

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

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

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

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

@it-sin9k

3 жыл бұрын

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

@fl1pp1x

3 жыл бұрын

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

@user-fu7gm5fx5g

Жыл бұрын

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

@it-sin9k

Жыл бұрын

@@user-fu7gm5fx5g ахахах) в таком случае точно нельзя бросать) завтра кстати новое видео выйдет)

@user-fu7gm5fx5g

Жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

@it-sin9k

3 жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

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

🔥 спасибо!

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

@abbze8272

11 ай бұрын

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

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

@it-sin9k

10 ай бұрын

Спасибо!

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

@it-sin9k

3 жыл бұрын

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

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

Спасибо!

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

@it-sin9k

3 жыл бұрын

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

@kolyabokov88

3 жыл бұрын

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

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

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

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

@it-sin9k

Жыл бұрын

Спасибо!

Спасибо 🔥

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

@it-sin9k

3 жыл бұрын

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

@spoonjeee4785

3 жыл бұрын

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

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

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

@it-sin9k

3 жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

Спасибо!

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

@it-sin9k

2 жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

Спасибо!)

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

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

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

@it-sin9k

3 жыл бұрын

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

Спасибо большое за доклад! Лучшее, что я нашел про 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

2 жыл бұрын

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

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

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

@it-sin9k

3 жыл бұрын

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

@fedyasick5177

3 жыл бұрын

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

@user-sr5ts2jz7e

2 жыл бұрын

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

@tyt-no-udee-nick

2 жыл бұрын

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

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

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

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

@it-sin9k

Жыл бұрын

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

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

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

@artemy5594

2 жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

Спасибо!

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

@it-sin9k

Жыл бұрын

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

@user-sg3dw8hq6o

Жыл бұрын

@@it-sin9k thank you)

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

@it-sin9k

5 ай бұрын

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

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

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

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

@it-sin9k

Жыл бұрын

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

@vladvoloshenko5701

Жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

спасибо!)

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

3 жыл бұрын

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

@nikolaytydir2203

3 жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

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

@it-sin9k

11 ай бұрын

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

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

@it-sin9k

7 ай бұрын

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

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

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

@it-sin9k

Жыл бұрын

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

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

@it-sin9k

2 жыл бұрын

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

@paljm345

2 жыл бұрын

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

@it-sin9k

2 жыл бұрын

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

@paljm345

2 жыл бұрын

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

@it-sin9k

2 жыл бұрын

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

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

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

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

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

@it-sin9k

11 ай бұрын

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

@abbze8272

11 ай бұрын

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

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

@it-sin9k

2 жыл бұрын

По этому поводу, я как то прочел интересную цитату: "Профессор Чопин убеждён, что для передачи информации нет смысла идти выше 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