СОБЕСЕДОВАНИЕ НА FRONTEND РАЗРАБОТЧИКА | REACT TYPESCRIPT

Транскрипция видео:

• Итак дорогие друзья Всем привет Сегодня у нас будет очередной собеседование в гостях у нас Андрей привет Андрей Расскажи немного о себе Да всем привет Не 19 лет получается коммерческого опыта у меня около полугода в основном я на реакметьев писал всё это временно вот недавно мне дали админку с нуля писать на стандартном стеке реакт тайпскрипт редакс Я считаю Windows вот так вот а по уровню получается у тебя сколько сколько лет опыта и примерно так сам себя как оцениваешь там миддл Джон Джон плюс

  00:00:00 - 00:01:03

• что-нибудь такое-то Ну и получается на фрилансе где-то плюс-минус работал мне очень не понравилось то что во-первых денег мало по сравнению с обычной работы во-вторых гораздо больше Ну как сказать суеты постоянно нужно искать новый заказ и так далее ну да ну и получается вот в офисе в галере работаю сейчас полгода то есть суммарно где-то год хочу у себя оценивать как Мида ну в основном решает собеседующий поэтому Сейчас узнаем понятно понятно хорошо Давай начнем прямо с такого разминочная Китая Нет

  00:00:31 - 00:01:54

• давай нужно написать функцию вообще как угодно Консул Лог Так значит подсветка очень странная и она что будет возвращать то есть она каждый раз возвращает на один больше да то есть там будет Сначала один потом два Потом три потом четыре потом пять Давай даже сделал с нуля начинается один так будет логичный можешь написать функцию ID попробую ничего не принимает [музыка] нужно какое-то хранилище [музыка] тут тут и как замыкание будем хранить что-то здесь вот будет соответственно лет иди мерите он плюс

  00:01:12 - 00:02:47

• ID + Окей можешь написать юзать Ну то есть сейчас функция чтобы возвращать получается она возвращает функцию Да нужно чтобы она возвращала соответственно значение а не функцию а то есть это в другую функцию возвращаю де плюс плюс Ну да да что тебе нужно сделать чтобы получить функцию ID тебе так сохранили это значение я должен возвращать постоянно новое значение этого ID чтобы получить верно а мне нужно просто возвращать значение соответственно верхнем уровне где-то я должен Давай я тебе скажу Так у тебя не

  00:02:21 - 00:03:46

• обязательно функция Вот это должно называться иди То есть это должны просто сделать чтобы у тебя в конце концов была переменная ID в которой хранится функция и которая будет возвращать новое число то есть там как это все будет написано это неважно не надо привязываться к тому что тут функции уже один назвала тебе надо как-то в ней там что-то пошаманить сделать как тебе удобно самый удобный Да но какая проблема сейчас то есть во-первых то что функция Вот так Ну да написать но можно так сделать Да хорошо

  00:03:18 - 00:04:32

• Ну а можно было на самом деле эту функцию которую ты уже написал просто назвать где-то Иди и сделать это вот просто так и сделаешь но да ладно ладно давай на этом не зацикливаться Хорошо давай про эту задачу забудем и пойдем дальше Что еще можно дать смотри Слушай а ты знаешь как можно же скриптаться втирать массив например 2 сделал так вот один восемь девять три Пять два шесть и как вот например Давай отсортируем от большого к маленькому число консоль и нужно передать функцию которая Принимает два параметра

  00:04:05 - 00:05:40

• Ну получается она будет сортировать по-моему по возрастанию Да есть по убыванию туда как по убыванию Наверное нужно писать B минуса Ну а ты помнишь как это работает вообще история то Ну то есть значит Также можно свои там проверки писать здесь не обязательно этого объекта там как это работает это работает Так что сортируется по-разному зависимости от возвращаемого этой функции значения мы возвращаем да это все либо 0 в зависимости от этого она будет по-разному сортироваться один это Что это значит что все правильно стоит или

  00:05:07 - 00:06:30

• надо поменять значение местами один сейчас это логически может задуматься на самом деле это такой большой вопрос на математику наверное то что все Правильно Потому что плюсовое значение Но это значит наверно мы ничего не делаем как раз таки А вот если один тогда мы перемещаем элемент на один вперед смотри Давайте Вопрос такой там я на самом деле сам это Постоянно забываю Но знаешь как я определяю Попробуйте навести смотри нас типа А минус был сортирует по возрастанию правильно А это первое число например Это один и

  00:06:04 - 00:07:20

• восемь да Получается что если у нас это сортируется по возрастает значит что будет то есть типа это первое число b второе то есть если минус один У нас то это первое число это 28 А минус будет А минус 8 до нам нужно по возрастанию отсортировать Ну то есть давай вот вернём консулок я просто сейчас покажу как я до этого дохожу а Вот потому что ну то есть это прям как будто Смотри вот типа видишь у нас может консоли открыть у нас по возрастанию числа отсортированы правильно вот получается А это первое

  00:06:43 - 00:07:56

• число b это второе число и получается есть один минус 8 сколько это будет отрицательный минус 7 правильно то и выглядит так что в данном случае в данном случае то есть типа есть отрицательно возвращалась вперед Короче ладно не я к чему это все говорил я это говорил к тому что получается если минус один то получается число первое оно двигается назад как будто бы понимаешь Смотри вещи возвращаем минус 1 у нас массив полностью переворачивается вот ну и получается А минус B то есть да типа А минус b если а меньше 8 значит

  00:07:22 - 00:08:45

• должно влево идти восьмерочку Должна она получается на подальше соответственно Ну да да не восьмерочку то есть получается единица должна влево идти вот ну то есть другой метод например просто B минус а делаешь это будет по убыванию да то есть получается восьмерка например минус 1 это положительный будет то есть один надо 8 -1 как раз таки это будет положительное и мы двигаем мы двигаем вперед вправо двигаем здесь положительные мы двигаем вперед это значит оно больше Вот а если негативное значит налево то есть

  00:08:04 - 00:09:23

• ну как это этот тупой примерно просто как бы этот свой мыслительный процесс запомнил что А минус бы это знаешь типа этот как его по возрастанию сортировать и потом на основе этого можно уже Как определить что к чему Но это такое нет синтаксис в целом норма кине просто Оно часто полезно бывает если там таблички не делать Что означает сортировать которые не не совсем Короче так скажем этот Да так хорошо Давай попробуем сделать вот так вот такая задача нам нужно написать две функции это Map и это функция фильтр

  00:08:48 - 00:10:08

• через ре дюс то есть два не принимает я пишу самых хотя давай Давайте сам напишешь лучше надо написать функции мам и надо написать функцию фильтр и использовать под капотом а вот но они принимают массив какой-нибудь из чего угодно потом индекс насколько я знаю и третий аргумент я не помню потому что его не использовал по моему оригинальный массивы Возвращается Они стоп если это не функцию принимаем массив какой-то колбек который должен выполнять на каждой массив редиус принимает в себя callback функцию

  00:09:34 - 00:11:03

• которая параметры по моему на предыдущее значение то есть Это вроде аккумулятор называется и текущая и на каждое значение массива я должен вызывать это все должен сделать новый массив это делает R типа него будет такой же какой-то массива так так так так зачем ты не рейса сзади с используешь вне Ну чтобы кушать получается значение потом вернусь от новый массив а редиска работает можешь рассказать или нет Deus он на каждое значение он как бы если у тебя массив первым он вызовет аккумулятор как простой массив потом с ним можно будет

  00:10:36 - 00:12:29

• что-то сделать А ну да она возвращает одно значение нужен так и на каждый массив дюс Valio и индекс берет еще соответственно потом мне нужно возвращать изменять аккумуляторы возвращать его аварию прокидываем в колбек это что-то возвращает пятерку Так значит возвращать его немножечко с типами можешь поправить или нет сейчас если это ты Я сделал по сути Валя нас так как мини неизвестно как бы принимает Еще сюда аргументы Я почему я не у тебя все правильно было вообще работать или нет Да знаю как бы

  00:11:51 - 00:13:45

• можем использовать одну функцию для разных типов [музыка] и сюда принимать так это массив ST сюда принимаю элемент так и все равно что-то мне подчеркивает Почему так так смотрел эти подчеркивают из то что у тебя reduce у тебя аккумулятор не затипизированного здесь тип у него будет 100 массива То есть тебе нужно сделать вот так вот Давайте чуть помогу так Окей Вот матч за скол а ну и него это мы возвращаем [музыка] такого же типа значения вес Так ну ты неправильно возвращаешь что здесь так хорошо А смотри вот колбек ума пол

  00:13:12 - 00:14:46

• Что принимать то у него только элемент принимает или есть какие-то значения а он еще индекс принимает себя точно индекс и есть еще по-любому какой-то значение третье но я не помню что за что она отвечает Ну хоть от Зарядки есть по поводу третьего значения наверное этот же массив правильно Наверно этот же массив Ну да да правильно оригинальный массив оригинальный массив Так ну это еще у нас не обязательное значение это обязательно обязательно Почему обязательно должны Можно без них же написать этот колбасу

  00:14:23 - 00:15:47

• Ну ладно ты Кажись неправильно понимаешь как typescript работает ну можно конечно так передать Но я бы сделал так но это смотри как ну хорошо это в целом а хорошо Хорошо что у нас там получилось нет слушай довольно таки Прикольно конечно скриптом тебя я так понимаю немножко этот Не идеально но в целом в целом написал с небольшим С небольшой помощью хорошо Хорошо давай теперь фильтр фильтр то же самое Это а нет фильтра он возвращает мотив зависимости от условий которые возвращают функции по сути то же самое

  00:15:14 - 00:16:49

• который себя принимает в принципе то же самое индекс оригинальный массив Так теперь аккумулятор такого же типа так и это у нас Арт изначальный массив call back возвращает типаж буллин значение [музыка] в зависимости от этого пуля назначения будем прокидывать вот стресс принимает Элен соответственно опять же callback в плане индекс [музыка] Если вдруг по-моему можно еще так написать если рез будет равняться ru кода а если он будет false Вот это выполнится тут они и возвращаем аккумулятор Так значит

  00:16:20 - 00:18:21

• Ну ладно это нормально нормально запись в целом Да еще раз еще раз пробегусь по тому функция Resort здесь все норм redeus Index Original рейка индекс Хорошо хорошо выглядит нормально выглядит нормально так в целом неплохо лантана после того как с первым стрессом помог вроде получилось а ты как это до этого Задачка решал такие или нет писал Слушай я проходил исследование мне так получилось с первого собеседование прошел в принципе поэтому я очень мало было на собеседовании соответственно такие задачки практически не решал То есть это

  00:17:58 - 00:19:26

• мой первый опыт Ну ладно Неплохо неплохо так так так так так так так так так так чтобы еще дать Давай попробуем наверное довольно таки то интересная Задачка Давай в первую очередь поговорим про промисы не буду спрашивать что это такое ты так знаешь но можешь показать пример использования промеса какая-то асинхронная операция допустим запрос на сервер требует кроме с этим работать он кроме этот конструктор принимает себя два этих параметры которые принимаются два параметра тут уже мы делаем какую-то асинхронную

  00:18:42 - 00:20:07

• операцию условно вот допустим ту операцию как-то Мы решили что вот Успешно все завершилось и в Operation Зов вызываем с каким-то значением можно вызвать Потом взять допустим а резов и реджект они должны сразу вызваться или они могут потом вызваться через какое-то промежуток времени они могут вызваться потом какой-то промежуток времени для того чтобы по-моему если можно написать два раза подряд и второй будет отрабатывать как раз таки как реджект для ослабления Ну я Может ошибаюсь Ну можешь привести

  00:19:37 - 00:21:07

• пример о чем ты говоришь То есть можно например тут не качь писать Вот так за а не нет а 2 Зона Как будут работать ты можешь предположить после как я тебе сказал что это не будет работать как Ну она будет работать получается как То есть если здесь что-то Вернемся умноженная надо попадет сюда и можно с ним что-то уже хорошо а вот смотри если будет Вот так например Zen Zen Давай еще какой-нибудь добавим здесь сейчас рез умножить на 2 так смотри если будет Кетч здесь например будет Консул Лог эррор Да и потом после

  00:20:49 - 00:22:32

• этого сцен вызовется если вызвать то с каким значением Ну вот здесь консулу вызвать понял Да понял Ну давай Представь нет смотри Давай представим Да чтобы в промес выкидывает ошибку promis rejects у него два Зена стоят друг за другом правильно А вот это стоит Кейдж и потом Zen и вот занят последним что заблокируется если я вызвал формально консулога здесь ю логируется наверное ошибка Если мы здесь смотри Подожди ладно а думаю да А если сделать допустим Давайте продолжим принять а здесь тысячу верну туда здесь 1000 залагируется верно

  00:21:53 - 00:23:19

• Ну я думаю да должно так Да не на самом деле правильно могу даже показать Давай сделаем вот так сюда прокинем дженерик я просто знаю то что оно работает как по сути pipeline то есть такая труба в которой передается значение фазанов и отталкивает Ok да Вот видишь типа появилась появилась появилась что вывелось концу вечера ну да реджек надо Ну вот и сюда появилась короче Короче ладно я сам что-то уступлю Хорошо хорошо справимся мы разобрались целом неплохо Давай сделаем а ты знаешь что делать метод promisall

  00:22:59 - 00:24:25

• Он выполняет он принимает себя аргументом массив из промисов и выполняет их параллельно ждет пока выполнится все хорошо если ошибка произойдет в одном из них то что будет ждать Никто никого не будет ошибка происходит все больше ничего не выполняется А ну больше ничего не выполняется А про мисол что вернет получается кроме соул возвращает массив результатов вроде как массив результатов или же Ну давай вот так вот кроме Sol Так что здесь можно сделать Давай просто формально пишем код сейчас будет ТС

  00:23:59 - 00:25:29

• ругаться по 1 p2p3 Да И вот вернет что вот скрипте какой тип будет Допустим что вот по один по два и по 3 они возвращают намбер да вернется В итоге промез All что ну то есть справа соломкой работаешь Он же не синхронный тоже правильно Ну кроме него выполняется параллельно если происходит какая-то ошибка то есть Ладно Приведи пример просто использование промеси То есть ты пиши Вот здесь как дальше будешь использовать Ну да да верно значит если Zen используешь кроме соул сам возвращает промис Да он кроме возвращает то

  00:24:44 - 00:25:58

• получается Если О все три переданных промысе заканчивается успешно то результатом что у нас будет промиса массив Да результатов а если ошибка то что Вот одна ошибка которую выбросил какой-либо промес Ага все хорошо Хорошо теперь понял окей смотри а давай представим что у нас есть промез All а нам нужно сделать так чтобы ну то есть смотри просел Как работает правильно у нас есть три промиса и мы хотим получить все результаты да то есть он как он работает как только один результат получает ошибку у нас сразу же все

  00:25:29 - 00:26:39

• заканчивается у нас просто реджектится промес и в кетчу мы ловим там какой-то одну ошибку как сделать так чтобы всегда то есть кроме срезался и мы всегда получали 3 результата То есть если там эта ошибка то пускать 3 ошибки будет массиве но мы хотим все-таки конечный массив всех результатов получить как это можно сделать это нужно реализовать просто как я знаю Ну да да у промиса есть по моему метод еще раз повторить что мне требуется Ну смотри Давай вот так вот сделаем все на примере покажу код

  00:26:04 - 00:27:26

• один есть и P2 и P2 делает реджект Да вот смотри Так что сделать это хорошо Да все тайм-аут на передачу секунду секунду так сейчас смотри у нас получается как если мы будем использовать промез All и Передаем сюда P1 P2 до у нас в конце концов поди ошибка Вы видите правильно в кетчу нас просто ошибка пойдет вот а если я хочу чтобы у меня кечника не вызывался а всегда был Zen Вот и всегда был занят всегда приходили все результаты один ризот и по два резал Что нужно сделать но есть такой метод у промеса Я знаю All

  00:26:46 - 00:28:23

• settled Ага если он возвращает нам массив результатов и в этом массиве есть объекты у этого объекта соответственно и значение которое показывает выполнился лепроме с ошибкой либо он выполнился нормально и уже в зависимости от этого можно писать различные мотив результатов там можно проверить что это выполнилось как типа плохо или хорошо Хорошо хорошо все там All setta у него получается retur Так какого будет именно значение возвращать или у него чуть посложнее там будет Ну я же говорю он возвращает массив объектов которых есть

  00:27:46 - 00:29:06

• Валю это то что мы вот тут записываем либо реджект либо реализова есть по-моему статус он называется как раз все верно хорошо хорошо Так круто круто давай туда пойдем дальше а Сможешь ли ты написать функцию promis All сам с нуля то есть вот принимается а давайте назовем так про месяц это будет промес массив промисов каких-нибудь там ти например да напишите пизацы сможешь написать функцию promis All сам Думаю ничего сложного здесь нет запрокидываем сюда промеса Это в любом случае у нас обычный массив поэтому

  00:28:32 - 00:29:58

• можно [музыка] сделать получается мы Передаем массив результатов когда выполнится последний Вы должны Завершить у нас соответственно обычный промес вызываем его это обычный промез промес если кроме Сол возвращает нам массив из результатов [музыка] если это течь мы должны сразу прервать выполнение вообще все функции вернуть этот Кетч [музыка] равно R мы должны прервать выполнение этого принципа если все нормально пройдут запушатся Брейк и Ну и нужно соответственно вернуть Если у нас ошибка значит их рвали

  00:29:21 - 00:31:19

• Давайте немножко прерву Сейчас давай мы еще еще раз то поговорим вот мы говорили с тобой выше что промес ол возвращает что еще раз массив результатов либо ошибку массив результатов или же что-то там что содержит массив результатов кроме скол возвращает массив результатов все-таки не мало возвращает массив результатов на массив результатов Он же не можете синхронно вывернуть правильно можно будет ждать пока эти все результаты появятся значит что он вернет Ну логически он кроме возвращает Да но это во-первых

  00:31:39 - 00:32:53

• Ну то есть давай вот на основе этого попробуем подправить функцию да сейчас кроме значит Return New Promise of reject закомментировать можно а теперь нужно пробежаться по всему промисам я уже лучше Вот так сделаны что-то как-то удобнее через эти ровно 0 дальше и меньше чем плюс плюс утрировать дальше каждый промез мы должны вызвать и подождать выполнение его так ровно с [музыка] здесь должен быть массив но в целом без разницы уже здесь его сделал Ну ладно я забыл просто что это одна и та же функция

  00:32:23 - 00:34:16

• [музыка] бейк чем выполнение но брыкать они сработает потому что внутри функции потому что и значит если так Не сработает Ну а нужно ли тебе брейк давай про это поговорим по сути же наверное нужен если у нас кетчуп выполнится синхронный или асинхронный промез асинхрон Ну то есть он сразу же кетчутя не выполнится да В любом случае это правильно так вот в том-то как раз и смысл Что у тебя на самом деле for сначала пройдет они потом будут происходить Но если ты там реально какие-то запросы Боже то есть смысл Отправить сообщение

  00:34:04 - 00:35:32

• и по каждому кроме проходим если у нас [музыка] но тоже асинхронно будет значит что нужно сделать то есть возвращать промез Давайте подсказку дам тебе надо с ним как-то либо resolve либо реджек не нужно сделать [музыка] Верно Давайте теперь поговорим Ты готова или нет еще нужно будет зарисовывать успешным тоном получается результат пушем ждем а получается Здесь тоже мне нужно сделать такую функцию и если это был выполнился последний промез То есть их и равняется Link минус 1 Это был последний промез тогда

  00:35:05 - 00:36:44

• мы зальцбуш наверх вынесен и ризол им ЗАГС а давай я с один Ну ладно В целом Давай по именам переменных придираться не буду на быструю руку писал а давай попробуем поискать ошибки то есть Давайте скажу сразу же подсказку Да что здесь есть бак [музыка] Сможешь ли ты найти здесь есть бак возвращаем reject пробегаемся по всем а нужно не вызываем наверное нет нет вызывать не надо как раз все правильно было [музыка] запушиваем больше ничего не делаем если это Последнее выполнившийся промыс пушилизуется ризолвием

  00:36:24 - 00:38:09

• со значением результат если хотя бы один выходит с ошибкой так есть какие-то идеи или затупил очень сильно Давай я тебе скажу что все ошибки находятся вот здесь эти скоб дам сначала Zen принимает результат выполнившегося пушит его массив результатов если и равняется Минус один последний если [музыка] Нет Нет давайте приведу пример который как раз отловит два Бага которые здесь есть это по идее они это разные примеры все-таки будут да наверное разные Да давай первый пример сделаем вот так вот они это тоже один Ты вот смотри у нас

  00:37:39 - 00:39:35

• есть функция slips то и слип 500 и мы используем promisall в данном случае какой результат будет с Лепс то есть 500 Да мы принимаем promises Да один 500 миллисекунд другой через 100 миллисекунд улиц то есть Zen на первый раз на какой промез работать на слип стоили нас Sleep 500 на slipstone сработает Да наслеп 100 значит что он сделает Он сделает results 100 в этом есть какая-то проблема или нет рязанс пуш зарисованный вот это вот 100 [музыка] то есть в массиве ризал что будет Какой порядок будет Ну давайте скажем так что

  00:38:58 - 00:40:33

• слип 500 возвращает 5 А слип 100 возвращает 1 порядок поменяется нежели чем передали понял да да правильно значит что надо делать Угу Сиф который поможет здесь Ну а чем это отпущу отличается вот это вот Да по сути ничем Мне нужно сохранить порядок а порядок Как ты можешь понять порядок я могу понять по индексу наверное да то есть мне за каждым резом Мне нужно сохранить его индекс То есть если это резальц Мне нужно чтобы Первым был Sleep 500 соответственно который мы передали [музыка] возвращаем

  00:39:56 - 00:41:48

• Так ну есть какие-то идеи Боже нет нет ну можешь по индексу засунуть типа индекс равняется а получается результат и равняется пресс [музыка] да А вот теперь тот же пример и найдешь вторую ошибку вот прям точно такой же пример который показал сразу покрывает так Sleep 500 по ним проходимся 1 След 500 равняется если возвращаем он возвращает 5 скидываю 5 без улиц ошибка все тоже все тут же в зане да да Ну как бы здесь знаешь особо если мы здесь поправили Но особо Это вместо не остается где бакты ну как бы этот ну то

  00:41:15 - 00:43:14

• есть она вот здесь просто понять какой и почему Давайте чуть времени дам ты подумаешь еще если нет скорее скажу что мы совсем на этом не зацикливались если и равняется последнего проигрыша Ну вот кроме в нашем примере сколько будет Вот у нас видишь типа вот кроме Святого значит два минус один будет один да один а ой какой будет у каждого из элементов вот этого будет а и получается 0 А вот этого один да за через 100 миллисекунд что произойдет да Понял выполнится сразу вот этот же промез на 2 Но вообще забьет то есть

  00:42:40 - 00:44:02

• и это нужно пофиксить и как это можно пофиксить нам нужно по-любому знать то что все два промиса выполнились Может их промеса сленг Минус один равняется Вот и без А почему без -1 А ну так так так так так так так Слушай вот это довольно таки интересно потому что я не помню если в массив запушить твоя куча проверю если сделать вот так вот по-моему это Не сработает да Потому что если мы типа от массив пустой вы прислала ему к первому индексу там скорее всего создаться перед ним тоже Ну вот по моему да по-моему тоже создастся

  00:43:36 - 00:45:01

• можно сейчас попробовать консолим в этом не сработало Но по моему telex быть сразу типа такой если тысячу передать будет равно например Ну да вот здесь 1001 видишь длина undefined заполняется поэтому Не сработает так но в любом случае Да значит что нужно сделать Какие еще варианты есть любому нужно поработать с Ну то что правильно но какая идея Ну она прям очень простая не знаю как еще можно посчитать сколько промисов засунули врезался если Ну пробежаться Я не знаю порезаться слишком сложно слишком сложно

  00:44:25 - 00:45:57

• Все проще еще проще кроме нужно понять чтобы возвращала тру когда все выполнилось Лан Давай просто это публичный совет мучить не буду вот прям 10 секунд и если не приходит то скажи Попробуй подумать на это прям вот очень прям супер простое решение потому что именно не знаю просто сделал вот так вот короче решение айкаунт плюс И если уже аккаунт да Да все просто Ладно все короче прикольно прикольно не знаю каждый раз когда задачку даю немножко этот как его шлепа слишком много времени на него тратится

  00:45:23 - 00:46:48

• Хорошо хорошо Так давай давай начнем с реактора перейдем сайт бар закрою себе какую задачку дать в начале Слушай а можешь сделать На реакте таймер то во первых такое задание спроса таймер нажимаешь старт и он начинает там записывать время и стоп он останавливает любому Нам нужен стоит этого таймера [музыка] что у нас будет стоять наверное будет секунды Seconds дальше с нуля [музыка] сразу из эффекта потому что будет работа с посторонними эффектами Дальше можно еще стопать наверное можно будет стопать значит две кнопки нужно сделать

  00:46:18 - 00:47:59

• [музыка] дальше определять меньше 60 Давай просто количество секунд давай с этим не это секунда значит выводим эффект зависимости чтобы он выполнялся один раз так еще нужно стоит для старта стопа из Star Фолс и из старта прикидываем сюда зависимости его чтобы можно было менять если таймер у нас начался Значит нужно поставить можно реф наверно создать чтобы хранить этот таймера иди чтобы восстанавливать Давай попробуем так у нас число если значит то значит должно выполняться каждую секундук каждую секунду будет выполняться

  00:47:36 - 00:49:36

• [музыка] и каждую секунду мы добавляем возвращаем плюс 1 [музыка] если мы перестаем добавлять я сейчас можно закатить работает или нет сейчас самое [музыка] так хорошо Давай начнем попробуем 2 3 4 стоп работает да Все работает прекрасно круто круто но Давай сделаем так как можно сделать без рефа все можешь без рефа сделать или нет нам нужно знать его индекс чтобы останавливать этот интервал да как это можно реализовать отойди их Старт от мало отойди равно Windows если это начался почти как можно получается

  00:49:34 - 00:51:35

• если у нас получается Он равен амбуру они отдыхают Мы здесь присвоили там его Чистим не так Не сработает может проверить Давайте скажу Так ты знаешь под Юза эффект То есть как он работает и можешь рассказать про из эффектус не давай допустим представим Да точнее какие брал Расскажи полностью про дефект с нуля эффект которая позволяет выполнять какие-либо эффекты то есть не предусматривается как бы реактом он принимает себя массив зависит не указывать ничего то он будет выполняться на каждый рендер компонента

  00:51:45 - 00:53:04

• если по стоимости в зависимости только на один рендер ну и соответственно если мы что-то сюда закинем в этот массив зависимости какой то стоит ТО на каждое изменение этого стоит у нас происходить функция функция прописанная без эффекте А вот функция прописана в языке она может какие-то значения возвращать или нет ну я не влияет как она код Ну да она может возвращать функцию которая называется при уничтожении она вызывается для уничтожения компонента или в других другое время тоже По всей видимости она вызывается в

  00:52:36 - 00:53:56

• другое время тоже Ну предположительно Когда в другое время тоже Ну знаете то есть каждый раз когда у тебя эффект вызывается новый Ты смотри первый раз у тебя происходит маунта и у тебя эффект первый раз вызывается верно Да каждый раз камень зависимости сначала вызывается потом уже вызывается эффект понял а вот этого я честно даже не знал Значит на основе этих знаний Как можно переписать код чтобы все работало без рефа так если у нас Перед каждым изменением массивы зависимости вызывается Клина функция

  00:53:21 - 00:54:44

• если Старт допустим то наверное можно их интервал иди и так как он у нас начался Отойди по-любому Будет нам бы проверить Так подожди Подожди Получается становится не нужно правильно это с их нам не нужно так смотри получается Если у тебя из стартец А если у нас это труп Значит мы закидываем сюда с интервал если у нас Фолз значит должны чистить этот интервал если у вас по идее не должно сработать сейчас Давай Старт работает Ну дать не работает не устроил но Слушай это как это сказать это не совсем верно просто через дерев

  00:54:14 - 00:56:02

• Давай тебе сейчас скажу то есть получается в чем прикол У тебя же я здесь из старте тру У тебя вот эта функция она сразу создается в сколпе правильно вот этой функции Значит есть старте всегда будет ну типа тоже ru то есть по идее Если хочешь чтобы так работал тебе нужно вот так проверять ну раз что-то пошло Ну типа вот так работает понимаешь это не так что из старте там поменялся тоже функция это примитив понимаешь она создалась типа хоп и все она вызовете у тебя есть стартер по идее на тот момент на тот

  00:55:39 - 00:56:51

• момент клинапа не по идее он должен быть уже обновлен Это старая функция Я просто с вот этим вот кренапом особо не работал я с ним только работал то есть допустим там компонент каким-то соки там подключается И когда ты переходишь на другую страницу нужно соответственно отключиться от этого сойки здесь я прописывал эту логику А вот то что оно каждому изменении может вызываться эта функция здесь на самом деле для многих может быть непонятно Сейчас объясню с точки зрения подписчиков то есть смотри если

  00:56:17 - 00:57:17

• здесь нас стоит ноты в старте то есть кажется ну как вот эти скобки есть функция и вот из старте да типа когда вызовет эта функция Если он поменялся надо типа ну собственно вызвать вот этот первый functions правильным значением но здесь нужно учесть то что вот конус это конус понимаю что каждый раз к создается вызывается функция Up заново у тебя создается вот этот из старта Константа Она из стартец который сейчас купим наверняка не поменяется это не LED какой-то вот как предыдущих примерах садищника Поэтому если эта

  00:56:48 - 00:57:47

• функция была создана со старте труд в ней всегда будете ставить True Поэтому до этого все Смысла не имеет То есть я бы как написал это сделал так вот то есть Прям вообще красивая запись и в ноты стартер типа иначе летаем от ID и Clear вот прям было бы идеальной записи Вот то есть и читаемо и как бы работает нормально без всяких рельефов Окей хорошо хорошо так [музыка] Давай я тебе вот такой пример там сейчас за комментирует наш об сделаем здесь экспорт defold Что такое текст вот так вот так вот так

  00:57:17 - 00:58:43

• но вы выше поставим Давай здесь просто он Клик пока пишу реакт Хорошо смотри смотри Давай допустим вот такую ситуацию представим если здесь добавлю Консул Лог render Да он будет Давай в первую очередь поговорим про Мема поторопился Мема вообще что он делает в реакции с ним знаком или нет да знаком менялизирует это значение компонента и в зависимости от проксов либо минимизированное значение либо заново рендери от компании если которая проверяет Равны ли пропсы друг другу если они равны аизированное значение если нету заново а

  00:58:25 - 00:59:59

• проверяет они равны именно как то есть он проверяет их по значению или по референсу Ну он проверяет их один это один и тот же объект или нет Ну то есть Давай скажем так если привести пример что мы как будто бы и впишем это что будет это будет там какая-то функция такая сложная логика он будет лазить например во внутрь объекта или просто тройным равно их проверить Да он должен лазить во внутрь объекта внутри объекта То есть получается Если мы сделаем вот так вот а равняется 5 то вот это как baton

  00:59:21 - 01:00:30

• никогда не будет прирендериваться да он Клик же по сути будет изменяться Ну ладно давай анклик уберем если вот А ну да и вон клика будет изменяться Но если у а остается внутри допустим да а же каждый раз будет генерится правильно этот объект Вот Но в таком случае как этот компонент Button будет или нет по сути не должен потому что одни и те же но ладно смотри а ты не вообще короче смотри я просто сейчас сам немножко уже подустал смотри То есть каждый раз же здесь приз вызове функции Up Да будет заново создавать Вот это

  01:00:04 - 01:01:19

• объект это понимаешь да ну то есть так скажем новый экземпляр объекта но Мема он проверяет чисто тройным равно пропсы То есть каждый пропуск берет из предыдущим тройным равно проверяет вот так работает то есть он не будет внутрь смотреть что там у них в обоих а равно 5 вот Окей хорошо про это поговорили Давай поговорим про он Клик теперь он Клик ты говоришь в этом случае каждый раз быть новым и Мема он в итоге будет потом или нет Да Будет будет Ну да это верно то есть вот даже можно показать кликни пацаны рендерится хорошо

  01:00:54 - 01:02:15

• Хорошо давай теперь сделаем вот так вот мы добавляем скол Back таком случае не должен рендериться правильно Ну да потому что инстанции остается одним и тем же хорошо давайте отправимся сделаем вот так вот GIF так вот так и связи был вот так you State и свиньи был свет из visible что здесь будет смотри смотри смотри смотри Давай начнём с вот такого примера я кликаю Клик ми и попробую понажимать много раз на кнопку и вот в какой-то момент мы просто не можем закрыть текст да А можешь сказать почему это не работает

  01:01:38 - 01:03:22

• потому что из колбек происходит один раз и он берет как раз таки Константа тут Извините был засовывает Фолз и он Клик остается одним и тем же даже при том что Короче ничего не изменяется А как это можно исправить Спасибо зависимости сюда закинуть [музыка] или рендериваться хорошо Хорошо давай проверим Да все работает смотри но теперь есть еще один недочет То есть смотри батоне в батоне Давай объективно Сейчас посмотрим Button сейчас будет перендриваться когда-нибудь или нет Ну именно Да будет ну то есть он как бы

  01:02:41 - 01:04:06

• Давай скажем так раз 50 даже 50 процентов Каждый раз как Кликаешь он будет перевернуться правильно а потом будет потому что меняется извините да то есть получается в данном случае можешь еще раз повторить немножко связь этот плохая он к постоянно на вас появляется из-за того что меняется из визе был да хорошо Ну то есть получается да да все верно все верно молодец так но смотри получается у нас в данном случае нас данном случае получается Вот Но если 42 компонента API baton тогда получается кого-то бесполезный стал верно

  01:03:24 - 01:04:45

• Ну то есть как только мы нажмем кнопку сюда обновляется смысл эту School Back мы сейчас его удалим и ничего не поменяется правильно Да а как можно эту проблему решить То есть как бы и рыбку съесть и косточка не подавиться Как говорится то есть чтобы ее сколбэк был и чтобы ну как бы работала правильно То есть у нас приложение обновлялся чтобы получается батан не рендерился лишнее количество раз так он Клик мы должны перекидывать в него противоположное значение Извините Ну я знаю то что наверное можно

  01:04:11 - 01:05:24

• использовать рек как раз таки он не влияет на render и в него можно запихивать значение Ну давай покажи на примере изначально у него будет Вот значение здесь уже пропишем не равно поменяем его и вот здесь вот зависимость еще раз да все вот так вот должно работать у тебя все работает но у тебя есть бак ты его заметил или нет попробую обновить страницу и кликнуть Ну ты замечаешь что это первый кликни работает Ну наверное можно Ой что сделал ничего сюда перенести в куры он нас поменяется работа и Так у меня опять есть вопрос мой любимый

  01:04:59 - 01:06:54

• для тебя А можно это сделать без рифа скорее всего если ты спрашиваешь то это сделать безгрефа это принимает по моему если хорошо хорошо так так так так так так так Ладно давай последний на сегодня задачку сделаем Давай сюда добавим компонент еще один который будет называться Windows это будет ивент Стрим эндлер это будет и options это будет ивент лиственного хорошо смотри у нас есть такая функция которая называется Windows так здесь в общем выкинуть еще в общем и как она работает то есть это по сути

  01:06:34 - 01:08:16

• способ чтобы могли просто GSX навешивать ивент хэндлера на Windows например Давай я сделаю клик и хендлер у нас будет Вот такой вот Консул Лог Клик так общем у нас опциональные должны быть Вот так вот Хорошо ты можешь покликать и как видишь у нас Клик работает Да и в чем собственно сейчас смысл так у меня здесь ошибка removentle должен быть Вот так вот сейчас что здесь что здесь за ошибка хорошо то есть Клик везде работает но Смотри сейчас какая проблема то есть если я поставлю консулок он ссылок

  01:07:50 - 01:09:18

• юзафекта и мы попробуем потыкать батон Как видите эффект заново называется Каждый раз мы кликаем потом когда происходит клик и происходит эффект так вот смотри какая проблема у нас же по сути Юза эффект не должен заново вызываться Да потому что нам не нужно заново обработчик стать можем один раз обработчик поставить и вызывать его только тогда ну когда уже происходит Клик то есть сам браузер делает Давай попробуем придумать метод такой чтобы у нас из эффект назывался только один раз да только один раз но хендлер все было

  01:08:40 - 01:09:45

• актуальным то есть смотри сейчас Давай еще раз эти попробую подробнее пояснить проблему у нас есть хэндлер который создается в нарушить снаружи компоненты он передается ему как пробс Да вот этот компонент у нас нет гарантии что он завернуть Call backsonima и у нас нету никакой гарантии человек может писать так как удобно и мы хотим это таки оставить пускай человек пишет каким удобно но у нас есть внутри другая проблема у нас есть эффект на каждый их будет вызываться Да мы не хотим чтобы без эффектно каждый чехол вызвался

  01:09:16 - 01:10:13

• только один раз должен свои обработчики повесить и все вот и как мы можем это сделать Ну то есть как можно обойти то есть одним этим одной пулей двух Зайцев убить чтобы и человеку было удобно компонентом пользоваться и у нас чтобы там лишний раз эффект не вызывался Ну во-первых это странно то что оно как бы таким компонентом рендерится это же наверное как можно кастомный хук написать можно как видать можно как хук в целом Разницы нету то есть хука такая же проблема будет эффект будет каждый раз вызываться

  01:09:45 - 01:10:44

• в целом разницы нет туда можно вызываться он как раз таки будет из-за того что у нас рендривается компонент А когда мы называем Up создаётся новый handler и соответственно меняется вот что можно сделать какие здесь варианты решения есть так Но если Вента тоже одним и тем же [музыка] а хендеры смогу писать Например не только вот здесь на сверху Ну давай скажем так в компоненте Up ничего не должен менять вот прям ничего То есть у тебя как бы этот виндовый винт могут как угодно использовать Ты должен

  01:10:15 - 01:11:34

• прям ко всем ситуациям ты готов поэтому я могу этот виндовый вариант меня да Ну внутри Давай скажем контент первое что мне вообще пришло это обернуть его наверное в Мема прописать ему кастом но эту функцию которая смотрит по пробсу и непррендеривать его допустим когда не меняется у нас Клик но осмотри а если у нас здесь внутри будет Извините был еще консулок Клик из visible ты внутри напишешь Мема А извините был не актуальны понимаешь да то есть его сами раз учитывая Ну то что у нас пример такой статический Да

  01:11:03 - 01:12:24

• был но Представь что динамический здесь все что угодно можете использовать в компании там и переменные Store может что-то использоваться Там и так далее То есть эта функция она все-таки должна быть актуальна основная проблема у нас том что заново делается из эффект То есть как бы компонент вот уничтожается и заново переигрывается у него происходит Ну честно я вот не могу понять что сделать можно Давай я тебе дам подсказку можно использовать реф то есть до этого если он не нужен был то сейчас он как раз вот

  01:11:51 - 01:13:06

• Давайте чуть подумаешь и просто нас уже затянулся Я предполагаю что это тоже уставший Поэтому если прям совсем иди нету можно как бы это сказать об этом Ну я все-таки на месте подумал сначала клип нужно чтобы при рендерил от этого не вызывался у нас из эффект Хорошо давайте объясню решение на самом деле ты используешь реф хендлер и потом тебе надо по идее постоянно обновлять То есть я был вообще по идее правильно это делать эффект То есть просто делаешь внутри узла от эффекта я поесть заменяется Эндер типа меня handler

  01:12:45 - 01:14:15

• вот правильно с точки зрения там то что в реакте Так что здесь происходит Да короче они туда походу меня мышка попал я все стер Окей ну то есть нужно делать это потому что в реакте 18 компонент может несколько раз рендериться в конце концов он не обновится То есть мне в доме не будут актуальны поэтому то есть можешь лишний раз ревна обновлять а компонент еще на самом деле не применил свои изменения актуален поэтому здесь небезопасно писать для реакта 18 Ну тогда То есть можно в рендере можно здесь И что потом делаешь большая ошибка

  01:13:50 - 01:15:10

• которая часто все совершают это прокидывает вот так вот типа здесь рев в зависимости вот так вот это тоже будет ошибкой потому что эта функция вызовете только один раз на вызовет только один раз и передаст как бы не рев а Карен значение рефа понимаю туда Ну да ты понимаешь почему такое использование тоже ошибкой Ну как будет потому что оно не будет обновляться Да он не будет Поэтому надо вот так вот функцию заворачивать Если же просто сделать конский фен типа вот так вот ref.current и все как бы

  01:14:33 - 01:15:49

• сюда и фен прокидываешь и сюда для многих может быть непонятно Карен по сути в себе содержит корону себе содержит текущий референс Да на функции соответственно при первом рендере Это будет ну собственно первая функция handler который передали и при последующих render так как не будет заново вызываться уже будет передан какой-то старый старой функции все А когда мы так заворачиваем мы каждый раз по сути зрев через точка ру берем актуальное значение так и грех это объект и Он сохраняет по ссылке передается И он соответственно будет

  01:15:13 - 01:16:20

• содержать актуальность значение это так понятно или нет Ну плюс-минус скажем так не вызывается но плюс-минус это так конечно непонятно да до конца не понимаю как все-таки это все отрабатывает смотри давай попробуй еще раз объяснить рефы они всегда сохраняют один и тот же референс и про это знаешь да то есть это один объект который я создается в компоненте и все То есть он всегда имеет ссылку между рендерами тот же объект хорошо вот здесь тоже раз обновляем Карен правильно Здесь тоже ничего сложного

  01:15:50 - 01:17:03

• Окей Хорошо теперь получается так как это юзрев мы можем его вообще не прокидывать в деппс и реакцию если плагин если лагерь Хукс Он сам это поймет он видит что это результат и Давайте ничего не будем делать Да вот что соответственно происходит у нас общена не передаются Клик то есть вот эти вот никогда не будут меняться из то что никогда не меняется вот эта функция вызовете только один раз при маунте правильно вот теперь у нас получается есть два варианта у нас первый вариант это передавать ref.current И что будет если

  01:16:30 - 01:17:41

• Давайте объясню мы первый раз давать по шагам пройдем мы берем ref используем userref handler значит в рефе ref.com там хранится хендлер который мы самый первый раз передали правильно при первом рендере при первом рендере мы передали то хендлер при первом рендере через какое-то время вызывается уже вот эта функция Вот эта функция вызывает это вент лист вызывать ивент и передает туда конкретную функцию та которая была вызвана при первом рендере понимаешь это самое первая функция под которым первый

  01:17:06 - 01:18:02

• раз Ну это самый первый хендлер понимаешь да да и получается дальше мы менять не будем не Как правильно выдавили мы передали передали она там живет внутри где-то Типа она подписалась это функция изменения все то есть вот эта функция она только один раз вызвалась и все то есть мы Передаем референт мы мы по сути делаем то же самое что написали так вот хендлер и не передать его в зависимости это будет одно и то же понимаешь да да вот и теперь теперь Поэтому нам нужно сделать обертку если мы делаем такую обертку это обертка тоже

  01:17:34 - 01:18:42

• создается один раз она создается прям ровно один раз но из-за то что у нас референс он хранится то есть она на него всегда одна и та же ссылка Мы искаранта у него актуальное значение возьмем Все я понял да да прям точно понятно в реакции на него никто не видит изменения Но из него всегда можно брать актуальные данные да да как Константа функция она и останется если вот так вот она всегда будет брать да да то есть Похоже вещи просто на самом деле Просто я думал что если ты тут сделал то ты здесь додумаешься Ну ладно

  01:18:08 - 01:19:24

• окей Окей хорошо Так слушай на этом У меня все давай небольшой фидбэк Слушай ну по задачам нормально довольно таки так бодро про решал конечно там ну местами помогал Я где-то вот там с матом с фильтром было 6 помогу в остальном вроде бы ты сам решил там небольшие ошибки садишников тоже немножко потупил норм сортировкой разобрался с провисами вроде бы тоже норм то есть небольшим подсказками то есть знаете как скажу вот все мы с тобой в целом решили все вроде бы как бы есть но везде какие-то знаешь

  01:18:51 - 01:19:55

• такие пробелы у тебя вылезали правильно И вот ну то есть здесь сильно зависит от собеседу еще понимаю что если человек который не помогает 10 который там задолбался там весь проводят ну не каждый будет тебя подталкивать правильно к идеально то есть кроме слова в целом норм в начале ты накидал но вот Дальше например решить додуматься про депарш Ну как бы не особо хорошо получилось вот мы на самом деле много времени потратили многие не стали бы ждать Просто пошли дальше мой личный совет Просто попробовать

  01:19:23 - 01:20:19

• порешать задачи побольше чуть набить руку то есть видно что у тебя рука не набита ну и база подтянуть тоже местами у тебя Хромой то есть промысел помнишь я вроде бы помню что пайплайна вроде бы как кетчу будет работать ну то есть понять что это неуверенность она есть но в целом я скажу довольно бодро пришел задач по реакту тоже было Норм но как бы удивлен то есть про клинаб тоже ты не знал Хотя это был по сути база вот здесь Мема тоже немножко тупанул что он будет проверять там внутри объекта лазить глубоко

  01:19:51 - 01:20:49

• с рефами вроде бы додумался вот этим прелесть тоже додумался но опять же с подсказкой то есть оно всё как бы знаешь типа если ты всё как бы сам решил бы понятное дело там 2-3 косяка там было бы то наверное метла бы я брал то есть смотри Знаешь это мило это самое такая размытая Вилка да ну не вилка это позиция То есть там есть Junior Да например ну то есть наверное ты повыше чем да то есть играть какой металл Ну то есть прям уверенный видел Ну как бы наверное я не знаю было бы сложно взять да то есть

  01:20:20 - 01:21:16

• ну этот там тюнер плюс Да я просто наверное взял то есть а тут какая-то у тебя средняя знаешь какая-то граница между Junior и метлом и в зависимости от той Какая позиция Да там будет то есть Давайте скажем так что Windows который там типа 240-250 получается но это точно как бы нет да то есть не то вот но в целом Middle который там ну уже по сути чуть выше жена ты можешь пройти Да просто тебе нужно подготовиться если хорошо подготовиться в целом тоже можно такого вот типа ну среднего медла знаешь

  01:20:48 - 01:21:38

• как это зайти который спокойно решает вот в плане работы я не знаю какой у тебя опыт с реактом но я думаю что Норм ты описывал свой опыт что-то там на бирже там всякие различные А ну я начал Я там начал получается с простого с простой верточки страничек в целом Хорошо я говорю хорошо но тебе нужно подтянуться Да всё-таки есть ты будешь проходить собеседование чуть-чуть подтянуться Ну попробуй проходить еще собес то есть попробовать Собес пересмотреть там знаешь вывести какие-то Ну то есть вынести ошибки да какие-то

  01:21:13 - 01:22:22

• Ну да короче провести работу над ошибками то есть посмотреть что можно а улучшить и попробуй просто проходить Собес посмотреть как там ну и знаешь как посадишь Собес там сам останавливаешь решаешь смоешь Как там решили базу подтянуть Ну и в целом Я думаю с рендерами рендерами у тебя прям не идеал Да вот сейчас в приложении всем как ты пишешь Попробуй Открыть профайлер посмотреть как там все работает и так далее Ну да я говорю по уровню как-то Я говорю так типа я прям не Эксперт оценивать но я бы сказал сюда среднюю между дном и

  01:21:55 - 01:23:05

• метлом чувствуется чувствуется коньячок я понял Ланта до Андрей Спасибо за время которое уделил вот есть еще что-то сказать Да нет спасибо уделил я узнал свой уровень слабые стороны работу не буду я что-то как спросил не значит в голову пришло как это знаешь как будто это на Спасибо забайтил типа есть еще сказать просто было вообще на вопрос Ладно дорогие друзья на этом У нас все если есть пожелание обязательно пишите в комментариях также Если вы хотите попасть на такой же собеседование переходить в Telegram

  01:22:30 - 01:23:48

• канал то даже можно отправлять свой проект на ревью все это есть закрепленных сообщениях и также там выкладываю каждый день один пост Так что будет очень много чего полезного переходить сюда если есть пожелание опять же Пишите в комментариях Всем спасибо за просмотр Всем пока

  01:23:09 - 01:23:39