Реагируйте на собеседования с точки зрения интервьюера

внешний интерфейс Программа перевода самородков React.js опрос

Изображение через unsplashrawpixel

важныйВ этой статье не будут перечислены общие вопросы и ответы, которые будут заданы на собеседовании при приеме на работу в React. Цель этого поста — показать вопрос, который я задал, что я искал в ответе и почему нет плохих ответов. Если вы хотите сборник «Лучшие вопросы для интервью 2018 года», посмотрите его.GitHub.com/скорость и вторичный/горячий…

Частью моих должностных обязанностей является проведение так называемых «технических собеседований», на которых я оцениваю потенциальных кандидатов на должности «React Front-End Development».

Если вы когда-либо искали в Google «вопросы для интервью React» (или любые другие «[технические] вопросы для интервью»), вы, вероятно, видели бесчисленное множество «10 лучших вопросов для интервью React», которые либо устарели, либо связаны с «состоянием и реквизитами». разница» или «Что такое виртуальный дом» Эти вопросы повторяются.

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

Интервью не должно быть пустой тратой времени. Это должно дать вам представление о прошлом опыте кандидата, прошлых знаниях и возможностях развития. Кандидат должен познакомиться с вашей компанией и проектом (если это возможно) и получить обратную связь о том, соответствует ли его работа вашим ожиданиям от кандидата на эту должность. На собеседовании не бывает плохих ответов (если вопрос не чисто технический) — его ответ должен позволить вам изучить мыслительный процесс человека.

Эта статья написана с точки зрения интервьюера!

Давайте узнаем друг друга

Во многих случаях интервью будут проводиться через Skype или другие платформы для голосовой (или голосовой и видеосвязи). Попытка познакомиться с потенциальными сотрудниками — отличный способ заставить их уйти.

Не могли бы вы рассказать мне немного о своей предыдущей работе и о том, как вы вписались в команду? Каковы ваши обязанности?

Знание того, что человек делал в своей предыдущей компании (если ему разрешили поделиться), — хорошее начало. Это дает вам некоторые основные сведения о его предыдущем опыте работы: навыки межличностного общения («Я был единственным разработчиком для...», «Мои коллеги и я...», «Я руководил командой из 6 разработчиков...») и трудные навыки («...мы создали приложение, которым пользуется миллион человек», «...я помог оптимизировать время рендеринга приложения», «...создал множество автоматизированных тестов»).

для тебяЧто является основным преимуществом React. ЗачемтыРешили использовать React?

Я не ожидаю, что вы упомянете JSX, VDOM и т. д. — Мы уже можем получить эти вещи, прочитав лид «Featured» на главной странице React.тыЗачем использовать React?

Из-за «простого в освоении, сложного в освоении» API (по сравнению с другими решениями,Конечноочень легкий)? Хорошо. Это означает, что вы готовы изучать новые вещи и использовать их по ходу дела.

Это из-за большего количества «возможностей трудоустройства»? Неплохо — вы тот, кто может адаптироваться к рынку и не будет иметь никаких проблем через 5 лет, когда появится следующий крупный фреймворк. У нас уже достаточно разработчиков jQuery.

Думайте об этом как о сценарии «лоббирования лифта» (вы находитесь в лифте со своим боссом и должны убедить его использовать новую технологию, прежде чем выйти из дверей лифта на 20-м этаже). Интересно, понимаете ли вы, какие преимущества React может принести пользователям и разработчикам.

Перейдем к более техническим вопросам.

Как я уже упоминал в начале абзаца, я не буду спрашивать вас, что такое VDOM. Мы все это знаем, но я спрошу вас...

Что такое JSX и как мы пишем его в коде JavaScript — как его распознает браузер?

Вы знаете, что JSX — это просто синтаксис разметки, популяризированный Facebook, благодаря таким инструментам, как Babel/TSC, — мы можем писать более приятным способом.React.createElementпередача.

Почему я задаю этот вопрос? Интересно, понимаете ли вы технические принципы JSX и связанные с ним ограничения: почему он даже не используется в нашем коде?React, также должны быть вверху файлаimport React from 'react'; почему компоненты не могут напрямую возвращать несколько элементов.

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

Дополнительные баллы: Есть много исключений из этого правила. Например: назначьте компонентthis.componentи написать<this.component />также будет работать.

Какие два основных типа компонентов вы можете объявить в React и как вы выбираете между ними при их использовании?

Некоторые могут подумать, что этот вопрос о компонентах презентации и контейнеров, но это на самом деле оReact.Componentи функциональные компоненты.

В соответствующих ответах должны упоминаться функции жизненного цикла и состояние компонентов.

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

Хорошо, этот вопрос немного длинный. Не стесняйтесь разделить его на два небольших вопроса. Вы сейчас думаете: «Но ведь вы сказали, что не будете спрашивать о жизненных циклах!». Я не буду спрашивать, меня не волнуют жизни. Что меня действительно беспокоит, так это изменения в жизненном цикле в последние месяцы.

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

Бонусные баллы: упомяните, что на сервере это обрабатывается по-другому.

То же самое касается вопроса сбора данных —— componentDidMountтот, который вы хотите/слышите.

Бонусный вопрос: зачем использоватьcomponentDidMountвместоconstructor?
Две причины, по которым вы хотели бы услышать: «Перед появлением данных оказание не существует» - хотя не главная причина, но она показывает, что вы понимаете, что вы понимаете компоненты обработки человека; «Использование нового асинхронного реагированного волокна в рендеринге ...... «- Кто-то пытался учиться.

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

Мы предполагаем, что нет никакой «инвалидации кеша». Этот момент имеет мало общего с React, но было бы неплохо, если бы ответ был ограничен React — может быть, подход GraphQL, который он использует, слишком тяжел для вас?

Я задаю этот вопрос, чтобы увидеть, понимает ли кандидат идею о том, что пользовательский интерфейс должен быть отделен от других слоев приложения. Можно упомянуть API, внешний по отношению к архитектуре React.

Можете ли вы объяснить концепцию «повышения статуса»?

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

Предпочтительный ответ: «это позволяет вам передавать данные между одноуровневыми компонентами» или «это позволяет вам иметь более чистые компоненты представления, которые легче использовать повторно». Здесь может быть упоминание о Redux, но это, вероятно, тоже плохо, поскольку здесь говорится, что кандидат просто следует тому, что рекомендует сообщество, не понимая, зачем ему это нужно.

Бонусный вопрос: если вы не можете передавать данные между компонентами, как вы передаете данные многоуровневым компонентам?Контекст стал основным с React 16.3 — он был и раньше, но документация отсутствует (по задумке). Возможность объяснить, как работает Context (при этом демонстрируя осведомленность о паттерне «функция-как-потомок»), была бы плюсом.

Также было бы неплохо упомянуть здесь Redux или MobX.

Реагировать на экосистему

Разработка приложения React — это только часть процесса — есть еще кое-что: отладка, тестирование и документация.

Как вы отлаживаете проблемы с кодом React и какие инструменты используете? Как бы вы исследовали компонент, не выполняющий повторный рендеринг?

Все должны быть знакомы с такими базовыми инструментами, как линтер (eslint, jslint) и инструменты отладки (React Developer Tools).

Использование RDT для отладки проблемы и проверки правильности состояния/реквизитов компонента является хорошим ответом, и было бы хорошим ответом упомянуть использование инструментов разработчика для точек останова.

Какие инструменты тестирования вы использовали для написания модульных/E2E-тестов? Что такое снэпшот-тестирование и его преимущества?

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

Ответ на вопрос о тестировании моментальных снимков зависит от того, что используется в вашем проекте; не спрашивайте, если вы не считаете это очень полезным. Но если вы сочтете это полезным — ответ будет «удобным регрессионным тестированием для слоев пользовательского интерфейса, сгенерированных HTML + CSS».

Небольшой вызов кода

Если возможно, я бы также предложил кандидатам выполнить небольшие задачи по коду, на решение/объяснение которых уйдет не более минуты или двух, например:

/**
* 这个例子有什么问题，要如何修改或改进这个组件？
*/

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name || 'Anonymous'
    }
  }

  render() {
    return (
      <p>Hello {this.state.name}</p>
    );
  }
}

Есть много способов решить эту проблему: удалить состояние и использовать пропсы, внедритьgetDerivedStateFromPropsИли еще лучше, превратите компонент в функциональный компонент.

/**
 * 这几个向组件传递函数的方式，你能解释它们的不同吗？
 *
 * 当你点击每个按钮会发生什么？
 */

class App extends React.Component {

  constructor() {
    super();
    this.name = 'MyComponent';

    this.handleClick2 = this.handleClick1.bind(this);
  }

  handleClick1() {
    alert(this.name);
  }

  handleClick3 = () => alert(this.name);

render() {
    return (
      <div>
        <button onClick={this.handleClick1()}>click 1</button>
        <button onClick={this.handleClick1}>click 2</button>
        <button onClick={this.handleClick2}>click 3</button>
        <button onClick={this.handleClick3}>click 4</button>
      </div>
    );
  }
}

Этот вопрос требует немного усилий, потому что кода больше. Если кандидат отвечает правильно, спросите «Почему?». Зачемclick 2Будет ли это работать таким образом?

Это не вопрос React, если чей-то ответ начинается с «потому что в React...», он на самом деле не понимает механику цикла событий JS.

/**
 * 这个组件有什么问题。为什么？要如何解决呢？
 */

class App extends React.Component {

state = { search: '' }

handleChange = event => {

/**
     * 这是“防抖”函数的简单实现，它会以队列的方式在 250 ms 内调用
     * 表达式并取消所有挂起的队列表达式。以这种方式我们可以在用户停止输
     * 入时延迟 250 ms 来调用表达式。
     */
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.setState({
        search: event.target.value
      })
    }, 250);
  }

render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        {this.state.search ? <p>Search for: {this.state.search}</p> : null}
      </div>
    )
  }
}

Хорошо, этот вопрос нуждается в пояснении. В функции debounce ошибки нет. Так будет ли приложение вести себя так, как ожидалось? Будет ли он обновлять и отображать строку «Искать: ...» через 250 мс после того, как пользователь перестанет печатать?

Проблема здесь в ReacteventЯвляетсяSyntheticEvent, если взаимодействие с ним задерживается (например: черезsetTimeout), событие очищается и.target.valueСсылка больше недействительна.

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

Технические вопросы решены

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

Какова самая большая проблема, которую вы имели с прошлыми проектами? Ваше величайшее достижение?

Это возвращает нас к первому вопросу — ответ может варьироваться в зависимости от разработчика, а также от должности. Младший разработчик скажет, что его самая большая проблема — ошибки в сложном процессе, но он может справиться с этим. Человек, ищущий более высокую должность, объяснит, как он оптимизирует производительность приложения, а человек, возглавляющий команду, объяснит, как он увеличивает скорость с помощью парного программирования.

Если бы у вас был бесконечный бюджет времени и вас попросили решить/улучшить/изменить одну вещь в вашем последнем проекте, что бы вы выбрали и почему?

Другие открытые вопросы зависят от того, что вы ищете в кандидате. Попытается ли он заменить Redux на MobX? Улучшить настройку теста? Написать лучшую документацию?

Обмен формами и обратной связью

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

Carl VitulloНаписал несколько хороших статей о вопросах, которые можно задать вашим потенциальным работодателям, и я бы порекомендовал их вам — будьте готовы ответить на них, если вы не можете задать определенные вопросы из-за соглашений о неразглашении или по другим причинам:

дать обратную связь

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

Если остальная часть процесса найма зависит от вас, скажите им, что вы свяжетесь с ними в течение X дней, если нет, скажите им, что это сделает кто-то из вашей компании. Если вы знаете, что процесс займет больше 2-3 дней, сообщите об этом. В наши дни ИТ — это большой рынок, и кандидат может пройти несколько собеседований — он может принять другое предложение, не дожидаясь вашего отзыва.

Не относитесь к кандидатам легкомысленно — на самом деле это распространенная жалоба в социальных сетях.

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

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории