Рубрики
Без рубрики

Общие вопросы интервью интервью и Vetted, красноречивые ответы на репетицию

Если вы хотите приземлиться на отличную работу в 2020 или 2021 годах, это сообщение для вас 😌. Теги от реагирования, карьеры, WebDev, JavaScript.

Если вы хотите приземлиться отличную работу в процессе реагирования в 2021 году, это сообщение для вас 😌.

Я приношу вам этот пост на задней части Scrimba’s New Рейдовое интервью Вопросы Модуль С удивительным @Cassidoo 🎉.

В этом курсе Cassidoo описывает свой профессиональный опыт работы в NetLify (и до этого, Codepen), чтобы поделиться 26, вероятно, отвечает вопросами интервью и пример ответов.

Вы читаете Epic 4500 Word версию тех же общих вопросов интервьюирования и пример ответов. Используйте это как краткую ссылку или как упражнение, чтобы репетировать ваши ответы вслух. Я также включил Вопросы на интервью на интервью PDF В блоге Scrimba, в случае, если вы хотите что-то скачать и распечатать 😎.

Здесь я перечисляю те же вопросы плюс Vetted ответы для вас, чтобы адаптировать. Используйте это как вдохновение для фрастру красноречивых и уверенных ответов, которые будут вау 🤩 Ваш в ближайшее время для работодателя.

Для каждого вопроса я стремлюсь выделить:

  • 🔑 Ключевая вещь, которую можно упомянуть в вашем ответе
  • 📝 Где узнать больше, если вы выявляете разрыв в своих знаниях
  • ⛔️. В некоторых случаях я также упомяну о распространенных неправильных ответах для вас, чтобы избежать во всех расходах

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

Реагировать домо В чем разница между виртуальным домом и настоящим домом?
Виртуальный дом такой же, как тень DOM?
Ограничения реагирования Каковы ограничения реагирования?
Jsx. Что такое JSX?
Можете ли вы написать отреагировать без JSX?
Реквизит Как вы проходите значение от родителя ребенку?
Как вы проходите значение от ребенка на родителей?
Что такое опорное бурение?
Может ли ребенок компонент модифицировать свои собственные реквизиты?
Состояние и жизненный цикл В чем разница между репортами и государством?
Как состояние в классовом компонентах отличается от состояния в функциональном компоненте?
Каков жизненный цикл компонента?
Как вы обновляете жизненный цикл в функциональных компонентах?
Последствия Какой аргумент занимает использование?
Когда работает функция USEFFECT?
Каково возвращаемое значение функции использования DEFFECT?
Ссылка В чем разница между Ref и Country Primations?
Когда лучшее время использовать Refs?
Какой правильный способ обновить Ref в функциональном компоненте?
Контекст В чем разница между контекстным API и опорным бурением?
Когда вы не должны использовать контекст API?
Другой Что такое фрагмент?
Когда вы должны создать компонент на основе класса против функционального компонента?
Что такое компонент более высокого порядка?
Что такое портал?
Что такое неконтролируемые и неконтролируемые компоненты?

Реагировать домо

В чем разница между виртуальным домом и настоящим домом?

DOM представляет собой HTML-документ в качестве структуры дерева, в которой каждый узел представляет собой часть документа (например, элемент, атрибут элемента или текста):

Используя Vanilla JavaScript и API DOM, вы можете получить доступ к любому элементу, который вам нравится (например, используя Document.getelementById) и обновлять его напрямую.

Когда вы делаете это, браузер пересекает DOM и повторно отображает каждый узел – даже если этот узел не изменился с момента предыдущего визуализации. Это может быть заметно неэффективно 😳

Представьте себе сценарий, где вам нужно обновить только один TR 10 000 в таблице. Оказание всех 10 000 строк почти наверняка приведет к падению кадров, потенциально заставляя таблицу мерцать и прерывать опыт пользователя.

Именно здесь виртуальный DOM RACE (VDOM) входит в игру ✅.

Реагирование повышает производительность вашего UI, создавая «виртуальное» представление DOM (VDOM 😉), чтобы отслеживать все изменения, которые необходимо сделать до настоящего Дома.

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

  • 🔑 Важно отметить здесь Рассеяться Отказ Если вы хотите немного сгибаться, вы можете описать этот процесс по его техническому названию, который является примирение (Rect примирает вновь построенный VDOM с предыдущим)
  • 📝 Узнать больше
  • ⛔️. Обычное заблуждение состоит в том, что VDOM – это функция реагирования. Это неправда! VDOM – это концепция программирования, которая предлагает реагировать и принимается многими библиотеками пользовательских интерфейсов, включая Vue

Виртуальный дом такой же, как тень DOM?

Одним словом нет.

Принимая во внимание, что виртуальный DOM представляет собой концепцию программирования, реагируемую преимущественно для повышения производительности рендеринга, Shadow DOM – это технология браузера, предназначенная для определения переменных и CSS в веб-компонентах.

Виртуальный DOM и Shadow DOM звук похожи по имени, но именно здесь начинается сходство и заканчивается – они полностью не связаны.

  • 🔑 Показать интервьюеру, вы можете критически подумать о том, какой инструмент вы относитесь к которым вы относитесь к проблемам, а не вслепую до реагирования
  • 📝 Узнать больше

Ограничения реагирования

Каковы ограничения реагирования?

Нет инструмента без его ограничений, а реагирование не является исключением.

Взвешивание в 133 КБ, реагирование считается относительно тяжелой зависимостью. Сравнение, Vue 58 КБ. По этой причине реагировать можно считать излишним для небольших приложений.

Сравнение реагирования и Vue в размере файлов чувствует себя честно, потому что они оба библиотеки, в отличие от рамок.

По сравнению с структурой, такой как угловой, реагирование не обеспечивает сильные мнения о том, как писать и структурировать свой код или о том, какие библиотеки использовать для таких вещей, как данные для получения данных – с угловой, члены команды будут инстинктивно достигать встроенного углового лица Httpclient , тогда как с реакцией, команды зависят от дополнительных библиотек для получения данных, таких как Axios или Fetch.

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

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

  • 🔑 Показать интервьюеру, вы можете критически подумать о том, какой инструмент вы относитесь к которым вы относитесь к проблемам, а не вслепую до реагирования
  • 📝 Узнать больше

Jsx.

Что такое JSX?

Похоже в появлении XML и HTML, JavaScript XML (JSX) используется для создания элементов с использованием знакомого синтаксиса.

JSX – это расширение для JavaScript, понятого только препроцессорами, как Бабел. Когда-то встречается препроцессор, этот HTML-похожий текст преобразуется в обычные старые вызовы функций на Отреагировать :

  • 🔑 JSX – синтаксический сахар для Rect.Createelement функция
  • 📝 Узнать больше
  • ⛔️ Хотя JSX является HTML-подобным, это не HTML. Если вы искушаете ответить, «JSX позволяет вам написать HTML в вашем JavaScript», что бы не было точным

Можете ли вы написать отреагировать без JSX?

Одним словом, да.

JSX не является частью спецификации Ecmascript, и поэтому веб-браузер на самом деле не понимает JSX.

Скорее, JSX – это расширение к языку JavaScript, только понятно препроцессорами, как Бабел.

Когда препроцессор сталкивается с некоторым кодом JSX, он преобразует синтаксис типа HTML в обычные старые вызовы функций на Отреагировать :

Rect.Createelement является частью Public React Public API верхнего уровня, как Rect.comPonent или Rect.Useref (называть пару). Ничто не останавливает вас от призывающего revoction.Createlement в вашем собственном коде, если вы выберете ✊

  • 🔑 JSX – синтаксический сахар для Rect.Createelement Функция, что означает вы мог бы Позвоните Отреагировать напрямую (это не обязательно означает, что вы должны )

Реквизит

Как вы проходите значение от родителей к ребенку?

Передайте ценность как опоры!

Как вы проходите значение от ребенка на родителей?

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

Представьте себе пользовательский компонент формы, чтобы выбрать язык, называемый SelectLanguage Отказ

Когда язык выбран, мы хотели бы передать это значение обратно до родителя для обработки.

Сделать это, SelectLanguage Дочерний компонент должен будет принять функцию обратного вызова в виде опоры, который он может позвонить со значением. Вероятное имя для такого рода функции будет onlanguageselect Отказ

  • 🔑 Пройдите функцию присмотра ребенку, который может позвонить ребенку. Лучший способ сообщить об этом в вашем ответе с примером, как SelectLanguage компонент реквизиты
  • 📝 Узнать больше:

Что такое опорное бурение?

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

Пропор бурение иногда называют резьбой и считается скользким склоном, если не антигидс 😱.

Представьте себе сверление опоры 5, 10, может быть, больше (!) Уровни глубоко – этот код быстро станет трудно понять. Ловушка происходит, когда вам нужно делиться данными по многим различным компонентам – данные, такие как предпочтения локали, предпочтения темы или пользовательские данные.

Хотя прополога не по своей природе неплохо, обычно существуют более красноречивые и ремонтные решения для изучения таких как создание составных компонентов ✳️ или использование контекста RACT, эти решения не являются без их ограничений.

Может ли ребенок компонент модифицировать свои собственные реквизиты?

Ну-а.

Компонент может обновить свое собственное состояние, но не может обновить свои собственные реквизиты.

Подумайте об этом. Поэтому реквизиты, следовательно, только для чтения.

Попытка изменить реквизиты, либо приведет к очевидным проблемам или, хуже, поместите ваше приложение React в тонко нестабильном состоянии. Реагируйте диктуют, что обновить UI, обновлять состояние обновления.

  • 🔑 Реагируйте нужны, чтобы вы лечить реквизиты как только для чтения (даже если есть способы возиться с ними)
  • 📝 Узнать больше
    • Это Ответ в Stackoverflow использует пример код, чтобы проиллюстрировать, что может произойти, если вы беспорядоте с реквизитами от дочернего компонента
    • В то время как ребенок не может обновить свои собственные реквизиты, значение этих реквизитов могут измениться, если родитель изменяет их через изменение состояния. Несмотря на сенсационное (возможно запутанное) титул, Это FreeCodecamp Post показывает знакомый пример того, как выглядит этот шаблон

Состояние и жизненный цикл

В чем разница между репортами и государством?

Реквисы по существу варианты вы инициализации дочернего компонента с. Эти варианты (если хотите) принадлежат к родительскому компоненту и не должен быть обновлен дочерним компонентом, получая их.

Состояние, с другой стороны, принадлежит и управляется компонентом.

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

Состояние необязательно, что означает, что некоторые компоненты имеют реквизиты, но нет состояния. Такие компоненты известны как нестандартные компоненты.

  • 🔑 реквизит и Государство Подобны тем, что они оба имеют информацию, которая влияет на вывод рендеринга, однако, реквизиты устанавливаются на компонент (аналогично параметрам функции), тогда как состояние управляется в пределах Компонент (аналогичный переменным, объявленным в рамках функции).
  • 📝 Узнать больше

Как состояние в классовом компонентах отличается от состояния в функциональном компоненте?

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

В классовом компоненте исходное состояние устанавливается в функции конструктора компонента, затем доступа к или установленным с использованием этого.State и this.settate () соответственно.

В функциональном компоненте состояние управляется с использованием USESTATE крючка. USESTATE принимает аргумент для своего начального состояния перед возвратом текущего состояния и функции, которая обновляет государство как пару.

Каков жизненный цикл компонента?

Компоненты реагирования имеют 4 различных фаз «Жизнь»:

  • 🌱 Во-первых, компонент – инициализирован и монтируется на доме
  • 🌲 Со временем компонент – обновленный
  • 🍂 В конце концов, компонент – это Размонтированный или удален из дома

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

Например, в компоненте класса мы могли бы реализовать ComponentDidmount И напишите код для настройки нового подключения веб-сокета. Поскольку данные в режиме реального времени в режиме веб-розетки, состояние обновляется, и, в свою очередь, оказывать Метод жизненного цикла запускается для обновления пользовательского интерфейса. Когда компонент больше не нужен, мы закрываем подключение веб-сокета путем реализации ComponentWillunmount Отказ

  • 🔑 Компоненты React имеют несколько методов жизненного цикла, которые вы можете переопределить для запуска кода в определенные времена в жизни компонента. Знание Все функции Не плохая идея, но важнее, чтобы вы могли объяснить, когда вы будете использовать каждый. Некоторые методы жизненного цикла довольно редко, поэтому вы вряд ли будут иметь опыт с ними. Не ведите интервьюеру по этому пути, если вам не нужно.
  • 📝 Узнать больше

Как вы обновляете жизненный цикл в функциональных компонентах?

Используя Useffect Крюк!

Вы можете думать о Useffect Крюк как ComponentDidmount. , ComponentDidupdate и ComponentWillunmount в сочетании.

Последствия

Какие аргументы принимают использование использования?

Useffect берет два аргумента.

Первый аргумент – это функция, называемая эффект И это то, что дает Useffect Зацепить его имя.

Второй аргумент является необязательным массивом, называемым зависимости и позволяет вам контролировать, когда именно эффект Функция запускается. Думать о зависимости в качестве переменных (обычно переменные состояния), что эффект Функциональные ссылки и, следовательно, зависит от.

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

Это где опционально зависимости Аргумент приходит в ✅.

Когда зависимости Присутствует, реагировать сравнивает текущее значение зависимости со значениями, используемыми в предыдущем визуализации. эффект только бежит, если зависимости изменился ✊.

Если вы хотите, чтобы эффект запустить только один раз (похоже на ComponentDidmount ), вы можете пройти пустой массив ( [] ) на зависимости Отказ

Когда работает функция USEFFECT?

Когда используемый эффект работает точно зависит от аргумента матрицы зависимостей:

  • Если вы проходите пустой массив ( [] ), эффект работает при установке компонента (аналогично компонентуDidmount)
  • Если вы проходите массив переменных состояний ( [var] ), эффект работает при установке компонента, и в любое время значения этих переменных изменяется
  • Если вы опускаете аргумент зависимостей, эффект выполняется при установке компонента и на каждом изменении состояния

Это о сумме этого!

Каково возвращаемое значение функции использования DEFFECT?

Useffect Функция принимает два аргумента – a эффект Функция и необязательно зависимости множество.

эффект Функция возвращает либо ничего ( undefined ) или функция, которую мы можем позвонить Очистка Отказ

Это Очистка Функция выполняет до того, как компонент удаляется из пользовательского интерфейса для предотвращения памяти Likes (похоже на ComponentWillunmount ).

Кроме того, если компонент делает несколько раз (как они обычно делают), предыдущий эффект очищается перед выполнением следующего эффект Отказ

  • 🔑 Возвращает Очистка Функция (которая похожа на ComponentWillunmount ) и может Беги после каждого эффекта
  • 📝 Узнать больше

Ссылка

В чем разница между Refs и Countain Primations?

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

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

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

Когда лучшее время использовать Refs?

Используйте только ссылки при необходимости!

Refs в основном используются одним из двух способов.

Одним из употреблений REFS является доступ к элементу DOM непосредственно для манипулирования его – пример будет при внедрении сторонней библиотеки DOM. Другим примером может быть вызвано императивные анимации.

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

Когда кто-то новый для реагирования, Refs часто чувствует себя знакомым для них, потому что они используются для свободно писать императивным кодексом. По этой причине начинающие склонны к употреблению на Refs. Мы знаем лучше. Мы знаем, что получить максимально от реагирования, мы должны Думайте в реакцию И в идеале контролировать каждый кусок нашего приложения с состоянием и иерархией компонентов. Документация RACT описывает Refs как «экипаж люк» для веской причины!

Какой правильный способ обновить Ref в функциональном компоненте?

Используя УСЭРЕФ крюк!

Контекст

В чем разница между контекстным API и опорным бурением?

В реакции вы явно передаваете данные из родительского компонента до дочерних компонентов через реквизиты.

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

И наоборот, контекст API дает нам центральный магазин данных, который мы можем неявно Доступ, чтобы потреблять данные из любого компонента без необходимости запросить его как опоры Явно Отказ

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

Когда вы не должны использовать контекст API?

Основной недостатком контекста API является то, что каждый раз, когда контекст меняется, все компоненты, потребляющие ценность повторного рендеринга. Это может иметь отрицательные последствия эффективности.

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

Разное (но важно!) вопросы

Что такое фрагмент?

Фрагмент является недавно введенным компонентом, который поддерживает возвращение нескольких детей из метода представляют компонента без необходимости постороннего элемента Div.

Вы можете ссылаться на него, используя API первого уровня Rection ( Rect. Фрагмент ) Или используя синтаксический сахар JSX ( <> ).

  • 🔑 вместо возврата Div Из метода визуализации компонента мы можем вместо этого вернуть Фрагмент
  • 📝 Узнать больше
    • Если вам нужно ответить “Почему фрагменты?” , Это dev.to post единственный
    • Официальная документация также касается мотивации и синтаксического сахара JSX

Когда вы должны создать компонент на основе класса против функционального компонента?

В мире реагируют, существуют два способа создания компонентов реагирования. Одним из них является использование класса, полученного из Реагировать. Компонент А другой – использовать функциональный компонент с крючками.

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

С крючками, классами и функциональными компонентами, как правило, взаимозаменяемы, и, как мы введем в Новый год, Trend ясно: функциональные компоненты находятся на подъеме и по причинам.

Функциональные компоненты разблокируют все преимущества крючков, включая простоту использования, тестируемости и очиститель.

На момент написания этого письма нет эквивалентов крючков для (необычного) getsnapshotbeforeupdate , getderedstatefromerror. и ComponentDidcatch Методы жизненного цикла, но они идут «скоро».

  • 🔑 Компоненты класса и функциональные компоненты в основном взаимозаменяемы. Выберите то, что кодовая база уже используется для согласованности. Для новых проектов используйте крючки, если вам не нужен метод жизненного цикла крючков, еще не поддерживает.
  • 📝 Узнать больше

Что такое компонент более высокого порядка?

Компонент более высокого порядка (HOC) – это функция, которая принимает компонент и возвращает новый модифицированный компонент.

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

Вы можете писать пользовательские HOCS или импортировать их из библиотек. Одним из примеров HOC с открытым исходным кодом является Ract Cortable Hoc , в результате чего вы передаете компонент списка (на основе UL Несомненно и получить расширенный UL С сортировкой и перетаскиванием возможностей.

Что такое портал?

Реагниадременно имеет одну монтажную точку – HTML-элемент, который вы проходите к взаимодействию .render. Отсюда реагирование добавляет новые элементы на страницу в иерархии.

Изредка вам нужно вырваться из этой иерархии. Представьте себе маленький компонент с кнопкой, чтобы открыть модаль. Потому что модальные «разливы» из контейнера, это не только неенационально, оно также может быть подлежит выключению, потому что о том, что о компонентах уже есть Переполнение: скрыто Установить или преднамеренный z-index Отказ

Это где портал приходит в ✅.

Портал и CreatePortal Функция предоставляет вам способ отображать детей в дополнительной точке монтажа (в дополнение к основной точке монтажа, передаваемой в Reactom.runder ).

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

Портал в основном используется, когда родительский компонент имеет Переполнение: скрыто или z-index , но вам нужен ребенок, чтобы визуально «вырваться» его контейнера.

Примеры включают модали, подсказки и диалоги; Тем не менее, мы обычно используем сторонние компоненты в любом случае, означающие, что мы вряд ли должны будут писать портал-код сами.

  • 🔑 порталы предоставляют первоклассный способ оказать детей в узле DOM, который существует за пределами иерархии DOM из родительского компонента
  • 📝 Узнать больше

Что такое неконтролируемые и контролируемые компоненты?

Управляемый компонент – это входной компонент, такой как вход , Textarea или Выберите чья ценность контролируется реагированием.

И наоборот, неконтролируемый компонент управляет своим собственным состоянием – компонент не контролируется реакцией и, следовательно, «неконтролируемым».

Представьте, если вы обманываете Textarea на странице и начать печатать.

Все, что вы набрали, будут храниться в Textarea автоматически и доступны через его ценность имущество. Хотя реагирование может получить доступ к значению с Ref Реагирование не контролирует значение здесь. Это будет пример неконтролируемого компонента.

Чтобы контролировать этот компонент в реакции, вам нужно будет подписаться на Textarea s Onchange Событие и обновление переменной состояния (например, один называется вход ) в ответ.

Теперь React управляет ценностью Textareas, вы также должны взять на себя ответственность за установку свойства Textareas Value также. Таким образом, содержание текстареа может быть обновлено путем обновления состояния. Легко представить функцию, называемую cleartextarea, которая устанавливает переменную входного состояния в пустую строку, вызывающую очистку Textarea.

  • 🔑 Имена «контролируемые компонент» и «неконтролируемый компонент» являются ненужными широкими. Более конкретные имена были бы «контролируемыми входные компонент» и «неконтролируемый вход компонент», сужение вашего ответа на фокус на входных компонентах будет гарантировать, что вы ответите на вопрос
  • 📝 Узнать больше

Оригинал: “https://dev.to/scrimba/react-interview-questions-to-expect-in-2021-with-answers-dfl”

Читайте ещё по теме: