Собеседование JUNIOR FRONTEND REACT разработчика

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

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

  00:00:00 - 00:01:16

• мест во всех меня зовут руслан мне 33 и вот начинающий так сказать по всем начинающим изучать java script и ряд где 1 сентября прошлого года достаточно ваши период для джона можно было много изучить и хочу сказать что я как представим что работодатель 3 заинтересованный в работе человек поэтому ты должен отвечать максимально подробно так так как ты бы отвечал на реальном собеседование вопросы я старался подбирать максимально интересные давай сразу начнем первый к тебе такой вопрос приходилось ли тебе

  00:00:37 - 00:02:00

• когда-нибудь сортировать массивы с числами портировать марсе с чувствами да не с кислым с объектами извиняюсь а вот если ты сортировал массив с числами как бы ты это сделал так вот давай откроем сэндбокс java script он например у нас есть массив абсолютно случайными числами пусть им ты хотел его отсортировать как бы ты это сделал давай попробуем но если вы уже начинается проблема себе если совсем блок то можно сделать обычным прибором это очень долгий процесс и [музыка] это не самый лучший но в принципе можно

  00:01:21 - 00:02:59

• сделать я здесь же дома да да да что к самому массивом [музыка] что он и а или фильтром перебираем их или делаем проверку сразу скажите это массива есть такая функция как сорт но если всё так было просто об наверно этот вопрос не задавал но броска не знаешь я сразу тогда поясню попробуем отсортировать и вывести влоги видим оно не такое как мы ожидали да почему то сотни на втором месте ну и порядок достаточно странный дело в том что java script изначально сортирует массив как строки и он проверяет о первому символу поэтому на

  00:02:15 - 00:03:58

• сотня идет сразу после единички и чтобы массив на monster отсортировать нам необходимую функцию сорт передать call back который параметрами принимает два элемента и затем сделать проверку если a больше b когда мы возвращаем на единичку обратном случае возвращаем -1 чей можешь заметить что массив отсортировал все уже как надо эту запись конечно можно упростить вот таким вот образом giga более короткая запись ладно идем дальше с какими вот перебираю щими методами массива то как раз знаком ну а мы я просто честно говоря не знаю

  00:03:18 - 00:04:55

• как правильно называется через то есть это с обычный цикл надо для каждого и от нуля , свою перебираем архив ту от 0 индекс то еще а вот те методы которые находятся соответственно в прототипе массива наверняка ты не знаешь массива то есть когда мы можем написать например и затем вызвать с необходимы для нас method of the nomad filter for each данного прибора для каждого и там по моему у нас еще а еще глупо радиусом придется есть и другие но вот самые основные вот этим а в чем принципиальное отличие например for which at me

  00:04:07 - 00:06:07

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

  00:05:08 - 00:06:30

• проинтегрировать замысел давай сейчас попробую представим такую ситуацию что в прототипе массива нет функции map и нам необходимо написать ее самостоятельно мир моими как бы ты реализовал эту функцию давай попробуем так здесь нам дана я могу & спа фриче для каждого перебор новости да да for each можно использовать окно я так думал что я просто попросил бы [музыка] у него не по сравнению смотрим у нас допустим несколько таких массивов но 1 2 и нам необходимо написать такую функцию как раз она будет находиться в прототипе

  00:05:49 - 00:07:19

• чтобы мы могли для каждого массива потом написать рэй . май map матка и чтобы это работало точно так же как мы вспоминаешь что эта функция принимает call back у которого есть три параметра до соответственно самый элемент его индекс и сам массив у это то есть тебе каску надо про интегрироваться по всему массиву и для него применить вот этот call back этот call back у тебя идет вот здесь параметрам и самого функция должна вернуть новый массив подумай как быть лучшим получается ну смотри так как у нам эта

  00:06:39 - 00:08:11

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

  00:07:27 - 00:09:18

• создавая новую новые константа [музыка] все правильно вот этой оппозиции хотел услышать упаковка окончания мою из контекста подчас помощь далее ума его перебрать но через прыщ можем через обычный в представим что у нас for each нет потому что если у нас нету нету наверно у нас нет и for each поэтому давать переберём через обычный пор так будет покрасивее alba а можно через за ускоренное приставляться нет здесь по моему так нельзя да давай я напишу по выстрелу напишешь вот мы оперируем ся прямо по массиву что

  00:08:22 - 00:10:08

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

  00:09:21 - 00:11:23

• первым параметром тебе дам необходимо получить элемент по индексу aprender сперма далее яндекс и steve vai все веком покушали и возвращаем на место после того как мышцы перебрали в прототипе возвращаем как результат пустые ну точнее говоря а как рожу-то функции мы возвращаем там и резал который новый мастиф у нас появился да красавчик убедимся теперь что это все работает вызываем эту функцию и например здесь сделаем return элемент у string образуем строке наши числа выведем это все консоль скобочка

  00:10:32 - 00:12:23

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

  00:11:35 - 00:13:09

• конечно конечно говорить так как то понимаешь для для меня реактор нет ни к получится библиотека но для меня их оболочки которая позволяет делать более сложные динамические вещи нежели просто обычный html ты считал усложненный очага это структурирование твоего я успех кода для того чтобы разделять html javascript при что нам мешает без использования реакция создавать html файл и сдавать java script файлы и все это будет работать в принципе также совсем потому что если мы сделаем прошла шлем или java script а то

  00:12:27 - 00:14:06

• у нас уже будет я не совсем корректно в этом они точно скажу но у нас будет обновляться вся страница ряд позволяет делать компоненты которые будут обновлять только куски лимонов им объект то есть помощью react и можно создавать именно сингл печь applications ах да верно тогда вопрос чем сингл печь applications лучше чем multi-touch соответственно то есть смотри я тебе попробую сейчас объяснить условно когда мы открываем какую-то страницу например она весит 500 килобайт мы подгружаем нужный java script файлик нужны html

  00:13:17 - 00:14:34

• нужно css когда мы открываем сингл пейдж applications построены на реактив мы погружаем абсолютно весь java script сразу и он может весить 2 3 мегабайта внушу я условные цифры говорю и тогда получается за счет чего мы выигрываем were акте если исходный размер файлов у нас больше [музыка] обращение то есть уже непосредственно на дистанции когда запрашиваем любой контент что то еще то есть нам необязательно каждый раз статические файлы перетаскивать нужно закрашивать сервера и не обязательно то есть мы

  00:13:55 - 00:15:06

• запрашиваем the card information from на вид то есть мы на первую подгрузку тратим больше времени но затем положение у нас работает быстрее баннер вот есть такое понятие как virtual дом знакомым слышал может быть что нибудь расскажешь ну virtual да мы фактически став там останется в что что мы видим элементы ht html снимешь в общем это части кода html кода которые правильно сказать по тебе немного подскажу дом это в принципе объектное представление html-документа то есть мы обращаемся к каким-то

  00:14:31 - 00:16:02

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

  00:15:20 - 00:16:55

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

  00:16:07 - 00:17:28

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

  00:16:48 - 00:18:15

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

  00:17:45 - 00:19:30

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

  00:18:42 - 00:20:29

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

  00:19:37 - 00:20:43

• единичке и есть функция в которой я как раз делал сет state и делаю стоит + 1 есть просто по сути увеличиваю значение на единицу но что произойдет если я сделаю это вот допустим 4 раза после нажатия на кнопку какая здесь будет цикл вот я тут явно что-то не туда если подвоха не было от меня не спрашивал ого-го проходишь и joy секунда будет он догадался простая я не нажимал на кнопку другом что функция 1 внутри функции мы обращаемся к одному и тому же state of неважно как мы его меняли выше внутри функции она непосредственно там

  00:20:10 - 00:21:49

• стоит он же не изменился порядок ну как бы все правильно говоришь тогда вопрос как нам сделать так чтобы при нажатии на кнопку у нас состоит вызвался именно но он и так вызовется четыре раза но как нам сделать так чтобы после первого нажатия у нас стоит стала опять увидеть некий вариант + 4g нападает вот вызвавших вызвать функцию четыре раза чтобы у нас было пятерка не совсем понял получается при нажатии на кнопку нас ну что должно срабатывать четыре раза нет вот эта же функция f n у нас должна

  00:21:02 - 00:22:23

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

  00:21:45 - 00:23:21

• задавая сразу подскажу есть ты не знаешь ты скорее всего тут не ответишь состоит помимо просто состояния может принимать еще call back а за предыдущим состоянием да и мы можем это состояние изменяясь если мы сделаем теперь вот так да да да но если мы нажмём сейчас то как ты можешь заметить изменяется на 4 как тогда идем дальше еще одна задачка работал ли ты с эффект да единственное нас не до конца разобрался в лишними как это утечка памяти проект называется и да вот как раз имя на вопрос который был

  00:22:33 - 00:23:59

• да повод хорошо будет ну давай рассмотрим такой более-менее практический пример на деф накинем стиле сделаем высоту например 300 махан все у нас scroll чается на документ use факте я хочу повесить слушатель события у нас пустое мы давай кстати про язык тебя спросим для чего вообще этот хук нужен при изменении значения в массиве то есть при изменении состояния значение которое мы указываем массиве 90 допрашивать функцию и массив призме массиве и и он сработка 2 1 сразу же если мы оставляем пустые

  00:23:15 - 00:24:53

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

  00:24:09 - 00:25:50

• на другую то есть эта страница у нас полностью демонтируются вот этот scroll он ни куда не денется . говоря как нам сделать так чтобы когда мы эту страницу покинули чтобы этот scroll у нас удалился во говоря как нам этот слушатель удалить а ну по-моему там также обращаться надо но соответственно бэтмену так что смотрел видео которая сегодня вышла и там это была я я прям точно помню этот момент слушатель удалить этот вопрос скорее в другом в каком месте кода его удалять после срабатывания но при этом был меня

  00:25:03 - 00:26:38

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

  00:25:52 - 00:27:04

• call back a функцию то эта функция вызовется как раз момент если массив зависимости пустой то как раз в момент демонтирования компонента и вот здесь уже внутри можем сделать ему флот компоненты у нас демонтируется вызовется вот этот ему фрагмент листа нерв и мы подпишемся от этого события вот вот с этим моментом я как раз честно грей не знал вас не ускорять или проблемы до но надеюсь и для себя что то новое для подписчиков которые смотрят что-то новое идём дальше вот есть такое понятие как управляемые и неуправляемые компоненты

  00:26:30 - 00:27:51

• слышал когда-нибудь а конечного и управляемому складе есть аня фору рассмотрим на примере input а добавим запись этот день нами говорящим второе добавим я могу placeholder напишем здесь управляемый здесь мы сделаем такую жизнь под но он будет и управляемо нас будет кнопка get целью кнопку нам необходимо из этих input of значения получать вот есть два способа сделать этот input управляемым получить с него значение и также есть второй способ как получить из неуправляемого young то значение есть раз можешь постарайся сейчас такой

  00:27:14 - 00:28:50

• функционал реализовать я надеюсь по крайней что смогу так 1 по давай по вам он как сделать [музыка] так это управляемый будет ему обращаемости через и estate мнение он будет закидывать информацию только теперь напиши еще правильность порода shuffle вот тут-то же можно любое значение а вот так вот а сначала ты первым первый элемент кортежи то у тебя состоянии 2 функция которая изменяет жертвам и мамаши и он у нас пустой [музыка] авиа и второе это мы используем узрев потому что обращаемся к ft revan управляем и естественно при

  00:28:08 - 00:30:21

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

  00:29:31 - 00:31:23

• функция вот это принимает event надо вам у этого ивента как нам получить белье голова я уже только не винт карен the event or get а иван то ли так не не забывайте этого торги то еще вылетать таким образом здесь там под торги там подразумевается самым пут и в этого input от и вилью достаешь и записываешь его в состоянии с этим разобрались и мкад управляю теперь до восьми управляемым мы даем для пылью которые получаемых звуковые мпа что они посредством а ну мы же госпожа но и ферсмана 2 вывел которая и нажать на кнопку здесь

  00:31:04 - 00:33:08

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

  00:32:09 - 00:33:37

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

  00:32:53 - 00:34:32

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

  00:33:44 - 00:34:58

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

  00:34:22 - 00:35:41

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

  00:35:01 - 00:36:38

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

  00:35:51 - 00:37:09

• вопрос заключается в том чтобы ты рассказал основной грубо говоря flow ридак со как не что-то изменить как не что-то получить так начнем с того что в редакции значения тейта оно неизменяемо и заглянул ему так ноги и у нас есть мусора action малыш на [музыка] пример принцип принцип примерно такой когда нам необходимо иметь какое-то значение встречи мы обращаемся к экшену обрабатывает непосредственно этот самый стоит но то есть этот кусок гриппа а action что из себя представляет шины которая получает 1 первоначально

  00:36:29 - 00:38:26

• под стать который был на момент обращение a person's непосредственно сам стоит только ты помоему перепутал рядиться reaction а я извиняюсь я у я уже понял я начал этот фильм о нашем прийти я говорю видимо собраться правильно сидиус орда принимает знаю первом очень и in state автором значением этом при всем при этом он принимает nexen creator action радиус r принимает первым параметром состоянии ставить а вторым action вот что из себя вот этот экшен представляет экшену значение значения чего ноче мио которое мы хотим action давайте

  00:37:35 - 00:39:10

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

  00:38:23 - 00:39:50

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

  00:39:12 - 00:40:52

• я сама просто запросим состоянии анализ ну не изменится нам нужен ли спать дальше немного две звезды стать и он диспетчер грубо говоря которые запустят придется если правильно что нам в этот dispatch то передать надо так сам передаем action но в принципе ты так кратко все рассказал в принципе нормально коса синхронными экшенами тебе приходилось работать в этом chrome нами ну например зато отправить запрос на сервер что то получите как-то изменить состояние однако мир использовал ли ты для этого

  00:40:09 - 00:41:32

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

  00:40:54 - 00:42:14

• которые action creators которые как то состояние изменяют и есть асинхронный то есть например делаешь там dispatch какой-нибудь laughing у тебя появляется крутилка dispatch нам печь users и там погружаешь юзера сервера и затем там dispatch все клоудин cforce у тебя появляется крутилка пользователи подгрузились на эту крутилку убираешь и тебе внутри этой функции как то необходимо этот dispatch получить как тебе этот dispatch получить без ридак фанка какие есть варианты у тебя этого просто функция обособленно там

  00:41:38 - 00:42:47

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

  00:42:12 - 00:43:16

• называется например users это у нас action creator и мы не используем ридак swank мы здесь делаем dispatch и спать site loading например true те мы делаем его здесь у нас где-то request аккаунт дейта мы запустим забрал тут условно у нас какой то запрос http и затем нам эти данные еще надо поместить какой-то массив например сет users и сюда мы это даритель передаем это функция у нас находится в другом файле она в принципе ничего редакции не знает и ей откуда-то надо взять вот этот dispatch мы можем его

  00:42:44 - 00:44:17

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

  00:43:31 - 00:44:42

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

  00:44:13 - 00:45:31

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

  00:44:54 - 00:46:27

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

  00:45:40 - 00:47:42

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

  00:46:42 - 00:48:17

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

  00:47:31 - 00:48:52

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

  00:48:12 - 00:49:29

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

  00:48:52 - 00:50:32

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

  00:49:45 - 00:51:51

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

  00:51:00 - 00:52:36

• да для им полно но было так там и он да не забывай вернуть вот так давай проверим будет это работать палиндром а так true сериалом так она вернула в полз сделаем так но вернула труб да это в принципе правильное решение но опять же можно было очень сильно упростить мы в java скрипте где куча всяких функциональных штучек я покажу как это можно было сделать проще [музыка] получается слово сравнить вот с такой вот конструкции мы изначально эту строку разбиваем на символы то есть по итогу после функции

  00:51:51 - 00:53:37

• сплит у нас будет массив где каждый элемент это у нас буква к python затем мы вызываем функцию reverse массив мы получается 1 а чего не у нас получается уже обратно и слова и потом мы делаем двое получается мы уже склеили слова примерно понимаю что мы сделали да разбили на массив массив развернули и затем вернули обратно строку все склеили ну и работать это должно точно также но теперь у нас не 70 рока всего 2 да так теперь следующая задачка приходилось ли тебе когда-нибудь копировать объекты но скорее всего дата

  00:52:56 - 00:54:25

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

  00:53:45 - 00:55:26

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

  00:54:37 - 00:56:11

• что если мы просто скопировали данные объекты стороны новый а если мы говорим что второй объект этот тот же самый первый объект аналогично что это будет одно и то же но друг а если мы сделаем вот так что будет в во втором объекте поле а не меня там будет единичка давай попробуем ввести влоги . да как видишь ши у нас и в первом объекты и во втором появилась пятерка есть предположение почему так происходит mall а поскольку мы даем изменяем позже то есть но вот после того как назначили то я думал что

  00:55:33 - 00:57:10

• но не изменится значение но если она изменилась устройство как раз из-за того что мы назначили что первый проект одинаковые то есть они идентичны письмо по сути присвоили ему объект 2 и меня то есть поверх 112 я смотри тогда другой пример давай вот это мы закомментируем сделаем это равное 5 лет b равна а и а мы сделаем равное 10 что будет по итогу в.п. есть проверим это сейчас и тебе попробую объяснить как это происходит дело в том что есть примитивные типы данных а есть сложный от объект является

  00:56:27 - 00:57:52

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

  00:57:13 - 00:58:26

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

  00:57:51 - 00:59:06

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

  00:58:29 - 01:00:11

• объект один . c равняется два точка c как думаю что здесь true или false вопрос скорее всего это будет волос потому что он амир стоп стоп стук уже отправил получается и тогда получается будет ru мы проверим правильно сказал будет труп но почему так происходит третье мы сделали копию объекта а так мы же раз получается разобрали поверхность таких мы развернули же у нас тоже является объектом и ссылка получается сохранилась как раз вот такого вот копирования но называется неглубоким есть ещё один способ это

  00:59:22 - 01:00:55

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

  01:00:11 - 01:01:32

• ресурсоемкие так сделать глубокое копирование мы объект перегоняем в чосон строку ну затем а брат арсен в объект теперь консоль выводит falls то есть получается у нас объект полностью перегоняется в строку все ссылки затираются потом мы обратно парсим его в час он объект java script объект и у нас получается новая копия но такой подход тоже достаточно грязный поскольку если у вас внутри будет здесь например какая-то функция то тогда уже будут проблемы потому что арсен к функции там символов с этим есть

  01:00:52 - 01:02:11

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

  01:01:32 - 01:02:41

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

  01:02:06 - 01:03:17

• называется просто что вопрос ставится . бы вопрос при наличии одну попробую сделать попробуйте ошибка не пропало ты практически правильно сказала день сатанистом месте вопрос если а если у нас то есть м да здесь phuket пусть и он на в таком случае видишь уже приложение не падает мы получаем and i find the по-хорошему еще конечного так сделать это такое более современный способ он не всеми браузерами поддерживается для этого надо подключать там разные полифилы есть ещё один способ может сталкивался

  01:02:42 - 01:04:06

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

  01:03:24 - 01:04:55

• признал [музыка] вот вопрос соответственно если значение не пустое off не пустое то тогда учиться объекта до 100 мб . и ч all of the значит такой вариант тоже подходит но вариант еще сделать более короткую запись и сам сказал через или или логическое или таким образом то есть если у нас если у нас был define the тогда мы выводим значение единственным здесь надо проверить еще чтобы у нас кабаева салон а вот так вот но это чаще всего такого применяют каких-нибудь шаблонах в том же реакции ну в принципе на этом все как-то оценишь

  01:04:13 - 01:05:58

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

  01:05:16 - 01:06:35

• лежат явно надо подтянуть базу прекрасного я тебе как раз и хотел сказать надо подтягивать базу вы вроде как react более-менее ридак с более-менее вот нативный java script в принципе какие-то концепция смены очень сильно плаваешь надо подтягивать надо читать смотреть практиковаться но это все с опытом придет и как-то вот сказал в google и конечно все можно найти но какие-то вот понятия основные тебе надо понимать а че ты будешь допускать много ошибок потом часами сидеть эти ошибки искать и даже не понимать

  01:05:55 - 01:07:15

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

  01:06:36 - 01:07:48

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

  01:07:12 - 01:08:27

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

  01:07:50 - 01:08:41