Итак дорогие друзья Всем привет Сегодня у нас будет очередное видео в рубрике собеседований в гостях у нас Сергей Привет Серёга Расскажи немножко о себе Привет разработчик опыта вот шум реакцию три года коммерческого опыта по уровню плюс минус это Middle плюс примерно Окей хорошо Может подробнее рассказать про текущее место работы потом вообще делаете Что за продукт Что за обязанность у тебя раньше я до этого работала компания вот сейчас это вместе и сейчас [музыка] админку так скажем мы сейчас разбираюсь
00:00:00 - 00:01:41
А до этого писал или нет Да у меня три года опыта именно по реакту вот этому на баке тоже немного писал Но преимущественно реакция Ну ладно давай тогда наверное есть недавно на новую работу пришел я не затрагивать А можешь подробнее про предыдущий тогда можно сказать что там за проект был и какие роли там выполнял Вообще разные проекты были там были проекты интернет-магазин разные все чатике были чем можно можно больше рассказать трех четырех четырех сервисов [музыка] понял Понял хорошо а вот смотри по
00:01:01 - 00:02:26
поводу админок они вас тоже на Next делались админки нет на реальное списались Я просто Почему спросил то что про последнюю как раз работать пришел то что как раз админка там тоже проспект который используется там тоже [музыка] А понял хорошо а в качестве стоит менеджера что-нибудь используете либо что в качестве используются [музыка] То есть генерис через лагерь берется через автоматически в автоматическом режиме генерис все API три этапе эти функции и не автоматически и автоматически получается у нас есть
00:02:19 - 00:04:04
ручка которую мы можем встречаться и сбрасывать данные А у вас получается да и не используется на одном проекте чтобы писать автоматически нет тегов с этим проблемы не отвечает они пишут теги и отключает чтобы разложении не было поэтому это не важно критично А вот я просто среда прям так говорится не помню А там получается нельзя сделать так чтобы при разложении у тебя конечно сбрасывался вообще можно сбрасывать можно там я особо не вникал не рассказывали что просто мне отключает Но не все равно типа при
00:03:26 - 00:05:21
повторный сброс немного странно работать полностью не отключается то есть два раза просто не отправиться хотя бы отключили я понял странно ладно здесь надо на примере смотреть подробно не смотрел что это не мой проект был мне команду показывал скорость побежал я понял окей хорошо Так давай тогда наверно попробовал уже конкретно каким-то задачам перейти смотри Давай на нас такой самый первый базовый начнем получается Давай представим что нас есть затем У нас есть будет ссылок получается один соответственно такой что
00:04:50 - 00:06:19
ему будет поймал 2 и допустим здесь у нас сгнились какой-нибудь resolve promis P равняется и соответственно сделаем вот так вот Сэн onlog ромиз ромес 1 да значит здесь пробел убрать Питер не работает Вот видите разработал Давай представим что если я возьму и вызвать функцию в каком порядке в консоль вызвать вы видите можешь рассказать далее [музыка] [музыка] Ага Правильно Да давай затестим и Да все правильно Окей хорошо а вот смотри закон грязь рекой А вот такой вопрос интересный если например старик вас снимает фрейм
00:05:51 - 00:07:40
ставить Как думаешь какой порядок будет но это опять же на смекалка такой вопрос первый Да все правильно вот смотри Такой [музыка] Странности правильно вот смотри а получается все сам когда выполняется [музыка] при обновлении это получается в браузер браузер есть ты про там layout [музыка] Композит Ну да да по сути же он до них выполняется правильно [музыка] и хорошо можете подробнее пройти Композит компоновка расположение [музыка] и такие свойствам играл какой-нибудь далее происходит у нас Композит То есть
00:07:22 - 00:09:23
у нас на отрисовка используя видеокарту это происходит на владельном потоке и не влияет на мой интернет Да все правильно супер хорошо так получается касательно следующего вопроса такой раз в эту сторону Пошли по этим темам получается Например [музыка] так вот допустим у нас еще одна функция есть назовем представим что создаем получается вот такой вот элемент Хотя нет Давай скажем что мы берем [музыка] селектор вызывается селектор будет Давай просто обратить внимание представим что у нас здесь дальше что мы например делаем с этим
00:09:48 - 00:11:24
пивом если мы его добавим [музыка] Давай скажем так айт потом что там не знаю 1 секунда из допустим скажем Да затем стал должно быть соответственно потом получается у нас будет и вставил равняется все будет здесь у нас будет 0 пикселей затем мы сделаем вот здесь вот 500 пикселей вот так вот у нас анимация сработает или нет [музыка] [музыка] если мы как разными макротарском макротасками поставили Все сработало хорошо Не на самом деле Да правильно То есть получается Если мы так все пишем то у нас по сути это все объединения в
00:10:53 - 00:12:40
запасе да то есть одной пачки применяется стиль Например если у меня или например Ну смотри смотри получается когда мы поменяем свойства потом цвет то только происходит да я помню ты получается считаешься сказать про то что типа браузер как раз старается вот эти вот операции оптимизировать Да и соответственно если ничего себе ну как бы никакие свойства которые могут повлиять на Flow не обновились там не будет производить например поменялся только Color То есть он будет только Paint и Композит производить правильно
00:12:23 - 00:13:38
Окей хорошо Ну да и здесь на самом деле то же самое правильно сказал то что происходит получается у нас соответственно все это синхронно происходит в глазах браузера нет такого что состав произошло изменение 500 почему то что у нас это все происходит Мы трейде соответственно браузер не успеваю читать поменялись или что Я поменялся хайп на 100 не успевает элемент перечислить Ну как бы перевести в от устой соответственно да да и соответственно никакого транзишна у нас не будет окей хорошо вот смотри как
00:13:34 - 00:14:30
Каким образом давая скажу так здесь будет правильно допустим вот мы хотим вот так вот сами руками контролировать анимацию Да и каким образом здесь вот правильно будет отложить так скажем обновление вот это вот хайта то есть на какой момент мы должны откладывать Каким образом Вот как можно здесь код допустим поменять чтобы у нас все сработало и как будет какой какой из этих из возможных методов будет сам правильно как раз таки миллисекунд который пришло предыдущего Рафа и все Ну давай представим что на таких стоит
00:14:03 - 00:15:08
100 Ладно давай представим что она и так 100s Ну хотя не залата Давай представим что 0 там стоит мы ставим 100 и 100 потом 500 вот анимации тоже нету то есть мы так по сути все поставим и пахает Стоп это хайп 500 по идее ничего Не сработает Вот соответственно Как можно просто сделать ты мало такой Стив равно пикселей и так должно сработать получается с нулем А вот смотри Помнишь мы с тобой как раз таки обсуждали касательно с таймаута То есть он по сути иногда может произойти раньше правильно получается может произойти
00:14:57 - 00:16:10
[музыка] [музыка] чтобы как раз не было того что мы ошиблись у нас здесь будет селектор Соответственно что у нас здесь будет асдф так соответственно надо ему какой-то background Color Style background здесь у нас скажем будет Black и Давай сделаем так вот наверное пикселей так он появится или нет по моему не появится сейчас X [музыка] получается Вот мы сейчас вызываем функцию правильно у нас идет 500 миллисекунд Давай скажем так сейчас давай вызываем что у нас было могли обновлять страницу соответственно ты говоришь вот эту часть
00:15:52 - 00:17:33
просто обернуть правильно [музыка] Окей хорошо так тоже сработало так вообще на самом деле вот этот момент интересный потому что она срабатывает всегда я-то Я тоже помню что ну зачем сейчас такое как раз таки этот как интересный момент появился потому что по идее по идее если у нас например мы трейде ничего нету Правильно мы идем сразу же в этот как его то есть Мы выполняем различные синхронные таски допустим синхронных таски нету выполняем сейчас майкрососу вот и Micro taska как раз таки она может произойти и до того
00:17:13 - 00:18:20
как у нас придет вот на самом деле интересный тайм-аут тоже помню что есть решение Ну как оно типа вроде бы знаешь обычно такая не работает берешь оборачивается с этим связанное вот на самом деле здесь интересный вопрос просто появился например с тем же рекой фреймом то зачастую как бы тебя Ну если просто знаешь друг за другом написать чаще всего с этой могут быть первым воспроизводить Вот и по сути получается раз это воспроизводится первым то здесь получается выполняется быстрее чем Ну обычно обычно Ну давай проверим Может
00:18:11 - 00:19:19
я сейчас вообще просто запамятовал смотри то есть Давай скажем здесь еще одну функцию создадим тест получается Рафа не используется использует обычные без transition то есть вручную свою анимацию делаешь сложных анимаций для таймеров пользуется А как раз таки анимации без использования хорошо обновляем [музыка] и тогда значит ладно окей [музыка] их вызываем Ну да нет я просто к чему говорю Смотри этот как я почему я здесь такой вопрос появился потому что возможно я что-то не понимаю в комментариях нас поправят А смотри
00:18:51 - 00:20:24
Получается же история такая сейчас так это надо скаметить так получается же история такая чтобы ей у тебя рекой занимаешься фрейм должен вызываться каждый раз Ну то есть при обновлении правильно то есть раз допустим 16 секунд называется Вот соответственно с этой моут он может намного больше вызваться ну то есть за эти 16 секунд по идее макро ТАСС много может произойти ну и соответственно микро ТАСС Ну то есть много 10 может произойти но тут интересный кейс на самом деле получается потому что я о нем не задумывался вот мы
00:20:02 - 00:21:01
как раз когда начали делать У меня такое мнение появилось по идее Да они типа все эти которые ставишь они в один момент Они последовательно воспроизведутся Ну то есть соответственно вложены на следующий оставаться но тут на самом деле интересный момент Почему Потому что по идее по идее за один как бы Раф у тебя несколько макро ТАСС может произойти ладно окей забейтесь Ну по сути То есть у тебя есть вот этот промежуток времени за это промежуток времени очень много действий может произойти различные микро тоски могут
00:20:31 - 00:21:28
быть а может там синхронном что-то произойти могут макротаскиваться Ну окей ладно это надо будет потестить вот сторону пойдет но вообще интересная говорю вот в комментариях Если кто-то знает пишите обязательно потому что потому что нас получается вот так на самом деле обычно как делают обычно как делают просто оборачивают ну то есть например это Не сработает с одним приходится работу интересно но по сути получается смотри теперь обычно оборачивают фрейма и смысл получается в чем то есть подожди у нас здесь так
00:21:08 - 00:22:22
сказать это интересно если брать мин хайп подожди мне кажется немножко не туда ставил пиксели у нас Хай то нету Значит если мы делаем так вот нас так тоже работает Так у нас получается Он прыгать вначале Давно ли потом туда переходит Ну ладно окей Блин вообще на самом деле Странная история у так если сделать давай Ну да ладно короче Окей тогда получается так он 500 пойдет с таймаута тоже сработает у нас Окей он идет вновь окей Просто А например обычно то есть библиотеках транзишна вот в том же этот в том
00:21:44 - 00:23:08
транзишен есть реактор различных друга кстати не помню как там сделано как раз использовать два request Animation фрейма вложенных 2 а и соответственно получается прикол в чем если у тебя рекой занимаешься фрейм до получается рифлоури пенет и все вот это вызывается то соответственно как бы ну получается у тебя здесь Хайд 0 и ты здесь сразу же хайп 500 выставляешь понимаешь получается история такая же как ты вот ну синхронно все с нуля на 500 поставил то есть когда дело доходит именно до обработки браузера Ну
00:22:42 - 00:23:37
обработки и когда дело доходит то обработки стилей браузером у тебя по сути получается что у тебя Хайд уже 500 стоит вот и опять по сути никакого транзишно не происходит Ну и получается Если сделать твари пентам Ну как бы еще перед текущим да А следующий перед уже следующем произойдет уже как будто на следующий цикл попадаешь вообще по-моему кстати говоря сейчас Давай последний раз за тестим по-моему вот так вот все-таки делаете так хопа Да именно этот транзишен по-моему выставляется как раз вот так
00:23:12 - 00:24:08
вот в этом во вьющим транзистом понятием Круга я не помню я просто давно не смотрел но давай вот так быстренько для интереса [музыка] опа так тоже работает Ладно короче я сам ничего не надо быть посмотреть какие все погнали дальше так дорогие друзья для тех кто также как я очень сильно удивлен теми результатами которые Вы только что увидели касательно анимации то что у нас анимация работает и по рекосниматель фрейму и после тайм-ауту Я рад сообщить вам о том что это как раз таки проблема скотцен боксом
00:23:43 - 00:24:50
А я на самом деле здесь потратил уже около 4 часов после того как у нас закончилась наш собеседование Ну понятно дело что отдыхал там решалки другие дела Но тем не менее во время собеседования и все это время меня вообще не отпускала Мысль о том почему нас так сработало Потому что я в этой теме был прям так довольно уверен и конечно же результат мне очень сильно шокировали но как раз таки я во всем разобрался и как раз хочу сейчас поделиться всеми результатами всем тем что я нарыл собственно тех кому
00:24:27 - 00:25:19
это не интересно тогда переходить дальше собеседованию внизу будут тайм-коды Там можно все перемотать так вот прежде чем рассказывать вообще о том что у нас проблемы скотцен боксом Давайте сначала попробуем в целом разобраться что у нас ситуация с браузером Как работает тайм-аут и так далее как у нас все происходит анимации в первую очередь рекой с Imagine Frame ISO тайм-аут мы Сергеем обсуждали во время собеседования то у нас нет Четкого порядка что вызывается первым давайте это все проверим на реальном примере увидим я
00:24:53 - 00:25:47
обновлять страницу У нас здесь если вы не успели посмотреть есть просто Бади в базе У нас есть скрипт и вызывается там уже рекоснимаешь из этой мод соответственно сначала вызывать потом тайм-аут однако я обновляю как мы видим у нас все прыгает вначале у нас поймал от которого Иногда у нас сначала одну выскакивает первым иногда другое тоже самое на самом деле происходит если взять и вызвать все руками консоли например беру вызываю Давайте вызовем очень очень много раз и посмотрим что у нас получилось здесь на
00:25:20 - 00:26:15
самом деле в консоли такой кейс отловить сложнее но как мы видим у нас 12 вызов сначала Раф потом тайм-аут а все-таки остальные вызывает тайма утра Ну и в целом сверху все тоже самое У нас нет Четкого порядка вызова как раз таки легко снимаешь фрейма либо же с таймаута Давайте попробуем разобраться почему так происходит в первую очередь Когда у нас вызывается фрейм вызывается раз 60 миллисекунд Ну соответственно зависимости от как раз таки самого нашего компьютера в зависимости от того обновлений
00:25:48 - 00:26:45
соответственно зачастую как раз 60 FPS поэтому у нас раз 60 миллисекунд вызывается и Квест точнее 60 секунд То есть 16 секунд У нас вызывает рекость Animation Frame и соответственно как раз когда он вызывается он вызывается Когда уже браузер понимает что ему нужно обновить экран сначала вызывать фрейм затем у нас вызывается уже получается рефлоуи Paint и затем уже вызывать композицию во время рефло у нас пересчитывается позиции во время repaint у нас Перечисли То есть как раз таки все цвета и так далее во время
00:26:16 - 00:27:10
композита у нас все уже как раз таки рисуется так вот получается какая у нас ситуация То есть у нас получается такая ситуация что иногда с этой мод может вызываться до рекоиться фрейма А и надо после Давайте попробуем разобраться в каких случаях он будет вызываться до приходится время когда будет вызываться после первую очередь сразу скажу что request Animation Frame о приоритетам намного выше чем с тайм-аут не намного просто короче выше чем тайм-аут соответственно получается Если у браузер есть выбор выполнять рекой выполнять он
00:26:43 - 00:27:42
будет выполнять рекой Однако Проблема в том что рекость Animation Frame ему постоянно выполнять не надо ему нужно выполнять перед тем как пришло время обновлять экран соответственно если сейчас уже мы вызываем как раз таки сейчас как раз таки у браузера время когда им нужно все пересчитать Если же сейчас как раз таки нету нужды в том чтобы обновлять экран сначала вызвать для того чтобы браузер просто не просиживал и ничего не делал когда у него есть какие-то задачи и так давайте Теперь попробуем на конкретных при
00:27:13 - 00:28:09
посмотреть в каких случаях У нас должна работать анимация то есть случаях при обновлении наших стилей у нас триггерится анимация А в каких случаях у нас не три делится анимация собственно Давайте сначала расскажу немножко про теорию то есть анимация у нас триггерится тогда когда браузер уже вычитал определенные стили Допустим мы с этим атом айтом Хайд 0 и с этим уже как раз ему транзишен так вот сначала 10 или так скажем хранятся временем так скажем хранилище правильно назвать но в конце концов браузер уже пересчитывать и
00:27:43 - 00:28:40
применять или во время того когда у него происходит во время всего вот этого вот процесса он уже как раз таки берет ту информацию которую мы поставили ему в атрибуты соответственно он ее вычисляет применяет и тогда В такой момент уже браузер понимает нашего типа высота 0 и у него есть соответственно потом после того как браузер у нас уже применил или мы берем и обновляем наш Хайд соответственно браузер видит у нас стоит у нас есть четкая высота и у нас также есть анимация нашего заниматься нашей высоты
00:28:12 - 00:29:12
соответственно меня и он понимает что не нужно ему обновлять сразу моментально а нужно ее красивенько показать на основе нашей функции это у нас был из обычной и соответственно основе нашего времени это у нас было как раз я одна секунда Вот получается чистость теоретически точки зрения у нас анимация должна происходить только тогда когда у нас браузер уже посчитал применил все эти стили и соответственно потом уже происходит изменение Хорошо давайте посмотрим теперь на конкретных примерах У нас есть
00:28:42 - 00:29:36
несколько функций У нас есть функция не Mate Что она делает Хайд 0 затем обновляет транзишен и сразу же обновляет наш сайт в таком случае у нас по сути высота идет со 100 до 500 у нас таком случае высота сначала встретиться в ноль потом встретиться 500 так как у нас все происходит синхронно по у нас как раз таки никакой здесь анимации не будет браузер все это вас примет Как одну операцию то есть мы как будто просто добавили transition и добавили Хай то есть придет патчинг Почему Потому что у нас все это происходит синхронно до того
00:29:09 - 00:30:06
как у нас произошел рефловый репейт соответственно эти или никак не применяются как раз и к нашему Хорошо Давайте теперь посмотрим на функцию animateraw в таком случае вот именно с такой функции у нас также не должна работать анимация если забыл вам показать здесь обычный как и в нашем примере айди тест и background Color Black внутри есть текст для того чтобы не изначально была какая-то высота а соответственно получается что мы делаем вынимать трав понимать травмы также выставляем хате транзишен и затем уже
00:29:38 - 00:30:31
приходит Animation Frame обновляем наш Хайд то есть может показаться здесь у нас есть асинхронная операция синхронно не делаем поэтому батчинга у нас не должно быть однако батчинг все равно происходит Почему Потому что фрейм у нас во всех браузерах кроме Сафари вызывается до того как у нас происходит до того как у нас браузер уже перечитывает и применяет все эти стили у нас как раз таки происходит до этого момента рекой Поэтому в глазах браузере это все выглядит точно так же как его тут как будто бы у нас садится ставил
00:30:04 - 00:31:01
transition на Hight и соответственно как будто бы у нас уже светится 5 500 различных просто здесь каратил себе работу написал немножко по-другому все в таком случае также у нас анимация не должна работать тоже У нас происходит снасти далеко и сами нас есть два вложенных рекость Animation фрейма в таком случае у нас всегда анимация должна работать Почему Потому что мы сначала выставляем хате transition потом что происходит у нас вызывается первый рекой занимаем он вызывает у нас происходит внутри этого
00:30:32 - 00:31:28
рекой с Animation фрейма мы с этим еще один рекоснимаешь фрейм и год рекурсивный рекой будет Как раз таки засечено чем будет вызван не в текущем так скажем не в текущем потоке не перед текущим обновлением экрана а перед следующим обновлением экрана соответственно все текущие стили которые мы применили Хайд и transition они будут применены в текущем при слове репейте и затем уже в следующий раз перед следующим обновлением таком случае у нас все будет работать и как раз таки поэтому я говорил что все
00:31:03 - 00:31:57
библиотеки обычно обновляются Или через два рекоснимаешь фрейма хорошо что же у нас происходит тайм-аутом как мы с вами могли разобраться у нас как раз таки здесь они все однозначно у нас не надо может вызываться фрима отвесно если наш тайм-аут вызывается до рекой с Animation Frame тогда наша анимация Не сработает если он вызывается после Значит мы уже вызовется после того как произошел риковый ставил то есть после того как произошло reflow repaint и соответственно обновление экрана соответственно в таком случае наш
00:31:30 - 00:32:27
анимация должна сработать Окей хорошо После того как мы разобрались со всей теории Давайте посмотрим как это все работает на практике Итак Друзья вот мы смотрим на тот код который мы только что видели вес коде только уже мы смотрим на него вклад боксе как мы видим здесь у нас есть div с background Black соответственно 4 различных алгоритма обновления и Давайте попробуем конкретно на примере посмотреть как это все работает первую очередь давать вызов не Mate получается Animate Thing что у нас будет Как видим у нас никакой анимация
00:32:00 - 00:32:57
не происходит можем вызвать еще раз анимации никакой нету Хорошо Давайте теперь вызовем аниме и трав мы вызываем аниме трав и мы видим что у нас происходит у нас работает анимация Хотя не должна работать Ну ладно давайте дадим Может здесь конь шанс можно искать погрешность нет Все равно Все работает хорошо давайте теперь перейдем в Animate на сидеров внимательно если трав понятно дело всегда должен работать и так и что в целом логично поэтому здесь перепроверять ничего не буду и Давайте посмотрим на анимеш аниме тайм-аут они
00:32:29 - 00:33:26
мыть тайм-аут Казалось бы он тоже должен иногда воспроизводиться иногда нет то есть в таком случае она должна работать анимация иногда нет у нас работала еще раз давайте еще раз попробуем еще раз Ну ладно на самом деле здесь пробуйте так много раз не стоит я здесь пробовал в начале когда только разбирался своими проблемами около 50 раз это все было бесполезно как бы от того что больше раз вызовите ничего не поменять мы видим если у нас рафам всегда работает то ему тем более будет конечно же работать так вот Давайте
00:32:57 - 00:33:53
Теперь попробуем посмотреть на то как это все на самом деле должно работать если у нас нормально среда запуска они какой-то код сын бокс со своим лишним кодом А вот Давайте просто возьмем наш HTML В отдельной вкладке и посмотрим какие у нас будут результаты Итак друзья Вот мы и находимся в браузере Как раз таки взяли вот этот HTML файл и собственно запустили его тут находимся Мы в обычной среде без всяких боксов и Давайте сначала попробуем по запускать Animation RAW Давайте сначала обновим страницу запускаем анимешнуров как мы
00:33:25 - 00:34:16
видим никакую анимации нету перезагружаем запускаем перезагружаем запускаем перезагружаем запускаем Ну соответственно так можно делать много раз И никакая анимация здесь как раз не должна работать то в целом логично То есть как вы можете видеть код бокс у нас работает не совсем так как нужно Окей давайте теперь протестируем тайм-аут тайм-аут вызываем его нету анимации вызываем нету анимации вызываем нет анимации что-то неудачно попадаем Вот теперь у нас как раз таки сработала анимация Теперь они работают вернее
00:33:51 - 00:34:54
работает Ну как видите у нас как раз уже был один кейс в котором анимация сработала Я просто все подловить не могу удачно Вот Но тем не менее если поиграться на самом деле здесь примерно 50 на 50 происходит все зависит от того какой момент времени вы попадете если у вас тайм-аут произойдет после Рафа тогда соответственно у вас будет анимация если тайм-аут у вас произойдет то Рафа тогда у вас как раз таки анимации не будет Ну и по трафам я подразумеваю рекой animational Frame Хорошо Давайте теперь
00:34:21 - 00:35:13
протестим как раз и два на из трафа то есть два вложенных рекой simation фрейма тут понятно дело что всегда анимация должна происходить она происходит происходит в целом на это смотреть Особо смысла нету и Давайте посмотрим на animationsing то есть они macing мы никому синхронно все обновляем тоже смотреть на что смысла нету у нас будет происходить патчинг никакой анимации не будет в целом боксе Это тоже не работало также одна важная деталь в которой анимация будет работать всегда это как раз таки вызов слова То есть если
00:34:47 - 00:35:45
например сделать проект А в таком случае что произойдет у меня вот здесь произойдет Force reflow то есть браузер заставлю Вычитать как раз и стиле с помощью вызова и от баунинг клайн проекта то есть скажем Да мне как раз и размеры и координаты Вот его поэтому он возьмет пересчитает А все стили пересчитать размеры применить их не применяет а просто все пересчитают у себя собственно запомнит это и как раз таки отдаст мне размеры соответственно в таком случае получается Здесь форс-слова у нас пересчет стилей и здесь сразу же
00:35:17 - 00:36:16
мы синхронно также поменяем стиле и в таком случае у нас по мнению браузера также будет происходить как раз таки по его мнению как раз таки уже будет происходить изменение стилей Поэтому будет все это анимировать как раз и так можно делать но это более трудозатратно по перформансу давайте как раз таки все обновим а здесь мы файл сохранили переходим сюда обновляем нашу страницу и делаем Animation Sync видим у нас анимация всегда срабатывает Несмотря на то что обновляем все мы синхронно так вот это как раз таки и причина по
00:35:46 - 00:36:44
которой в конце боксе У нас есть проблема Давайте посмотрим Именно где все это у нас и происходит Итак друзья думаю так вас довольно таки долго томил всеми ожиданиями и Своими рассказами собственно причина как раз я сама является в том что у нас внутри от Sandbox внутри его своей логике есть как раз такими то есть обзор который следит за тем документом для того чтобы на все это посмотреть Давайте В отдельной вкладке откроем наш Sandbox собственно вот мы его открыли Давайте посмотрим какие Джейс файлы здесь у нас
00:36:15 - 00:37:06
подгружается у нас подгружается эти файлы Давайте поищем соответственно если посмотреть на один скриптов которые подгружается собственно это вот этот скриптейшн зервер это как раз и скрипт который называется d283 собственно подключается у нас вот тут вот а сейчас я увидел а соответственно он подключается как раз таки вот здесь вот это 283 получается Если мы взглянем на его код найдем здесь virtation abserver то мы увидим что у нас как раз таки Сейчас я вам покажу вешается обзор на весь документ То есть как вы видите у
00:36:41 - 00:37:59
нас и Вар и равняется обзоры в И как мы видим получается у нас вешается такой на документ амитрий на обзор следим Мы за всем сап три зачал листом и за атрибутами то есть следится вообще за всем только можно то есть у нас за на весь документ сервер и какой у нас колбэк это и функция что у нас здесь происходит и соответственно замеряется здесь ширина высота документа и ширина высота Бади соответственно у нас каждый раз когда у нас происходит какая-то мутация нашего атрибута у нас как раз таки вызывает вот
00:37:19 - 00:38:19
этот вот метричную сервере для тех кто не знает точно все он более приоритете более приоритет чем какие-нибудь там макросов вызывать внутри Micro Task соответственно когда мы обновляем какой-нибудь атрибут у нас что происходит у нас как раз таки вызывается вот этот код у нас вычисляется ширина высота То есть у нас происходит Force reflow поэтому все эти стили уже сразу же пересчитываются вы можете увидеть из-за как раз таки вот кода Код бокса произошел такой неправильный так скажем результат поэтому здесь я вам не советую
00:37:52 - 00:38:55
какие-то важные вещи тестировать Если хотите что-то протестировать Лучше самому быстренько за это опять проект это будет более надежно для того чтобы какие они тратят 3-4 часа своего выходного дня хорошо Смотря кстати еще один интересный вопрос Вот например если я создам какой-нибудь равняется получается такими элемент здесь и соответственно сделать когда Тиф у нас еще документ возвращается знаешь или нет ну и в целом любые там замеры объект случае если у нас находится то есть Мы создали элемент
00:38:24 - 00:39:34
[музыка] не помню какие-то методы были точно там где-то balding Clean Red Точно он вызывает это событие Все заново генерится то есть начали происходит потом repaint и композиция для анимации плохо меня не реанимации имел ввиду что происходит сразу происходит последний момент допустим у нас есть какой-нибудь элемент Ну тот же Давай скажем так делали селектор Да правильно селектор селектор здесь селектор селектор и получается Здесь мы вызовем николайн трек и получается говоришь Я просто что-то подразумеваешь документа
00:39:14 - 00:40:46
ми в храме в браузере этим методы там например как когда я помню на самом начале говорил свет или там грамм то меняется только replay происходит А если мы вызываем этот метод то он происходит самого начала происходит это все правильно что ты меняешь Ну то есть ты говоришь что когда мы вызываем паутинг лайн трек у нас по сути синхронно вызовет все эти стадии да то есть а получается вот например у нас вызовется синхронно там только reflow либо же ещё репенди Композит также синхронно вызывается [музыка]
00:40:19 - 00:41:46
Смотри Вот у нас допустим есть какой-нибудь кусок кода где мы синхронно вызываем проект допустим у нас поменялись или то есть мы поменяли там какой-нибудь высоту чего-то потом вызываем проект и соответственно у нас уже три Герца Ну то есть должен за триггерится reflow Да я говорю у нас три только reflow либо же за триггерится все то есть экран перерисуется у нас будет репейнить и потом переписывается [музыка] по идее он должен сейчас перерисоваться и вернуться все значения этим всем Ну смотри тогда такой вопрос представим
00:41:10 - 00:42:22
что мы какой-нибудь Форд делаем там да то есть у нас есть for скажем там не знаю короче ладно давай просто слова допустим нас for есть там тысячу тысячу раз мы проходимся тысячу разбавлять проект у нас за это время тысячу раз экран перерисуется Ну как нет Допустим мы меняем стиле беременности также или только будет пересчитываться позиция экран должен присылаться все три стадии по идее же не совсем то есть обычно как ты замеряешь у тебя будет Force Free Flow если в этом смотреть перформансе и соответственно а
00:41:55 - 00:43:07
смысл тебе экран перерисовывать если как будет время не пришлось там сколько например 60-120 правильно всем тебе тысячу раз перерисовывать смысл жизни с точки зрения Ну да по идее обычно этот метод вызывает точно Типа все три стадии вот гидпауник Ой где сейчас Дени наверное Ну ладно не вообще по идее то есть вызывается обычно форс-рефлов Ну то есть по идее если там какой-нибудь и цвета и так далее тоже можно вызваться вот перерисовка по идее перерисовка своим отдельным миром живет Я не слышал сейчас вот это форс-рефловый
00:42:41 - 00:44:15
называется то есть рифлоуин обычно сам происходит Ну как бы браузер как обновление экрана и так далее своей жизни живет пересчет стилей Ну а когда ты по сути вот берешь и дополнительный трек типа Дай мне сейчас мне нужны размеры вот и по сути заставляешь браузер пересчитывать сверху поменялись стиле здесь не знаю там не знаю дисплей там ну ладно ставил дисплей например поставил какой-нибудь там дисплей [музыка] например Flex один выставил один а вот и получается что вот я поменялись какие-то стили которые
00:43:47 - 00:44:53
потенциале могут изменить размер браузер это сразу не будет читать он будет ждать когда он придет время пересчет потому что ниже опять Может там дисплей на блог поменять и так далее вот прям анализировать так не может ну и соответственно коты вызывать по сути браузера Дай мне размеры текущие А вот ну и соответственно ему надо пересчитать сейчас синхронно это как раз Форс заставляешь как будто браузер пересчитать нужно актуально а ну вот Ну окей Я говорю так в любом случае надо перепроверить а то что он там с этими
00:44:20 - 00:45:27
дачу с анимациями Окей Так значит погнали Дальше смотри Давай попробуем наверное Задачка интересную поделать на замыкание это не помню этого аудио но публично собеседованиях или нет допустим у нас есть функция сам и как она должна работать опишем допустим если я делаю Сам у меня возвращается здесь 0 затем соответственно если сюда передается например один вот так вот будет один допустим два два Ну короче думаю Смысл понял пустая пустой вызов как бы этот как его пустой вызов функции он как раз таки
00:45:00 - 00:46:31
говорит о том что пора вычислять если функция называется числом тогда ну то есть возвращать другую функцию которая потенциале может еще принимать дополнительные аргументы для сложения функции может сколько угодно вызывать по сути и Ну давай [музыка] так с а функции не трогать да то есть [музыка] написать в плане не совсем вопрос понял имею ввиду в тележных функций писать код да да в теле функции Ну аргументы тоже можно сейчас [музыка] функция заранее получаем число какое-то [музыка] мы возвращаем реализацию
00:45:45 - 00:47:33
в любом случае рисовал плюс равно получили [музыка] Так ну и получается сумма сразу же может тоже получить аргумент [музыка] Так значит этого не подумал сейчас посмотри Вот видишь у нас получается можем такой кейс есть такой кейс такой [музыка] [музыка] возвращаем себя же самую функцию так получается мы возвращаем А туда рисовать получается Для чего Нам нужен если на то есть это мы возвращаем [музыка] так сложно [музыка] Если удобно То есть просто времени тратили Поэтому так сделал так получается мы создаем рисоваться
00:47:31 - 00:49:11
то есть 0 если у нас на мотив это функция А вот смотри получается что у нас будет вырезался суммировали да получается 0 будет здесь мы возвращаем 0 если так случается если второй мы то есть складываем плюс плюс один у нас один возвращаем сумму да потом при повторном вызове что будет Ну то есть мы возвращаем сумма у меня контекст уже нету следующего сума который ты возвращаешь на вот этот ритуал ой Сейчас подумаю понял что я говорю да [музыка] начало [музыка] функцию [музыка] Salt плюс Ага хорошо и я
00:49:22 - 00:51:03
[музыка] купил и а получается так Ну смотри хорошо Значит мы сделаем вот так здесь у нас обработка первого кейса потом отскакивает создается добавлять результат результат появляется вот так вот добавляется хорошо все так Ну так вообще в целом Давай скажем так здесь бак найдешь его или нет никаких не обрабатывать можно смотреть Да хорошо [музыка] [музыка] так хорошо значит Давай все затестим Сейчас да еще раз посмотрю отрезал 0 если это вот этот кейс если такой так кажется что-то Давай попробуем вызвать эту функцию так
00:50:57 - 00:52:32
получить 0148 хорошо хорошо Все правильно супер на самом деле кажется что можно было бы попроще чуть до написать если сразу же вызывать прощения Ну по идее Если я говорю сейчас меня в голове этот люков нету то можно пойти как будто вот так сделать И вы будете Ну да теперь вот здесь по идее тоже можно удалить называется так должно работать если что также работает и получается меньше года получается меньше прикольно так хорошо Хорошо давай теперь наверно уже перейдем к реакту в целом довольно совсем идем
00:52:26 - 00:54:03
Давай первый вопрос такой реакту Смотри допустим у нас есть он понял здесь у нас идет спрятан пропуск Вот и например вы также Можем написать что-то такое jsx Ну правильно можем сделать вот так вот фигурной скобки написать либо же вот используя компоненты И вот так вот А можешь рассказать чем разница между двумя этими способами они знают двумя этими методами использования компонентов из них правильный и почему [музыка] Вообще первый ряд [музыка] [музыка] Ну как раз таки мы сразу позволим функцию без
00:53:21 - 00:54:55
обертки этой да какие-то менее правильным Точно не скажу но придет и по идее поведение порядка будет много нарощенными а так конкретно какие-то причины рассказать не может например Ну вот если например что-то то есть например что будет работать в таком синтаксисе не будет работать в таком либо же наоборот может быть [музыка] Так что возможно так сейчас никогда хорошо на самом деле Окей на самом деле вот в таком кейсе куки не будут работать в некоторых случаях Давайте и зрителям думает тоже интересно будет
00:54:50 - 00:56:17
например Здесь опять же здесь нам какой-нибудь здесь будет сработает или нет Не сработает надо будет руками добавлять этого я уже почти написал так получается нам обратно идем получается Здесь допустим нам приходит который изначальный А и Давай скажем что нас здесь никакой логике нету Просто рендерится подсветка на клавиатуре включил случайно Ну да ладно сейчас включать долго будет Значит есть каунт ставим так получается ну и соответственно Да спасибо можно написать Вот так вот компания Вот И давай сразу два метода напишем и
00:55:48 - 00:57:18
вот тут напишем component здесь у нас будет Нам получается также 10 Давай скажем 10 будет Вот смотри кажется в таком случае у нас работает Не можно оба варианта ставить разницы нет у нас в таком случае все работает Это черный диск закаменчу хорошо получается [музыка] не не Без апдейта [музыка] Нет на самом деле смотри Ну давай не Ладно давай давай он Клик это будет тоже показательный пример Ну окей на самом деле это тоже можно показать даже проще сделаем смотри Давай попробуем как раз сделать Давай сначала этот вариант оставим
00:56:47 - 00:58:28
правильно его здесь и вот смотри попробуй нажимать на десятку у нас арендуется видишь где видно Ну получается разница в чем то есть ну видишь у тебя по сути получается реакт не понимаешь что телефона компонент разворачивается внутри А по вот и не как бы не область видимости Аля такая условно внутри компонентов обновлялась теперь будет Смотри это даже не столько область видимости Ну ты имеешь ввиду контекст обновления Окей я говорю область смотрите здесь получается такая история что реакция вот в таком случае когда мы
00:57:44 - 00:59:11
используем функцию даже не понимает что это в целом как компонент думает что это просто какой-то кусок кода который разворачивается Вот и по сути Так вернуться по сути а реак здесь не понимает как раз таки он оценивает как хук на самом деле кастом если ты зайдешь в эти в тулзы сейчас надо заходить не буду Он как раз вот этот компонент покажет хук там уже знаешь на компанию там справа Хукс есть там типа стоит эффект и так далее У тебя вот будет компонент написано Он скажете кастомный хук и например смотри допустим
00:59:08 - 01:00:13
если я возьму и сделаю вот так вот и мы здесь делаем например смотри Давай здесь тоже какой-нибудь каунт добавим потом раз раз Так значит здесь история такая писать не буду Например если у нас здесь будет Допустим какой-нибудь If там гуляем Да мы здесь делаем returnal допустим на сам первый рендер вернется нал Затем что у нас будет затем нас на последующие Рендеры а вызовите компоненты хук у нас выкинет ошибка скажет реакции не могут быть находиться должны быть Ну короче с одной стороны должно быть как будто бы
00:59:50 - 01:01:14
он не поймет что это отдельный компоненту который внутри есть он скажет что это ну как бы он подумает что это относится Поэтому соответственно стоит сверху например будет добавлять какие-нибудь или будете терминарные операторы будут скажет что типа не так нельзя короче неправильно будет выкинута Вот поэтому вызывается так Хорошо давай на немножко поговорим про мемонизацию какие вообще методы меморизации Ты знаешь когда их надо использовать когда ты считаешь нужными манизировать качество Нужно не
01:00:36 - 01:01:43
мемонизировать вообще есть два метода цикла это методы короче измена есть еще функции [музыка] создается у тебя другой компонент эту функцию изменились несколько точно когда Ты прикидываешь эти данные как проб сам другой компонент личные функции в нем он нужен для того чтобы у нас каждый раз для таких сложных вычислений на каждый рендер не вычислялись данные записываешь массив покидаешь массив зависимости и изменились тогда уже и вызывает расчет хорошо То есть получается ты говоришь при изменении текстов либо новый колбек
01:01:09 - 01:03:29
либо вызывается который мы передали правильно И ты говоришь нужен только тогда когда мы Передаем функцию другие компоненты Вот например если у нас здесь будет какой-нибудь Клик допустим также добавить Клик Давай скажем сюда перенесем здесь у нас будет [музыка] у нас будет Вот такой вот он Клик Клик здесь у нас получается аккаунт здесь у нас будет Клик Опа так и здесь у нас будет 0 Так у нас ошибка получается где-то Мы что-то неправильно писали здесь горный так получается консоль вот значит так я забыл сказать Вот смотри если смысл
01:02:55 - 01:04:41
Сейчас давайте запишем функцию которая будет называться [музыка] вставляем вот сюда если смысл функцию [музыка] то есть компонент будет дочерние рендерится на каждом обновлении Ну да то есть получается Если мы так сделаем все заработало нужно обернуть в небо компонент хорошо Давай вернем сейчас так [музыка] оборачивайся работает Окей хорошо Так сейчас но если минус то как у нас например Каждый раз будет создаваться если они изменяются разные компонентах другие которые изменяется тогда уже полезно
01:03:58 - 01:05:48
будет один аккаунт есть эти всего один стоит получается Смотри я правильно понял что ты говоришь что нужно использовать иммизациями У нас есть много стейтов в компоненте Цивилизацию когда вообще поиски есть но например в таком случае у нас она не особо нужна То есть у нас компонент F который всегда будет иногда всегда будет выделяю Вот если бы мы добавили какой-то каунтер 2 на 2 и вызвали еще раз это компонент только один перерисовывается один компонент а второй будет минимизированный не будет все я понял
01:05:26 - 01:07:08
о том что использовать Нет я понял о чем ты говоришь ты говоришь что типа здесь в любом случае обновится аккаунт поэтому любом случае обновится компонент типа смысл от этой меморизации То есть я понял окей хорошо окей потому что я тоже часто такое замечаю что в итоге получается Столько стоит компонент и обновляется обычно на самом деле тоже раньше Я посмотрел потом я понял что проще больших командах наверное сделать так чтобы везде все минимизировали и не заморачиваться с различными спорами Нужна ли здесь или нет И так далее Но
01:06:37 - 01:07:52
тогда валидный Поинт А смотри а вот давай мне такой вопрос Да вот мы здесь в данном случае используем функцию апдейтаров вот с ней знакомства перед старой стоит передается новый вот у меня такой вопрос почему вот просто мы не можем например вот так написать аккаунт плюс один пример я буду нажимать у меня всегда будет один Вот например если мы ставим несколько раз у нас значение будет 0 то у нас В итоге будет использовать функцию аккаунт ее использовать на каждый раз будет брат значение [музыка]
01:07:17 - 01:08:43
старое из функций не это я значение перед будет значение тебе браться перед обновлением был а именно уже следующий После выполнения функции функция будет Counter равен одному но вендорами происходит потом произойдет функция вызовется Один плюс один [музыка] вызвали просто функция Просто у нас всего один а нет все правильно сказал но здесь Вопрос немножко не о том то есть нет Ты правильно рассказал о том как работает callback то что у тебя передается такой значение и потом соответственно Ну как бы если несколько раз его вызываешь
01:08:10 - 01:09:45
здесь это будет актуальное значение ну так скажем сохраняться даже которые только что обновил вот и ты еще упомянул батчинг Но вот это вот это не совсем патчингу относится Ну то есть Ну смотри Ладно давай вот я хотел другой вопрос задать Ну давай пойдем по баню сначала синхронный код Раньше он уже не бачился чтобы были разные обновления нет это все правильно но я просто не совсем понял как у нас функция апдейтер относится к батюгу две вещи связанные можешь объяснить просто связь немножко [музыка]
01:09:21 - 01:10:30
Окей хорошо смотрел Вопрос такой вот например этот код У нас есть он в реакции 17 были нет Вот как сейчас у нас написано 17 [музыка] так подумать Ну а синхронные таски Я помню точно не бачились события всякие события по моему тоже или Да там событие на самом деле Буду во-первых в 17 Насколько помню то есть Call Backs использовал все что внутри вот допустим допустим Клик здесь будет Короче смотри какая история была все что вызывалось реактом оно было захвачено что это было Например если у тебя апдейтов без
01:10:38 - 01:12:07
эффекте то есть эффект вызывает эффект и там происходит обновление стоит там происходил патчинг внутри скобках тоже происходил патчинг Внутри ивент-хендеров тоже происходил патчинг не произойдет Например если мы возьмем сделаем вот так вот и уже там дальше синхронно идет в таком случае у нас не было батчинга так сейчас секунду таком случае нас не было бачинга и например таком же случае у нас например смотри насколько я помню если был Клик вызывался внутри промеса за право обработки ивента был бы в самом
01:11:24 - 01:12:27
обработке ивенты есть патчинг потом мы вызываем хендал крик асинхронно и handle Click сам является кулбэком все равно здесь бачин сработал потому что ну как бы на Скотт вызывается своим реактором То есть все что вызывалось реактом а то есть это был диск B1 эффект и венхандроз любой код который называется самим реактом он получается батился вот а соответственно когда асинхронное внутри кода который вызывается реактором то там уже реак не понимает контексте вы запомни что асинхронная точно не бачилась
01:11:56 - 01:12:52
какой-то второй кейс был не помню вещи смотри хорошо давай просто вернемся к тому вопросу Окей ну просто я говорю да для других рассказываю в целом тоже полезно знать [музыка] Но это такая самая простая ментальная модель смотри получается Здесь у нас есть аккаунт каунт плюс один вопрос был такой то есть у нас есть апдейтер но у меня Вопрос был Почему вот мы не можем писать И почему не можем просто вот так вот брать и обновлять аккаунт [музыка] ты имеешь в виду без использования или как Нет ну именно с использованием скул бэка
01:12:26 - 01:13:49
даже вообще давать такой вопрос более глобальный задам для чего вообще Нам нужен например Для чего нам нужны deps почему Ну то есть они чтобы отслеживать отслеживать зависимости и при изменении зависимости мы заново генерируем функцию правильно это все правильно хорошо но Смотри я говорю а вот логически Зачем вообще нужны то есть смотри у нас вот помощью мы здесь задачи писали которая была сам у нас же здесь замыкание было так открыл даже замыкание было получается да то есть задача вопрос в том что смотри Почему
01:13:19 - 01:14:34
[музыка] смотри у нас здесь тоже замыкание у нас здесь вот эта функция правильно она создается в контексте Ну то есть У нас есть каунт аккаунт у нас Но это стоит который обновляется Для чего она вообще вот эти депсы добавлять для чего на функцию пересоздать по идее же можем вообще одну один раз функцию создать у нас аккаунт сюда в замыкание будет Вот же у нас замыкание хранится то есть для чего она вообще-то дискулбек Для чего нам нужны Почему Вот у нас намыкание здесь не работает в обычном рисовать
01:14:05 - 01:15:02
писали же и типа наверху нас функция силу и она не будет умоляться то есть кликнем обновиться один станет и всё и дальше в следующем кликов он также восстановился единицей все правильно правильно Давай я просто немножко более такой глубокий вопрос задаю смотри получается почему у нас аккаунт не будет обновляться Но вот каунт же он у нас замыкание стоит один раз нет функции один раз создаться Все правильно но у него же замыкание хранится переменная выше все правильно почему вот при замыкание Давай представим что я первый раз
01:14:33 - 01:15:44
прихожу в реакцию [музыка] так сейчас вот это обновление компонентов Как происходит Давай просто говорю Давай представим что я первый раз на ряд смотрю вот с такой точки зрения у нас каунт вначале навсегда аккаунт обновляется правильно при первом рендерил 0 потом один потом два Почему замыкание не работает у нас вот функция Вот это вот в этот как его вот замыкание она будет держать как раз этот аккаунт почему он не актуальный будет ну то есть у нас вот этот компонент рендерится у нас аккаунт актуально покажется Но почему вот это
01:15:14 - 01:16:09
вот функция замыкания у себя будет не актуальный аккаунт держать Почему у меня не актуальный аккаунт будет вопрос понял ли понятно [музыка] [музыка] Ну отчасти с этим связано с другой стороны если мы в реакте храним те же ссылочные типы данных Правильно мы же их все это обновляем через его табельно мы же их посылки не обновляем же правильно на самом деле зима здесь объект хранился бы у нас такая же проблема была бы правильно единственное мы сделали в этом аккаунт объектом который хранить напрямую свойства стоит
01:16:00 - 01:17:08
брать не это все правильно стоит [музыка] а еще понял понял Наверное что ну что у нас аккаунт она каждый раз когда заново называется функция стоит Вот и у нас новое значение получается А если стоит Почему каждый раз заново вызывается потому что [музыка] экран при обновлении компонентов [музыка] и соответственно то есть не на самом деле ты в правильную сторону идешь Я просто давай на этого не зацикливаться потому что мне тяжело понять ну как сказать это обычно есть такой момент который тяжело сформулировать часто бывает
01:17:05 - 01:19:00
внутри получается когда у нас вызывается этот аккаунт у нас обновляется функция заново вызывается фунт Ну то есть функциональный компонент у нас обновляется компонент но обновление компонента это ну по сути под собой подразумевает обычный перевызов функции Ну как бы вот Соответственно что получается у нас заново называется функция значит заново создается вот да заново хоки вызываются соответственно и что здесь самое главное создается вот этот вот вот этот контекст функции до который вот тут вот он получается тоже новый в нем он
01:18:26 - 01:19:33
аккаунт новый А тот который в прошлый раз создавался замыкание работает на замыкание ссылается нас на аккаунт из предыдущего вызывать предыдущего ну как бы контекста так скажем Да функции Ну понимаете а вот собственно ну поэтому так и получается замыкание работает Просто у тебя не может быть смыкание между вызовами двумя двух функций идет эта функция Полностью заново создается полностью не остается правильно то есть Обычно когда делаешь замыкание У тебя есть какая-то переменная где-то выше и она там сохраняется в области видимости
01:18:59 - 01:19:58
ну и соответственно припал там при повторном вызове функции у тебя Ну как бы идет ссылка на эту переменную А тут ссылка Ну типа идет на ту переменную но та переменная она вообще другая вообще не как бы не относится к актуальным вот Ну соответственно заново каждый раз вызывается так хорошо В целом с этим наверно закрыли Окей смотри Давай наверное попробуем последнюю задачку по реакцию сделать это как раз у нас будет [музыка] а давай простим смотреть Давай представим так вот говорили А можно ли сделать какой-нибудь хук допустим Давай
01:19:34 - 01:20:47
назовем как вот так вот G а соответственно который будет работать точно так же как то есть перед тем как Но ему не нужны будут и он всегда будет иметь актуальное значение у себя в в контексте то есть допустим вот у нас есть Давай скажем так Клик 2 Клик Давай назовем его так вот Клик Table соответственно здесь у нас были stable callback и здесь у нас будет например тот же setcount + 1 и вот если мы используем handle stablet Когда у нас все работает а если мы используем handle Click тогда у нас не работает сюда соответственно можно
01:20:15 - 01:21:33
написать такую можно написать такое хук и если можно то как вообще идеи есть Ну понял да история нас получается как только ему нужно передавать он всегда возвращает функцию которая всегда имеет один и тот же один и тот же референс Однако при вызове этой функции у нас всегда будут использовать актуальные значения из-за компонента виртуальный стоит и актуальные простые Давай просто сначала на словах поговорим не надо ничего писать просто слова поговорим Можно ли такое реализовать и какие есть Ну письменность понял но
01:20:59 - 01:22:04
вообще пойти решение какой-то через стрелку типа ты создаешь репку чтоб значения колбека этого там как-то условно проверяешь типа меня остыли колбек и зависимости от этого значения вторая или не спелые возвращаешься заявку так я правильно понял Смотри Ладно ты возвращаешься с этим рефом что надо делать то есть у нас Давай скажем так ну нет все правильно сказал через все правильно конечно нужен реф мы создаем реф Ну давай просто можешь на словах просто объяснить как это нам поможет во-первых с точки зрения
01:21:34 - 01:22:47
вот у нас есть Мы каждый раз в него перезаписываем значение колбека который нам приходит Ну то есть у нас каждый раз когда обновляется колбек и соответственно туда там у нас переписывается рефточка вот дальше получается этим можем сделать как он здесь может помочь а при повторном рендеринге возможно то что нас реакция он может несколько раз обновить страницу но не монтировать ее пока что рендеринг делает потом происходит событие и он первоначально выполняет какой-то большой обновление вот И для
01:22:18 - 01:23:32
этого нужно чтобы мы [музыка] возвращали старый старую девку при неудавшемся неудавшегося рендеринга не совсем ты здесь про кон Карен мод говоришь реакция не совсем ну а что ты подразумеваешь под неудавшимся рендерингом был у нас например реакции какой-то запускает какой-то большой большой рендеринг происходит какие-то большие расчеты вот словно и пользователь кликает на мышку и это будет у клика выше обновление экрана Почему обновление стоит большого в начале условно обновиться события на Клик президент
01:23:00 - 01:24:47
потом уже повторно будет вызван будет новый рендеринг Вот например [музыка] я просто связи не совсем понял какое-то отношение к нашей задачей Давай просто более детально ты сказал с реформ Да вообще есть какие-то идеи примерно давай колбэк а смотри он должен работать точно так же как usculpack вот Давай скажем так что у нас есть вот такой но это на самом деле бесполезная запись Давай скажем так что вот у нас есть такая запись правильно И у нас как видишь Клик никогда не будет обновляться правильно он всегда будет
01:24:05 - 01:25:25
иметь Это один и тот же референс потому что у нас нету ну как у нас не меняется мастер правильно Вот я говорю про то чтобы у нас была функция был колбеков которые не надо некий дебса прокидывать надо некие функции апдейтеры писать то есть ты пишешь Вот так вот у нас все работает то есть и функция Клик ставил тоже не меняет свой реферику использовать чтобы мы возвращали Ну свойства и разные версии да да [музыка] [музыка] [музыка] функция должна вас возвращаться какая-то при чтобы возвращали саму репку а потом
01:25:00 - 01:26:29
мы скидывали значение ref.carent прикидывали значение ref А как это поможет [музыка] Окей ну просто смотри в чем прикол нас сейчас получается у нас получается мы создаем реф мы оборачиваем меняется мы заново обновляем наш реф правильно набрать потом обратно разворачиваем его возвращает точка немного напрямую как алгоритм реализовать чтобы мы болели вот этот колбек каждый раз новый и возвращали его только вообще на самом деле Ладно давай просто что времени затягивалась и вот так вот можно сделать
01:26:17 - 01:27:43
аргументы То есть у тебя получается как будто бы вреп завернул и развернул Понимаешь вот так тебе нужно какой-то постоянно стабильную функцию возвращать а внутри нее уже использовать этот нестабильную через реку используется тем что ссылка на реку нас никогда не будет меняться ссылка будет одна и та же Однако Коран будет разный ну и соответственно можно затестить наверно [музыка] вот соответственно кликаем видим у нас происходит так подожди а сейчас у нас вполне до конца все правильно работает компанит это мемас
01:27:35 - 01:28:50
рендер все равно есть Так значит Да вот здесь что с Мема вещь мы к вам сюда все равно Передаем но не используем его понял проблема да то есть как у нас ряд мимо не понимает кем мы просто используем это нормально вот такого теперь нас реки рендеров нету а здесь у нас Консул влог рендер хорошо значит происходит рендера нет OK Значит значит Давай на этом наверное заканчивать Давай быстренько дам фидбэк по собесу там получилось довольно таки бодро мне понравился особенно вот с решением с тем же самым то есть некоторых местах
01:28:32 - 01:30:00
рассказывал но до многих вещей сам доезжаешь ивент-лупом тоже хорошо здесь вот анимациями ни у кого не хорошо Мне тоже надо посмотреть как страны получился видать где-то здесь снова пробелы есть соответственно потом после таймаута по всей истории Прикольно смотри какой момент есть сразу скажу тебя часто бывает такое что это вопрос до конца правильно понимаешь ты начинаешь вот прям все рассказывать по этой теме есть вот это Есть такая тема есть например как здесь последнее что я помню с колбеками
01:29:16 - 01:30:32
может и начинать рассказывать там у нас вызов такой есть у нас такие моменты есть Ну короче начинаешь много вещей различных рассказывать которые не совсем относятся к вопросу да то есть и ну как бы иногда бывает что начинают дополнительные вопросы вот по этой теме задавать уже в другую сторону идти Я просто говорю что наверно лучше было бы тренировать как раз наверное какой-то такой навык нельзя тренировать может быть попробовать почаще вопросы задавать чтобы ну когда не понятно о чем я хочу тебя спросить не рассказывать просто все
01:29:54 - 01:30:51
что знаешь по этой теме а именно понять чего тебя хотят вот так у нас получается некоторых моментах будто бы немножко затягивался в другую сторону уходила а также наверное момент есть я не знаю просто может сильно волнуешься то что мы записываем сейчас но вот иногда бывает с формулировкой прям очень-очень сложно То есть ты пытаешься что-то сказать я вот слушаю и знаешь что такое ну как бы это я как будто бы несколько вариантов понимаю из того что ты сказал и как бы вот несколько вариантов есть как это
01:30:22 - 01:31:19
можно понять ну вот например как бы здесь Было помнишь стоит вызывается заново Ну ладно это Примерно такой сложноватой на последний был она вот как будто Вот Эта мысль донести то есть вот она заново вызывается функция по Ну как у нас там к функциональный компоненты это обычные функции Каждый раз когда происходит заново вызываются соответственно все вызывается Заново там типа создаются новые переменные и замыкание Больше не работает вот в этом плане Мне кажется вот и белую прям болезни всего было бы наверное навыки
01:30:51 - 01:31:49
коммуникации потянуть или собеса потому что здесь опять же наверное от человека зависит только поймет [музыка] а так в остальном наверное Ну то есть по поводу По поводу хуков По поводу рефов и так далее наверное чуть потянуть можно вот меня типа этот как его есть порефом видос может его посмотреть может также почитать и в целом такие кейсы наверное можно посмотреть в различных библиотеках там всякие реакцию и так далее там много есть всяких рефами Может просто найти различных муки смотреть есть что-то
01:31:20 - 01:32:20
непонятно Ну типа смотрите значит фишку хуков смотришь там представляешь как бы это реализовывал если не понятно берешь заходишь смоешь Как это сделано в остальном как бы да ну то есть я говорю вот здесь вот по поводу По поводу всей истории тоже можно освежить с этими надо посмотреть кстати Потом в личку отпишу тоже еще может быть видос вставлю вот в основном наверное год в целом понравилось как прошел соответственно коммуникации поработать и какие-то проблемы залатать Спасибо большое У меня тоже понравился
01:31:50 - 01:32:52
очень интересные вопросы интересно задачки были не было каких-то там примитивных там типа взвести по Назовите по данных какие там есть такого не было немного не понимал вот говорил немного не понимал вопрос пытался сам скорее довести решение которое ты имеешь ввиду Не слушался вопрос А это есть немного Ну да Не наверно просто было бы проще всего Если пересетал были бы там сказал бы немножко не понимаю Можешь подробнее объяснить Ну то есть оно мне кажется в целом было бы лучше что времени меньше
01:32:23 - 01:33:40
потратили бы на какой-то лишних разговоров не было которые могут еще значит дополнительные вопросы более четким наверное здесь в этом плане может быть полезно у нас как бы такой Больше он не прям супер такой стрессовый Собес на работе ответил ответил но тем не менее мне кажется можно потренировать так есть Давайте сказать Окей хорошо Так ну всё дорогие друзья на этом У нас все Если вам понравилось видео Обязательно оставляйте лайки делитесь друзьями пишите комменты также не забывайте подписываться на телеграм
01:33:01 - 01:34:01
канал там каждый выкладывает дополнительный пост можно записаться на такой же мог собеседование отправить свой проект Спасибо за просмотр всем хорошего дня всем пока
Итак дорогие друзья Всем привет Сегодня у нас будет очередное видео в рубрике собеседований в гостях у нас Сергей Привет Серёга Расскажи немножко о себе Привет разработчик опыта вот шум реакцию три года коммерческого опыта по уровню плюс минус это Middle плюс примерно Окей хорошо Может подробнее рассказать про текущее место работы потом вообще делаете Что за продукт Что за обязанность у тебя раньше я до этого работала компания вот сейчас это вместе и сейчас [музыка] админку так скажем мы сейчас разбираюсь
00:00:00 - 00:01:41
А до этого писал или нет Да у меня три года опыта именно по реакту вот этому на баке тоже немного писал Но преимущественно реакция Ну ладно давай тогда наверное есть недавно на новую работу пришел я не затрагивать А можешь подробнее про предыдущий тогда можно сказать что там за проект был и какие роли там выполнял Вообще разные проекты были там были проекты интернет-магазин разные все чатике были чем можно можно больше рассказать трех четырех четырех сервисов [музыка] понял Понял хорошо а вот смотри по
00:01:01 - 00:02:26
поводу админок они вас тоже на Next делались админки нет на реальное списались Я просто Почему спросил то что про последнюю как раз работать пришел то что как раз админка там тоже проспект который используется там тоже [музыка] А понял хорошо а в качестве стоит менеджера что-нибудь используете либо что в качестве используются [музыка] То есть генерис через лагерь берется через автоматически в автоматическом режиме генерис все API три этапе эти функции и не автоматически и автоматически получается у нас есть
00:02:19 - 00:04:04
ручка которую мы можем встречаться и сбрасывать данные А у вас получается да и не используется на одном проекте чтобы писать автоматически нет тегов с этим проблемы не отвечает они пишут теги и отключает чтобы разложении не было поэтому это не важно критично А вот я просто среда прям так говорится не помню А там получается нельзя сделать так чтобы при разложении у тебя конечно сбрасывался вообще можно сбрасывать можно там я особо не вникал не рассказывали что просто мне отключает Но не все равно типа при
00:03:26 - 00:05:21
повторный сброс немного странно работать полностью не отключается то есть два раза просто не отправиться хотя бы отключили я понял странно ладно здесь надо на примере смотреть подробно не смотрел что это не мой проект был мне команду показывал скорость побежал я понял окей хорошо Так давай тогда наверно попробовал уже конкретно каким-то задачам перейти смотри Давай на нас такой самый первый базовый начнем получается Давай представим что нас есть затем У нас есть будет ссылок получается один соответственно такой что
00:04:50 - 00:06:19
ему будет поймал 2 и допустим здесь у нас сгнились какой-нибудь resolve promis P равняется и соответственно сделаем вот так вот Сэн onlog ромиз ромес 1 да значит здесь пробел убрать Питер не работает Вот видите разработал Давай представим что если я возьму и вызвать функцию в каком порядке в консоль вызвать вы видите можешь рассказать далее [музыка] [музыка] Ага Правильно Да давай затестим и Да все правильно Окей хорошо а вот смотри закон грязь рекой А вот такой вопрос интересный если например старик вас снимает фрейм
00:05:51 - 00:07:40
ставить Как думаешь какой порядок будет но это опять же на смекалка такой вопрос первый Да все правильно вот смотри Такой [музыка] Странности правильно вот смотри а получается все сам когда выполняется [музыка] при обновлении это получается в браузер браузер есть ты про там layout [музыка] Композит Ну да да по сути же он до них выполняется правильно [музыка] и хорошо можете подробнее пройти Композит компоновка расположение [музыка] и такие свойствам играл какой-нибудь далее происходит у нас Композит То есть
00:07:22 - 00:09:23
у нас на отрисовка используя видеокарту это происходит на владельном потоке и не влияет на мой интернет Да все правильно супер хорошо так получается касательно следующего вопроса такой раз в эту сторону Пошли по этим темам получается Например [музыка] так вот допустим у нас еще одна функция есть назовем представим что создаем получается вот такой вот элемент Хотя нет Давай скажем что мы берем [музыка] селектор вызывается селектор будет Давай просто обратить внимание представим что у нас здесь дальше что мы например делаем с этим
00:09:48 - 00:11:24
пивом если мы его добавим [музыка] Давай скажем так айт потом что там не знаю 1 секунда из допустим скажем Да затем стал должно быть соответственно потом получается у нас будет и вставил равняется все будет здесь у нас будет 0 пикселей затем мы сделаем вот здесь вот 500 пикселей вот так вот у нас анимация сработает или нет [музыка] [музыка] если мы как разными макротарском макротасками поставили Все сработало хорошо Не на самом деле Да правильно То есть получается Если мы так все пишем то у нас по сути это все объединения в
00:10:53 - 00:12:40
запасе да то есть одной пачки применяется стиль Например если у меня или например Ну смотри смотри получается когда мы поменяем свойства потом цвет то только происходит да я помню ты получается считаешься сказать про то что типа браузер как раз старается вот эти вот операции оптимизировать Да и соответственно если ничего себе ну как бы никакие свойства которые могут повлиять на Flow не обновились там не будет производить например поменялся только Color То есть он будет только Paint и Композит производить правильно
00:12:23 - 00:13:38
Окей хорошо Ну да и здесь на самом деле то же самое правильно сказал то что происходит получается у нас соответственно все это синхронно происходит в глазах браузера нет такого что состав произошло изменение 500 почему то что у нас это все происходит Мы трейде соответственно браузер не успеваю читать поменялись или что Я поменялся хайп на 100 не успевает элемент перечислить Ну как бы перевести в от устой соответственно да да и соответственно никакого транзишна у нас не будет окей хорошо вот смотри как
00:13:34 - 00:14:30
Каким образом давая скажу так здесь будет правильно допустим вот мы хотим вот так вот сами руками контролировать анимацию Да и каким образом здесь вот правильно будет отложить так скажем обновление вот это вот хайта то есть на какой момент мы должны откладывать Каким образом Вот как можно здесь код допустим поменять чтобы у нас все сработало и как будет какой какой из этих из возможных методов будет сам правильно как раз таки миллисекунд который пришло предыдущего Рафа и все Ну давай представим что на таких стоит
00:14:03 - 00:15:08
100 Ладно давай представим что она и так 100s Ну хотя не залата Давай представим что 0 там стоит мы ставим 100 и 100 потом 500 вот анимации тоже нету то есть мы так по сути все поставим и пахает Стоп это хайп 500 по идее ничего Не сработает Вот соответственно Как можно просто сделать ты мало такой Стив равно пикселей и так должно сработать получается с нулем А вот смотри Помнишь мы с тобой как раз таки обсуждали касательно с таймаута То есть он по сути иногда может произойти раньше правильно получается может произойти
00:14:57 - 00:16:10
[музыка] [музыка] чтобы как раз не было того что мы ошиблись у нас здесь будет селектор Соответственно что у нас здесь будет асдф так соответственно надо ему какой-то background Color Style background здесь у нас скажем будет Black и Давай сделаем так вот наверное пикселей так он появится или нет по моему не появится сейчас X [музыка] получается Вот мы сейчас вызываем функцию правильно у нас идет 500 миллисекунд Давай скажем так сейчас давай вызываем что у нас было могли обновлять страницу соответственно ты говоришь вот эту часть
00:15:52 - 00:17:33
просто обернуть правильно [музыка] Окей хорошо так тоже сработало так вообще на самом деле вот этот момент интересный потому что она срабатывает всегда я-то Я тоже помню что ну зачем сейчас такое как раз таки этот как интересный момент появился потому что по идее по идее если у нас например мы трейде ничего нету Правильно мы идем сразу же в этот как его то есть Мы выполняем различные синхронные таски допустим синхронных таски нету выполняем сейчас майкрососу вот и Micro taska как раз таки она может произойти и до того
00:17:13 - 00:18:20
как у нас придет вот на самом деле интересный тайм-аут тоже помню что есть решение Ну как оно типа вроде бы знаешь обычно такая не работает берешь оборачивается с этим связанное вот на самом деле здесь интересный вопрос просто появился например с тем же рекой фреймом то зачастую как бы тебя Ну если просто знаешь друг за другом написать чаще всего с этой могут быть первым воспроизводить Вот и по сути получается раз это воспроизводится первым то здесь получается выполняется быстрее чем Ну обычно обычно Ну давай проверим Может
00:18:11 - 00:19:19
я сейчас вообще просто запамятовал смотри то есть Давай скажем здесь еще одну функцию создадим тест получается Рафа не используется использует обычные без transition то есть вручную свою анимацию делаешь сложных анимаций для таймеров пользуется А как раз таки анимации без использования хорошо обновляем [музыка] и тогда значит ладно окей [музыка] их вызываем Ну да нет я просто к чему говорю Смотри этот как я почему я здесь такой вопрос появился потому что возможно я что-то не понимаю в комментариях нас поправят А смотри
00:18:51 - 00:20:24
Получается же история такая сейчас так это надо скаметить так получается же история такая чтобы ей у тебя рекой занимаешься фрейм должен вызываться каждый раз Ну то есть при обновлении правильно то есть раз допустим 16 секунд называется Вот соответственно с этой моут он может намного больше вызваться ну то есть за эти 16 секунд по идее макро ТАСС много может произойти ну и соответственно микро ТАСС Ну то есть много 10 может произойти но тут интересный кейс на самом деле получается потому что я о нем не задумывался вот мы
00:20:02 - 00:21:01
как раз когда начали делать У меня такое мнение появилось по идее Да они типа все эти которые ставишь они в один момент Они последовательно воспроизведутся Ну то есть соответственно вложены на следующий оставаться но тут на самом деле интересный момент Почему Потому что по идее по идее за один как бы Раф у тебя несколько макро ТАСС может произойти ладно окей забейтесь Ну по сути То есть у тебя есть вот этот промежуток времени за это промежуток времени очень много действий может произойти различные микро тоски могут
00:20:31 - 00:21:28
быть а может там синхронном что-то произойти могут макротаскиваться Ну окей ладно это надо будет потестить вот сторону пойдет но вообще интересная говорю вот в комментариях Если кто-то знает пишите обязательно потому что потому что нас получается вот так на самом деле обычно как делают обычно как делают просто оборачивают ну то есть например это Не сработает с одним приходится работу интересно но по сути получается смотри теперь обычно оборачивают фрейма и смысл получается в чем то есть подожди у нас здесь так
00:21:08 - 00:22:22
сказать это интересно если брать мин хайп подожди мне кажется немножко не туда ставил пиксели у нас Хай то нету Значит если мы делаем так вот нас так тоже работает Так у нас получается Он прыгать вначале Давно ли потом туда переходит Ну ладно окей Блин вообще на самом деле Странная история у так если сделать давай Ну да ладно короче Окей тогда получается так он 500 пойдет с таймаута тоже сработает у нас Окей он идет вновь окей Просто А например обычно то есть библиотеках транзишна вот в том же этот в том
00:21:44 - 00:23:08
транзишен есть реактор различных друга кстати не помню как там сделано как раз использовать два request Animation фрейма вложенных 2 а и соответственно получается прикол в чем если у тебя рекой занимаешься фрейм до получается рифлоури пенет и все вот это вызывается то соответственно как бы ну получается у тебя здесь Хайд 0 и ты здесь сразу же хайп 500 выставляешь понимаешь получается история такая же как ты вот ну синхронно все с нуля на 500 поставил то есть когда дело доходит именно до обработки браузера Ну
00:22:42 - 00:23:37
обработки и когда дело доходит то обработки стилей браузером у тебя по сути получается что у тебя Хайд уже 500 стоит вот и опять по сути никакого транзишно не происходит Ну и получается Если сделать твари пентам Ну как бы еще перед текущим да А следующий перед уже следующем произойдет уже как будто на следующий цикл попадаешь вообще по-моему кстати говоря сейчас Давай последний раз за тестим по-моему вот так вот все-таки делаете так хопа Да именно этот транзишен по-моему выставляется как раз вот так
00:23:12 - 00:24:08
вот в этом во вьющим транзистом понятием Круга я не помню я просто давно не смотрел но давай вот так быстренько для интереса [музыка] опа так тоже работает Ладно короче я сам ничего не надо быть посмотреть какие все погнали дальше так дорогие друзья для тех кто также как я очень сильно удивлен теми результатами которые Вы только что увидели касательно анимации то что у нас анимация работает и по рекосниматель фрейму и после тайм-ауту Я рад сообщить вам о том что это как раз таки проблема скотцен боксом
00:23:43 - 00:24:50
А я на самом деле здесь потратил уже около 4 часов после того как у нас закончилась наш собеседование Ну понятно дело что отдыхал там решалки другие дела Но тем не менее во время собеседования и все это время меня вообще не отпускала Мысль о том почему нас так сработало Потому что я в этой теме был прям так довольно уверен и конечно же результат мне очень сильно шокировали но как раз таки я во всем разобрался и как раз хочу сейчас поделиться всеми результатами всем тем что я нарыл собственно тех кому
00:24:27 - 00:25:19
это не интересно тогда переходить дальше собеседованию внизу будут тайм-коды Там можно все перемотать так вот прежде чем рассказывать вообще о том что у нас проблемы скотцен боксом Давайте сначала попробуем в целом разобраться что у нас ситуация с браузером Как работает тайм-аут и так далее как у нас все происходит анимации в первую очередь рекой с Imagine Frame ISO тайм-аут мы Сергеем обсуждали во время собеседования то у нас нет Четкого порядка что вызывается первым давайте это все проверим на реальном примере увидим я
00:24:53 - 00:25:47
обновлять страницу У нас здесь если вы не успели посмотреть есть просто Бади в базе У нас есть скрипт и вызывается там уже рекоснимаешь из этой мод соответственно сначала вызывать потом тайм-аут однако я обновляю как мы видим у нас все прыгает вначале у нас поймал от которого Иногда у нас сначала одну выскакивает первым иногда другое тоже самое на самом деле происходит если взять и вызвать все руками консоли например беру вызываю Давайте вызовем очень очень много раз и посмотрим что у нас получилось здесь на
00:25:20 - 00:26:15
самом деле в консоли такой кейс отловить сложнее но как мы видим у нас 12 вызов сначала Раф потом тайм-аут а все-таки остальные вызывает тайма утра Ну и в целом сверху все тоже самое У нас нет Четкого порядка вызова как раз таки легко снимаешь фрейма либо же с таймаута Давайте попробуем разобраться почему так происходит в первую очередь Когда у нас вызывается фрейм вызывается раз 60 миллисекунд Ну соответственно зависимости от как раз таки самого нашего компьютера в зависимости от того обновлений
00:25:48 - 00:26:45
соответственно зачастую как раз 60 FPS поэтому у нас раз 60 миллисекунд вызывается и Квест точнее 60 секунд То есть 16 секунд У нас вызывает рекость Animation Frame и соответственно как раз когда он вызывается он вызывается Когда уже браузер понимает что ему нужно обновить экран сначала вызывать фрейм затем у нас вызывается уже получается рефлоуи Paint и затем уже вызывать композицию во время рефло у нас пересчитывается позиции во время repaint у нас Перечисли То есть как раз таки все цвета и так далее во время
00:26:16 - 00:27:10
композита у нас все уже как раз таки рисуется так вот получается какая у нас ситуация То есть у нас получается такая ситуация что иногда с этой мод может вызываться до рекоиться фрейма А и надо после Давайте попробуем разобраться в каких случаях он будет вызываться до приходится время когда будет вызываться после первую очередь сразу скажу что request Animation Frame о приоритетам намного выше чем с тайм-аут не намного просто короче выше чем тайм-аут соответственно получается Если у браузер есть выбор выполнять рекой выполнять он
00:26:43 - 00:27:42
будет выполнять рекой Однако Проблема в том что рекость Animation Frame ему постоянно выполнять не надо ему нужно выполнять перед тем как пришло время обновлять экран соответственно если сейчас уже мы вызываем как раз таки сейчас как раз таки у браузера время когда им нужно все пересчитать Если же сейчас как раз таки нету нужды в том чтобы обновлять экран сначала вызвать для того чтобы браузер просто не просиживал и ничего не делал когда у него есть какие-то задачи и так давайте Теперь попробуем на конкретных при
00:27:13 - 00:28:09
посмотреть в каких случаях У нас должна работать анимация то есть случаях при обновлении наших стилей у нас триггерится анимация А в каких случаях у нас не три делится анимация собственно Давайте сначала расскажу немножко про теорию то есть анимация у нас триггерится тогда когда браузер уже вычитал определенные стили Допустим мы с этим атом айтом Хайд 0 и с этим уже как раз ему транзишен так вот сначала 10 или так скажем хранятся временем так скажем хранилище правильно назвать но в конце концов браузер уже пересчитывать и
00:27:43 - 00:28:40
применять или во время того когда у него происходит во время всего вот этого вот процесса он уже как раз таки берет ту информацию которую мы поставили ему в атрибуты соответственно он ее вычисляет применяет и тогда В такой момент уже браузер понимает нашего типа высота 0 и у него есть соответственно потом после того как браузер у нас уже применил или мы берем и обновляем наш Хайд соответственно браузер видит у нас стоит у нас есть четкая высота и у нас также есть анимация нашего заниматься нашей высоты
00:28:12 - 00:29:12
соответственно меня и он понимает что не нужно ему обновлять сразу моментально а нужно ее красивенько показать на основе нашей функции это у нас был из обычной и соответственно основе нашего времени это у нас было как раз я одна секунда Вот получается чистость теоретически точки зрения у нас анимация должна происходить только тогда когда у нас браузер уже посчитал применил все эти стили и соответственно потом уже происходит изменение Хорошо давайте посмотрим теперь на конкретных примерах У нас есть
00:28:42 - 00:29:36
несколько функций У нас есть функция не Mate Что она делает Хайд 0 затем обновляет транзишен и сразу же обновляет наш сайт в таком случае у нас по сути высота идет со 100 до 500 у нас таком случае высота сначала встретиться в ноль потом встретиться 500 так как у нас все происходит синхронно по у нас как раз таки никакой здесь анимации не будет браузер все это вас примет Как одну операцию то есть мы как будто просто добавили transition и добавили Хай то есть придет патчинг Почему Потому что у нас все это происходит синхронно до того
00:29:09 - 00:30:06
как у нас произошел рефловый репейт соответственно эти или никак не применяются как раз и к нашему Хорошо Давайте теперь посмотрим на функцию animateraw в таком случае вот именно с такой функции у нас также не должна работать анимация если забыл вам показать здесь обычный как и в нашем примере айди тест и background Color Black внутри есть текст для того чтобы не изначально была какая-то высота а соответственно получается что мы делаем вынимать трав понимать травмы также выставляем хате транзишен и затем уже
00:29:38 - 00:30:31
приходит Animation Frame обновляем наш Хайд то есть может показаться здесь у нас есть асинхронная операция синхронно не делаем поэтому батчинга у нас не должно быть однако батчинг все равно происходит Почему Потому что фрейм у нас во всех браузерах кроме Сафари вызывается до того как у нас происходит до того как у нас браузер уже перечитывает и применяет все эти стили у нас как раз таки происходит до этого момента рекой Поэтому в глазах браузере это все выглядит точно так же как его тут как будто бы у нас садится ставил
00:30:04 - 00:31:01
transition на Hight и соответственно как будто бы у нас уже светится 5 500 различных просто здесь каратил себе работу написал немножко по-другому все в таком случае также у нас анимация не должна работать тоже У нас происходит снасти далеко и сами нас есть два вложенных рекость Animation фрейма в таком случае у нас всегда анимация должна работать Почему Потому что мы сначала выставляем хате transition потом что происходит у нас вызывается первый рекой занимаем он вызывает у нас происходит внутри этого
00:30:32 - 00:31:28
рекой с Animation фрейма мы с этим еще один рекоснимаешь фрейм и год рекурсивный рекой будет Как раз таки засечено чем будет вызван не в текущем так скажем не в текущем потоке не перед текущим обновлением экрана а перед следующим обновлением экрана соответственно все текущие стили которые мы применили Хайд и transition они будут применены в текущем при слове репейте и затем уже в следующий раз перед следующим обновлением таком случае у нас все будет работать и как раз таки поэтому я говорил что все
00:31:03 - 00:31:57
библиотеки обычно обновляются Или через два рекоснимаешь фрейма хорошо что же у нас происходит тайм-аутом как мы с вами могли разобраться у нас как раз таки здесь они все однозначно у нас не надо может вызываться фрима отвесно если наш тайм-аут вызывается до рекой с Animation Frame тогда наша анимация Не сработает если он вызывается после Значит мы уже вызовется после того как произошел риковый ставил то есть после того как произошло reflow repaint и соответственно обновление экрана соответственно в таком случае наш
00:31:30 - 00:32:27
анимация должна сработать Окей хорошо После того как мы разобрались со всей теории Давайте посмотрим как это все работает на практике Итак Друзья вот мы смотрим на тот код который мы только что видели вес коде только уже мы смотрим на него вклад боксе как мы видим здесь у нас есть div с background Black соответственно 4 различных алгоритма обновления и Давайте попробуем конкретно на примере посмотреть как это все работает первую очередь давать вызов не Mate получается Animate Thing что у нас будет Как видим у нас никакой анимация
00:32:00 - 00:32:57
не происходит можем вызвать еще раз анимации никакой нету Хорошо Давайте теперь вызовем аниме и трав мы вызываем аниме трав и мы видим что у нас происходит у нас работает анимация Хотя не должна работать Ну ладно давайте дадим Может здесь конь шанс можно искать погрешность нет Все равно Все работает хорошо давайте теперь перейдем в Animate на сидеров внимательно если трав понятно дело всегда должен работать и так и что в целом логично поэтому здесь перепроверять ничего не буду и Давайте посмотрим на анимеш аниме тайм-аут они
00:32:29 - 00:33:26
мыть тайм-аут Казалось бы он тоже должен иногда воспроизводиться иногда нет то есть в таком случае она должна работать анимация иногда нет у нас работала еще раз давайте еще раз попробуем еще раз Ну ладно на самом деле здесь пробуйте так много раз не стоит я здесь пробовал в начале когда только разбирался своими проблемами около 50 раз это все было бесполезно как бы от того что больше раз вызовите ничего не поменять мы видим если у нас рафам всегда работает то ему тем более будет конечно же работать так вот Давайте
00:32:57 - 00:33:53
Теперь попробуем посмотреть на то как это все на самом деле должно работать если у нас нормально среда запуска они какой-то код сын бокс со своим лишним кодом А вот Давайте просто возьмем наш HTML В отдельной вкладке и посмотрим какие у нас будут результаты Итак друзья Вот мы и находимся в браузере Как раз таки взяли вот этот HTML файл и собственно запустили его тут находимся Мы в обычной среде без всяких боксов и Давайте сначала попробуем по запускать Animation RAW Давайте сначала обновим страницу запускаем анимешнуров как мы
00:33:25 - 00:34:16
видим никакую анимации нету перезагружаем запускаем перезагружаем запускаем перезагружаем запускаем Ну соответственно так можно делать много раз И никакая анимация здесь как раз не должна работать то в целом логично То есть как вы можете видеть код бокс у нас работает не совсем так как нужно Окей давайте теперь протестируем тайм-аут тайм-аут вызываем его нету анимации вызываем нету анимации вызываем нет анимации что-то неудачно попадаем Вот теперь у нас как раз таки сработала анимация Теперь они работают вернее
00:33:51 - 00:34:54
работает Ну как видите у нас как раз уже был один кейс в котором анимация сработала Я просто все подловить не могу удачно Вот Но тем не менее если поиграться на самом деле здесь примерно 50 на 50 происходит все зависит от того какой момент времени вы попадете если у вас тайм-аут произойдет после Рафа тогда соответственно у вас будет анимация если тайм-аут у вас произойдет то Рафа тогда у вас как раз таки анимации не будет Ну и по трафам я подразумеваю рекой animational Frame Хорошо Давайте теперь
00:34:21 - 00:35:13
протестим как раз и два на из трафа то есть два вложенных рекой simation фрейма тут понятно дело что всегда анимация должна происходить она происходит происходит в целом на это смотреть Особо смысла нету и Давайте посмотрим на animationsing то есть они macing мы никому синхронно все обновляем тоже смотреть на что смысла нету у нас будет происходить патчинг никакой анимации не будет в целом боксе Это тоже не работало также одна важная деталь в которой анимация будет работать всегда это как раз таки вызов слова То есть если
00:34:47 - 00:35:45
например сделать проект А в таком случае что произойдет у меня вот здесь произойдет Force reflow то есть браузер заставлю Вычитать как раз и стиле с помощью вызова и от баунинг клайн проекта то есть скажем Да мне как раз и размеры и координаты Вот его поэтому он возьмет пересчитает А все стили пересчитать размеры применить их не применяет а просто все пересчитают у себя собственно запомнит это и как раз таки отдаст мне размеры соответственно в таком случае получается Здесь форс-слова у нас пересчет стилей и здесь сразу же
00:35:17 - 00:36:16
мы синхронно также поменяем стиле и в таком случае у нас по мнению браузера также будет происходить как раз таки по его мнению как раз таки уже будет происходить изменение стилей Поэтому будет все это анимировать как раз и так можно делать но это более трудозатратно по перформансу давайте как раз таки все обновим а здесь мы файл сохранили переходим сюда обновляем нашу страницу и делаем Animation Sync видим у нас анимация всегда срабатывает Несмотря на то что обновляем все мы синхронно так вот это как раз таки и причина по
00:35:46 - 00:36:44
которой в конце боксе У нас есть проблема Давайте посмотрим Именно где все это у нас и происходит Итак друзья думаю так вас довольно таки долго томил всеми ожиданиями и Своими рассказами собственно причина как раз я сама является в том что у нас внутри от Sandbox внутри его своей логике есть как раз такими то есть обзор который следит за тем документом для того чтобы на все это посмотреть Давайте В отдельной вкладке откроем наш Sandbox собственно вот мы его открыли Давайте посмотрим какие Джейс файлы здесь у нас
00:36:15 - 00:37:06
подгружается у нас подгружается эти файлы Давайте поищем соответственно если посмотреть на один скриптов которые подгружается собственно это вот этот скриптейшн зервер это как раз и скрипт который называется d283 собственно подключается у нас вот тут вот а сейчас я увидел а соответственно он подключается как раз таки вот здесь вот это 283 получается Если мы взглянем на его код найдем здесь virtation abserver то мы увидим что у нас как раз таки Сейчас я вам покажу вешается обзор на весь документ То есть как вы видите у
00:36:41 - 00:37:59
нас и Вар и равняется обзоры в И как мы видим получается у нас вешается такой на документ амитрий на обзор следим Мы за всем сап три зачал листом и за атрибутами то есть следится вообще за всем только можно то есть у нас за на весь документ сервер и какой у нас колбэк это и функция что у нас здесь происходит и соответственно замеряется здесь ширина высота документа и ширина высота Бади соответственно у нас каждый раз когда у нас происходит какая-то мутация нашего атрибута у нас как раз таки вызывает вот
00:37:19 - 00:38:19
этот вот метричную сервере для тех кто не знает точно все он более приоритете более приоритет чем какие-нибудь там макросов вызывать внутри Micro Task соответственно когда мы обновляем какой-нибудь атрибут у нас что происходит у нас как раз таки вызывается вот этот код у нас вычисляется ширина высота То есть у нас происходит Force reflow поэтому все эти стили уже сразу же пересчитываются вы можете увидеть из-за как раз таки вот кода Код бокса произошел такой неправильный так скажем результат поэтому здесь я вам не советую
00:37:52 - 00:38:55
какие-то важные вещи тестировать Если хотите что-то протестировать Лучше самому быстренько за это опять проект это будет более надежно для того чтобы какие они тратят 3-4 часа своего выходного дня хорошо Смотря кстати еще один интересный вопрос Вот например если я создам какой-нибудь равняется получается такими элемент здесь и соответственно сделать когда Тиф у нас еще документ возвращается знаешь или нет ну и в целом любые там замеры объект случае если у нас находится то есть Мы создали элемент
00:38:24 - 00:39:34
[музыка] не помню какие-то методы были точно там где-то balding Clean Red Точно он вызывает это событие Все заново генерится то есть начали происходит потом repaint и композиция для анимации плохо меня не реанимации имел ввиду что происходит сразу происходит последний момент допустим у нас есть какой-нибудь элемент Ну тот же Давай скажем так делали селектор Да правильно селектор селектор здесь селектор селектор и получается Здесь мы вызовем николайн трек и получается говоришь Я просто что-то подразумеваешь документа
00:39:14 - 00:40:46
ми в храме в браузере этим методы там например как когда я помню на самом начале говорил свет или там грамм то меняется только replay происходит А если мы вызываем этот метод то он происходит самого начала происходит это все правильно что ты меняешь Ну то есть ты говоришь что когда мы вызываем паутинг лайн трек у нас по сути синхронно вызовет все эти стадии да то есть а получается вот например у нас вызовется синхронно там только reflow либо же ещё репенди Композит также синхронно вызывается [музыка]
00:40:19 - 00:41:46
Смотри Вот у нас допустим есть какой-нибудь кусок кода где мы синхронно вызываем проект допустим у нас поменялись или то есть мы поменяли там какой-нибудь высоту чего-то потом вызываем проект и соответственно у нас уже три Герца Ну то есть должен за триггерится reflow Да я говорю у нас три только reflow либо же за триггерится все то есть экран перерисуется у нас будет репейнить и потом переписывается [музыка] по идее он должен сейчас перерисоваться и вернуться все значения этим всем Ну смотри тогда такой вопрос представим
00:41:10 - 00:42:22
что мы какой-нибудь Форд делаем там да то есть у нас есть for скажем там не знаю короче ладно давай просто слова допустим нас for есть там тысячу тысячу раз мы проходимся тысячу разбавлять проект у нас за это время тысячу раз экран перерисуется Ну как нет Допустим мы меняем стиле беременности также или только будет пересчитываться позиция экран должен присылаться все три стадии по идее же не совсем то есть обычно как ты замеряешь у тебя будет Force Free Flow если в этом смотреть перформансе и соответственно а
00:41:55 - 00:43:07
смысл тебе экран перерисовывать если как будет время не пришлось там сколько например 60-120 правильно всем тебе тысячу раз перерисовывать смысл жизни с точки зрения Ну да по идее обычно этот метод вызывает точно Типа все три стадии вот гидпауник Ой где сейчас Дени наверное Ну ладно не вообще по идее то есть вызывается обычно форс-рефлов Ну то есть по идее если там какой-нибудь и цвета и так далее тоже можно вызваться вот перерисовка по идее перерисовка своим отдельным миром живет Я не слышал сейчас вот это форс-рефловый
00:42:41 - 00:44:15
называется то есть рифлоуин обычно сам происходит Ну как бы браузер как обновление экрана и так далее своей жизни живет пересчет стилей Ну а когда ты по сути вот берешь и дополнительный трек типа Дай мне сейчас мне нужны размеры вот и по сути заставляешь браузер пересчитывать сверху поменялись стиле здесь не знаю там не знаю дисплей там ну ладно ставил дисплей например поставил какой-нибудь там дисплей [музыка] например Flex один выставил один а вот и получается что вот я поменялись какие-то стили которые
00:43:47 - 00:44:53
потенциале могут изменить размер браузер это сразу не будет читать он будет ждать когда он придет время пересчет потому что ниже опять Может там дисплей на блог поменять и так далее вот прям анализировать так не может ну и соответственно коты вызывать по сути браузера Дай мне размеры текущие А вот ну и соответственно ему надо пересчитать сейчас синхронно это как раз Форс заставляешь как будто браузер пересчитать нужно актуально а ну вот Ну окей Я говорю так в любом случае надо перепроверить а то что он там с этими
00:44:20 - 00:45:27
дачу с анимациями Окей Так значит погнали Дальше смотри Давай попробуем наверное Задачка интересную поделать на замыкание это не помню этого аудио но публично собеседованиях или нет допустим у нас есть функция сам и как она должна работать опишем допустим если я делаю Сам у меня возвращается здесь 0 затем соответственно если сюда передается например один вот так вот будет один допустим два два Ну короче думаю Смысл понял пустая пустой вызов как бы этот как его пустой вызов функции он как раз таки
00:45:00 - 00:46:31
говорит о том что пора вычислять если функция называется числом тогда ну то есть возвращать другую функцию которая потенциале может еще принимать дополнительные аргументы для сложения функции может сколько угодно вызывать по сути и Ну давай [музыка] так с а функции не трогать да то есть [музыка] написать в плане не совсем вопрос понял имею ввиду в тележных функций писать код да да в теле функции Ну аргументы тоже можно сейчас [музыка] функция заранее получаем число какое-то [музыка] мы возвращаем реализацию
00:45:45 - 00:47:33
в любом случае рисовал плюс равно получили [музыка] Так ну и получается сумма сразу же может тоже получить аргумент [музыка] Так значит этого не подумал сейчас посмотри Вот видишь у нас получается можем такой кейс есть такой кейс такой [музыка] [музыка] возвращаем себя же самую функцию так получается мы возвращаем А туда рисовать получается Для чего Нам нужен если на то есть это мы возвращаем [музыка] так сложно [музыка] Если удобно То есть просто времени тратили Поэтому так сделал так получается мы создаем рисоваться
00:47:31 - 00:49:11
то есть 0 если у нас на мотив это функция А вот смотри получается что у нас будет вырезался суммировали да получается 0 будет здесь мы возвращаем 0 если так случается если второй мы то есть складываем плюс плюс один у нас один возвращаем сумму да потом при повторном вызове что будет Ну то есть мы возвращаем сумма у меня контекст уже нету следующего сума который ты возвращаешь на вот этот ритуал ой Сейчас подумаю понял что я говорю да [музыка] начало [музыка] функцию [музыка] Salt плюс Ага хорошо и я
00:49:22 - 00:51:03
[музыка] купил и а получается так Ну смотри хорошо Значит мы сделаем вот так здесь у нас обработка первого кейса потом отскакивает создается добавлять результат результат появляется вот так вот добавляется хорошо все так Ну так вообще в целом Давай скажем так здесь бак найдешь его или нет никаких не обрабатывать можно смотреть Да хорошо [музыка] [музыка] так хорошо значит Давай все затестим Сейчас да еще раз посмотрю отрезал 0 если это вот этот кейс если такой так кажется что-то Давай попробуем вызвать эту функцию так
00:50:57 - 00:52:32
получить 0148 хорошо хорошо Все правильно супер на самом деле кажется что можно было бы попроще чуть до написать если сразу же вызывать прощения Ну по идее Если я говорю сейчас меня в голове этот люков нету то можно пойти как будто вот так сделать И вы будете Ну да теперь вот здесь по идее тоже можно удалить называется так должно работать если что также работает и получается меньше года получается меньше прикольно так хорошо Хорошо давай теперь наверно уже перейдем к реакту в целом довольно совсем идем
00:52:26 - 00:54:03
Давай первый вопрос такой реакту Смотри допустим у нас есть он понял здесь у нас идет спрятан пропуск Вот и например вы также Можем написать что-то такое jsx Ну правильно можем сделать вот так вот фигурной скобки написать либо же вот используя компоненты И вот так вот А можешь рассказать чем разница между двумя этими способами они знают двумя этими методами использования компонентов из них правильный и почему [музыка] Вообще первый ряд [музыка] [музыка] Ну как раз таки мы сразу позволим функцию без
00:53:21 - 00:54:55
обертки этой да какие-то менее правильным Точно не скажу но придет и по идее поведение порядка будет много нарощенными а так конкретно какие-то причины рассказать не может например Ну вот если например что-то то есть например что будет работать в таком синтаксисе не будет работать в таком либо же наоборот может быть [музыка] Так что возможно так сейчас никогда хорошо на самом деле Окей на самом деле вот в таком кейсе куки не будут работать в некоторых случаях Давайте и зрителям думает тоже интересно будет
00:54:50 - 00:56:17
например Здесь опять же здесь нам какой-нибудь здесь будет сработает или нет Не сработает надо будет руками добавлять этого я уже почти написал так получается нам обратно идем получается Здесь допустим нам приходит который изначальный А и Давай скажем что нас здесь никакой логике нету Просто рендерится подсветка на клавиатуре включил случайно Ну да ладно сейчас включать долго будет Значит есть каунт ставим так получается ну и соответственно Да спасибо можно написать Вот так вот компания Вот И давай сразу два метода напишем и
00:55:48 - 00:57:18
вот тут напишем component здесь у нас будет Нам получается также 10 Давай скажем 10 будет Вот смотри кажется в таком случае у нас работает Не можно оба варианта ставить разницы нет у нас в таком случае все работает Это черный диск закаменчу хорошо получается [музыка] не не Без апдейта [музыка] Нет на самом деле смотри Ну давай не Ладно давай давай он Клик это будет тоже показательный пример Ну окей на самом деле это тоже можно показать даже проще сделаем смотри Давай попробуем как раз сделать Давай сначала этот вариант оставим
00:56:47 - 00:58:28
правильно его здесь и вот смотри попробуй нажимать на десятку у нас арендуется видишь где видно Ну получается разница в чем то есть ну видишь у тебя по сути получается реакт не понимаешь что телефона компонент разворачивается внутри А по вот и не как бы не область видимости Аля такая условно внутри компонентов обновлялась теперь будет Смотри это даже не столько область видимости Ну ты имеешь ввиду контекст обновления Окей я говорю область смотрите здесь получается такая история что реакция вот в таком случае когда мы
00:57:44 - 00:59:11
используем функцию даже не понимает что это в целом как компонент думает что это просто какой-то кусок кода который разворачивается Вот и по сути Так вернуться по сути а реак здесь не понимает как раз таки он оценивает как хук на самом деле кастом если ты зайдешь в эти в тулзы сейчас надо заходить не буду Он как раз вот этот компонент покажет хук там уже знаешь на компанию там справа Хукс есть там типа стоит эффект и так далее У тебя вот будет компонент написано Он скажете кастомный хук и например смотри допустим
00:59:08 - 01:00:13
если я возьму и сделаю вот так вот и мы здесь делаем например смотри Давай здесь тоже какой-нибудь каунт добавим потом раз раз Так значит здесь история такая писать не буду Например если у нас здесь будет Допустим какой-нибудь If там гуляем Да мы здесь делаем returnal допустим на сам первый рендер вернется нал Затем что у нас будет затем нас на последующие Рендеры а вызовите компоненты хук у нас выкинет ошибка скажет реакции не могут быть находиться должны быть Ну короче с одной стороны должно быть как будто бы
00:59:50 - 01:01:14
он не поймет что это отдельный компоненту который внутри есть он скажет что это ну как бы он подумает что это относится Поэтому соответственно стоит сверху например будет добавлять какие-нибудь или будете терминарные операторы будут скажет что типа не так нельзя короче неправильно будет выкинута Вот поэтому вызывается так Хорошо давай на немножко поговорим про мемонизацию какие вообще методы меморизации Ты знаешь когда их надо использовать когда ты считаешь нужными манизировать качество Нужно не
01:00:36 - 01:01:43
мемонизировать вообще есть два метода цикла это методы короче измена есть еще функции [музыка] создается у тебя другой компонент эту функцию изменились несколько точно когда Ты прикидываешь эти данные как проб сам другой компонент личные функции в нем он нужен для того чтобы у нас каждый раз для таких сложных вычислений на каждый рендер не вычислялись данные записываешь массив покидаешь массив зависимости и изменились тогда уже и вызывает расчет хорошо То есть получается ты говоришь при изменении текстов либо новый колбек
01:01:09 - 01:03:29
либо вызывается который мы передали правильно И ты говоришь нужен только тогда когда мы Передаем функцию другие компоненты Вот например если у нас здесь будет какой-нибудь Клик допустим также добавить Клик Давай скажем сюда перенесем здесь у нас будет [музыка] у нас будет Вот такой вот он Клик Клик здесь у нас получается аккаунт здесь у нас будет Клик Опа так и здесь у нас будет 0 Так у нас ошибка получается где-то Мы что-то неправильно писали здесь горный так получается консоль вот значит так я забыл сказать Вот смотри если смысл
01:02:55 - 01:04:41
Сейчас давайте запишем функцию которая будет называться [музыка] вставляем вот сюда если смысл функцию [музыка] то есть компонент будет дочерние рендерится на каждом обновлении Ну да то есть получается Если мы так сделаем все заработало нужно обернуть в небо компонент хорошо Давай вернем сейчас так [музыка] оборачивайся работает Окей хорошо Так сейчас но если минус то как у нас например Каждый раз будет создаваться если они изменяются разные компонентах другие которые изменяется тогда уже полезно
01:03:58 - 01:05:48
будет один аккаунт есть эти всего один стоит получается Смотри я правильно понял что ты говоришь что нужно использовать иммизациями У нас есть много стейтов в компоненте Цивилизацию когда вообще поиски есть но например в таком случае у нас она не особо нужна То есть у нас компонент F который всегда будет иногда всегда будет выделяю Вот если бы мы добавили какой-то каунтер 2 на 2 и вызвали еще раз это компонент только один перерисовывается один компонент а второй будет минимизированный не будет все я понял
01:05:26 - 01:07:08
о том что использовать Нет я понял о чем ты говоришь ты говоришь что типа здесь в любом случае обновится аккаунт поэтому любом случае обновится компонент типа смысл от этой меморизации То есть я понял окей хорошо окей потому что я тоже часто такое замечаю что в итоге получается Столько стоит компонент и обновляется обычно на самом деле тоже раньше Я посмотрел потом я понял что проще больших командах наверное сделать так чтобы везде все минимизировали и не заморачиваться с различными спорами Нужна ли здесь или нет И так далее Но
01:06:37 - 01:07:52
тогда валидный Поинт А смотри а вот давай мне такой вопрос Да вот мы здесь в данном случае используем функцию апдейтаров вот с ней знакомства перед старой стоит передается новый вот у меня такой вопрос почему вот просто мы не можем например вот так написать аккаунт плюс один пример я буду нажимать у меня всегда будет один Вот например если мы ставим несколько раз у нас значение будет 0 то у нас В итоге будет использовать функцию аккаунт ее использовать на каждый раз будет брат значение [музыка]
01:07:17 - 01:08:43
старое из функций не это я значение перед будет значение тебе браться перед обновлением был а именно уже следующий После выполнения функции функция будет Counter равен одному но вендорами происходит потом произойдет функция вызовется Один плюс один [музыка] вызвали просто функция Просто у нас всего один а нет все правильно сказал но здесь Вопрос немножко не о том то есть нет Ты правильно рассказал о том как работает callback то что у тебя передается такой значение и потом соответственно Ну как бы если несколько раз его вызываешь
01:08:10 - 01:09:45
здесь это будет актуальное значение ну так скажем сохраняться даже которые только что обновил вот и ты еще упомянул батчинг Но вот это вот это не совсем патчингу относится Ну то есть Ну смотри Ладно давай вот я хотел другой вопрос задать Ну давай пойдем по баню сначала синхронный код Раньше он уже не бачился чтобы были разные обновления нет это все правильно но я просто не совсем понял как у нас функция апдейтер относится к батюгу две вещи связанные можешь объяснить просто связь немножко [музыка]
01:09:21 - 01:10:30
Окей хорошо смотрел Вопрос такой вот например этот код У нас есть он в реакции 17 были нет Вот как сейчас у нас написано 17 [музыка] так подумать Ну а синхронные таски Я помню точно не бачились события всякие события по моему тоже или Да там событие на самом деле Буду во-первых в 17 Насколько помню то есть Call Backs использовал все что внутри вот допустим допустим Клик здесь будет Короче смотри какая история была все что вызывалось реактом оно было захвачено что это было Например если у тебя апдейтов без
01:10:38 - 01:12:07
эффекте то есть эффект вызывает эффект и там происходит обновление стоит там происходил патчинг внутри скобках тоже происходил патчинг Внутри ивент-хендеров тоже происходил патчинг не произойдет Например если мы возьмем сделаем вот так вот и уже там дальше синхронно идет в таком случае у нас не было батчинга так сейчас секунду таком случае нас не было бачинга и например таком же случае у нас например смотри насколько я помню если был Клик вызывался внутри промеса за право обработки ивента был бы в самом
01:11:24 - 01:12:27
обработке ивенты есть патчинг потом мы вызываем хендал крик асинхронно и handle Click сам является кулбэком все равно здесь бачин сработал потому что ну как бы на Скотт вызывается своим реактором То есть все что вызывалось реактом а то есть это был диск B1 эффект и венхандроз любой код который называется самим реактом он получается батился вот а соответственно когда асинхронное внутри кода который вызывается реактором то там уже реак не понимает контексте вы запомни что асинхронная точно не бачилась
01:11:56 - 01:12:52
какой-то второй кейс был не помню вещи смотри хорошо давай просто вернемся к тому вопросу Окей ну просто я говорю да для других рассказываю в целом тоже полезно знать [музыка] Но это такая самая простая ментальная модель смотри получается Здесь у нас есть аккаунт каунт плюс один вопрос был такой то есть у нас есть апдейтер но у меня Вопрос был Почему вот мы не можем писать И почему не можем просто вот так вот брать и обновлять аккаунт [музыка] ты имеешь в виду без использования или как Нет ну именно с использованием скул бэка
01:12:26 - 01:13:49
даже вообще давать такой вопрос более глобальный задам для чего вообще Нам нужен например Для чего нам нужны deps почему Ну то есть они чтобы отслеживать отслеживать зависимости и при изменении зависимости мы заново генерируем функцию правильно это все правильно хорошо но Смотри я говорю а вот логически Зачем вообще нужны то есть смотри у нас вот помощью мы здесь задачи писали которая была сам у нас же здесь замыкание было так открыл даже замыкание было получается да то есть задача вопрос в том что смотри Почему
01:13:19 - 01:14:34
[музыка] смотри у нас здесь тоже замыкание у нас здесь вот эта функция правильно она создается в контексте Ну то есть У нас есть каунт аккаунт у нас Но это стоит который обновляется Для чего она вообще вот эти депсы добавлять для чего на функцию пересоздать по идее же можем вообще одну один раз функцию создать у нас аккаунт сюда в замыкание будет Вот же у нас замыкание хранится то есть для чего она вообще-то дискулбек Для чего нам нужны Почему Вот у нас намыкание здесь не работает в обычном рисовать
01:14:05 - 01:15:02
писали же и типа наверху нас функция силу и она не будет умоляться то есть кликнем обновиться один станет и всё и дальше в следующем кликов он также восстановился единицей все правильно правильно Давай я просто немножко более такой глубокий вопрос задаю смотри получается почему у нас аккаунт не будет обновляться Но вот каунт же он у нас замыкание стоит один раз нет функции один раз создаться Все правильно но у него же замыкание хранится переменная выше все правильно почему вот при замыкание Давай представим что я первый раз
01:14:33 - 01:15:44
прихожу в реакцию [музыка] так сейчас вот это обновление компонентов Как происходит Давай просто говорю Давай представим что я первый раз на ряд смотрю вот с такой точки зрения у нас каунт вначале навсегда аккаунт обновляется правильно при первом рендерил 0 потом один потом два Почему замыкание не работает у нас вот функция Вот это вот в этот как его вот замыкание она будет держать как раз этот аккаунт почему он не актуальный будет ну то есть у нас вот этот компонент рендерится у нас аккаунт актуально покажется Но почему вот это
01:15:14 - 01:16:09
вот функция замыкания у себя будет не актуальный аккаунт держать Почему у меня не актуальный аккаунт будет вопрос понял ли понятно [музыка] [музыка] Ну отчасти с этим связано с другой стороны если мы в реакте храним те же ссылочные типы данных Правильно мы же их все это обновляем через его табельно мы же их посылки не обновляем же правильно на самом деле зима здесь объект хранился бы у нас такая же проблема была бы правильно единственное мы сделали в этом аккаунт объектом который хранить напрямую свойства стоит
01:16:00 - 01:17:08
брать не это все правильно стоит [музыка] а еще понял понял Наверное что ну что у нас аккаунт она каждый раз когда заново называется функция стоит Вот и у нас новое значение получается А если стоит Почему каждый раз заново вызывается потому что [музыка] экран при обновлении компонентов [музыка] и соответственно то есть не на самом деле ты в правильную сторону идешь Я просто давай на этого не зацикливаться потому что мне тяжело понять ну как сказать это обычно есть такой момент который тяжело сформулировать часто бывает
01:17:05 - 01:19:00
внутри получается когда у нас вызывается этот аккаунт у нас обновляется функция заново вызывается фунт Ну то есть функциональный компонент у нас обновляется компонент но обновление компонента это ну по сути под собой подразумевает обычный перевызов функции Ну как бы вот Соответственно что получается у нас заново называется функция значит заново создается вот да заново хоки вызываются соответственно и что здесь самое главное создается вот этот вот вот этот контекст функции до который вот тут вот он получается тоже новый в нем он
01:18:26 - 01:19:33
аккаунт новый А тот который в прошлый раз создавался замыкание работает на замыкание ссылается нас на аккаунт из предыдущего вызывать предыдущего ну как бы контекста так скажем Да функции Ну понимаете а вот собственно ну поэтому так и получается замыкание работает Просто у тебя не может быть смыкание между вызовами двумя двух функций идет эта функция Полностью заново создается полностью не остается правильно то есть Обычно когда делаешь замыкание У тебя есть какая-то переменная где-то выше и она там сохраняется в области видимости
01:18:59 - 01:19:58
ну и соответственно припал там при повторном вызове функции у тебя Ну как бы идет ссылка на эту переменную А тут ссылка Ну типа идет на ту переменную но та переменная она вообще другая вообще не как бы не относится к актуальным вот Ну соответственно заново каждый раз вызывается так хорошо В целом с этим наверно закрыли Окей смотри Давай наверное попробуем последнюю задачку по реакцию сделать это как раз у нас будет [музыка] а давай простим смотреть Давай представим так вот говорили А можно ли сделать какой-нибудь хук допустим Давай
01:19:34 - 01:20:47
назовем как вот так вот G а соответственно который будет работать точно так же как то есть перед тем как Но ему не нужны будут и он всегда будет иметь актуальное значение у себя в в контексте то есть допустим вот у нас есть Давай скажем так Клик 2 Клик Давай назовем его так вот Клик Table соответственно здесь у нас были stable callback и здесь у нас будет например тот же setcount + 1 и вот если мы используем handle stablet Когда у нас все работает а если мы используем handle Click тогда у нас не работает сюда соответственно можно
01:20:15 - 01:21:33
написать такую можно написать такое хук и если можно то как вообще идеи есть Ну понял да история нас получается как только ему нужно передавать он всегда возвращает функцию которая всегда имеет один и тот же один и тот же референс Однако при вызове этой функции у нас всегда будут использовать актуальные значения из-за компонента виртуальный стоит и актуальные простые Давай просто сначала на словах поговорим не надо ничего писать просто слова поговорим Можно ли такое реализовать и какие есть Ну письменность понял но
01:20:59 - 01:22:04
вообще пойти решение какой-то через стрелку типа ты создаешь репку чтоб значения колбека этого там как-то условно проверяешь типа меня остыли колбек и зависимости от этого значения вторая или не спелые возвращаешься заявку так я правильно понял Смотри Ладно ты возвращаешься с этим рефом что надо делать то есть у нас Давай скажем так ну нет все правильно сказал через все правильно конечно нужен реф мы создаем реф Ну давай просто можешь на словах просто объяснить как это нам поможет во-первых с точки зрения
01:21:34 - 01:22:47
вот у нас есть Мы каждый раз в него перезаписываем значение колбека который нам приходит Ну то есть у нас каждый раз когда обновляется колбек и соответственно туда там у нас переписывается рефточка вот дальше получается этим можем сделать как он здесь может помочь а при повторном рендеринге возможно то что нас реакция он может несколько раз обновить страницу но не монтировать ее пока что рендеринг делает потом происходит событие и он первоначально выполняет какой-то большой обновление вот И для
01:22:18 - 01:23:32
этого нужно чтобы мы [музыка] возвращали старый старую девку при неудавшемся неудавшегося рендеринга не совсем ты здесь про кон Карен мод говоришь реакция не совсем ну а что ты подразумеваешь под неудавшимся рендерингом был у нас например реакции какой-то запускает какой-то большой большой рендеринг происходит какие-то большие расчеты вот словно и пользователь кликает на мышку и это будет у клика выше обновление экрана Почему обновление стоит большого в начале условно обновиться события на Клик президент
01:23:00 - 01:24:47
потом уже повторно будет вызван будет новый рендеринг Вот например [музыка] я просто связи не совсем понял какое-то отношение к нашей задачей Давай просто более детально ты сказал с реформ Да вообще есть какие-то идеи примерно давай колбэк а смотри он должен работать точно так же как usculpack вот Давай скажем так что у нас есть вот такой но это на самом деле бесполезная запись Давай скажем так что вот у нас есть такая запись правильно И у нас как видишь Клик никогда не будет обновляться правильно он всегда будет
01:24:05 - 01:25:25
иметь Это один и тот же референс потому что у нас нету ну как у нас не меняется мастер правильно Вот я говорю про то чтобы у нас была функция был колбеков которые не надо некий дебса прокидывать надо некие функции апдейтеры писать то есть ты пишешь Вот так вот у нас все работает то есть и функция Клик ставил тоже не меняет свой реферику использовать чтобы мы возвращали Ну свойства и разные версии да да [музыка] [музыка] [музыка] функция должна вас возвращаться какая-то при чтобы возвращали саму репку а потом
01:25:00 - 01:26:29
мы скидывали значение ref.carent прикидывали значение ref А как это поможет [музыка] Окей ну просто смотри в чем прикол нас сейчас получается у нас получается мы создаем реф мы оборачиваем меняется мы заново обновляем наш реф правильно набрать потом обратно разворачиваем его возвращает точка немного напрямую как алгоритм реализовать чтобы мы болели вот этот колбек каждый раз новый и возвращали его только вообще на самом деле Ладно давай просто что времени затягивалась и вот так вот можно сделать
01:26:17 - 01:27:43
аргументы То есть у тебя получается как будто бы вреп завернул и развернул Понимаешь вот так тебе нужно какой-то постоянно стабильную функцию возвращать а внутри нее уже использовать этот нестабильную через реку используется тем что ссылка на реку нас никогда не будет меняться ссылка будет одна и та же Однако Коран будет разный ну и соответственно можно затестить наверно [музыка] вот соответственно кликаем видим у нас происходит так подожди а сейчас у нас вполне до конца все правильно работает компанит это мемас
01:27:35 - 01:28:50
рендер все равно есть Так значит Да вот здесь что с Мема вещь мы к вам сюда все равно Передаем но не используем его понял проблема да то есть как у нас ряд мимо не понимает кем мы просто используем это нормально вот такого теперь нас реки рендеров нету а здесь у нас Консул влог рендер хорошо значит происходит рендера нет OK Значит значит Давай на этом наверное заканчивать Давай быстренько дам фидбэк по собесу там получилось довольно таки бодро мне понравился особенно вот с решением с тем же самым то есть некоторых местах
01:28:32 - 01:30:00
рассказывал но до многих вещей сам доезжаешь ивент-лупом тоже хорошо здесь вот анимациями ни у кого не хорошо Мне тоже надо посмотреть как страны получился видать где-то здесь снова пробелы есть соответственно потом после таймаута по всей истории Прикольно смотри какой момент есть сразу скажу тебя часто бывает такое что это вопрос до конца правильно понимаешь ты начинаешь вот прям все рассказывать по этой теме есть вот это Есть такая тема есть например как здесь последнее что я помню с колбеками
01:29:16 - 01:30:32
может и начинать рассказывать там у нас вызов такой есть у нас такие моменты есть Ну короче начинаешь много вещей различных рассказывать которые не совсем относятся к вопросу да то есть и ну как бы иногда бывает что начинают дополнительные вопросы вот по этой теме задавать уже в другую сторону идти Я просто говорю что наверно лучше было бы тренировать как раз наверное какой-то такой навык нельзя тренировать может быть попробовать почаще вопросы задавать чтобы ну когда не понятно о чем я хочу тебя спросить не рассказывать просто все
01:29:54 - 01:30:51
что знаешь по этой теме а именно понять чего тебя хотят вот так у нас получается некоторых моментах будто бы немножко затягивался в другую сторону уходила а также наверное момент есть я не знаю просто может сильно волнуешься то что мы записываем сейчас но вот иногда бывает с формулировкой прям очень-очень сложно То есть ты пытаешься что-то сказать я вот слушаю и знаешь что такое ну как бы это я как будто бы несколько вариантов понимаю из того что ты сказал и как бы вот несколько вариантов есть как это
01:30:22 - 01:31:19
можно понять ну вот например как бы здесь Было помнишь стоит вызывается заново Ну ладно это Примерно такой сложноватой на последний был она вот как будто Вот Эта мысль донести то есть вот она заново вызывается функция по Ну как у нас там к функциональный компоненты это обычные функции Каждый раз когда происходит заново вызываются соответственно все вызывается Заново там типа создаются новые переменные и замыкание Больше не работает вот в этом плане Мне кажется вот и белую прям болезни всего было бы наверное навыки
01:30:51 - 01:31:49
коммуникации потянуть или собеса потому что здесь опять же наверное от человека зависит только поймет [музыка] а так в остальном наверное Ну то есть по поводу По поводу хуков По поводу рефов и так далее наверное чуть потянуть можно вот меня типа этот как его есть порефом видос может его посмотреть может также почитать и в целом такие кейсы наверное можно посмотреть в различных библиотеках там всякие реакцию и так далее там много есть всяких рефами Может просто найти различных муки смотреть есть что-то
01:31:20 - 01:32:20
непонятно Ну типа смотрите значит фишку хуков смотришь там представляешь как бы это реализовывал если не понятно берешь заходишь смоешь Как это сделано в остальном как бы да ну то есть я говорю вот здесь вот по поводу По поводу всей истории тоже можно освежить с этими надо посмотреть кстати Потом в личку отпишу тоже еще может быть видос вставлю вот в основном наверное год в целом понравилось как прошел соответственно коммуникации поработать и какие-то проблемы залатать Спасибо большое У меня тоже понравился
01:31:50 - 01:32:52
очень интересные вопросы интересно задачки были не было каких-то там примитивных там типа взвести по Назовите по данных какие там есть такого не было немного не понимал вот говорил немного не понимал вопрос пытался сам скорее довести решение которое ты имеешь ввиду Не слушался вопрос А это есть немного Ну да Не наверно просто было бы проще всего Если пересетал были бы там сказал бы немножко не понимаю Можешь подробнее объяснить Ну то есть оно мне кажется в целом было бы лучше что времени меньше
01:32:23 - 01:33:40
потратили бы на какой-то лишних разговоров не было которые могут еще значит дополнительные вопросы более четким наверное здесь в этом плане может быть полезно у нас как бы такой Больше он не прям супер такой стрессовый Собес на работе ответил ответил но тем не менее мне кажется можно потренировать так есть Давайте сказать Окей хорошо Так ну всё дорогие друзья на этом У нас все Если вам понравилось видео Обязательно оставляйте лайки делитесь друзьями пишите комменты также не забывайте подписываться на телеграм
01:33:01 - 01:34:01
канал там каждый выкладывает дополнительный пост можно записаться на такой же мог собеседование отправить свой проект Спасибо за просмотр всем хорошего дня всем пока
01:33:35 - 01:33:54