18 избранных вопросов интервью React с ответами на «Высокочастотное интервью»

предисловие

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

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

1. Что такое виртуальный DOM?

отвечать

Виртуальный DOM — это хранящееся в памяти представление реальных HTML-элементов, из которых состоит пользовательский интерфейс приложения. Когда компонент повторно визуализируется, виртуальная модель DOM сравнивает изменения со своей моделью модели DOM, чтобы создать список обновлений для применения. Основное преимущество заключается в том, что он эффективен и требует минимальных изменений в фактическом DOM без необходимости повторного рендеринга больших фрагментов.

дальнейшее чтение

• Понимание виртуального DOM
• Объяснение виртуального DOM

2. Что такое JSX?

отвечать

JSX — это расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код. Он компилируется в обычные вызовы функций JavaScript, предоставляя лучший способ создания разметки компонентов.

Код JSX выглядит следующим образом:

<div className="sidebar" />

Он транслируется в следующий JS-код:

React.createElement(
  'div',
  {className: 'sidebar'}
)

дальнейшее чтение

• Введение в JSX.
• Глубокое понимание JSX

3. В чем разница между компонентами класса и компонентами-функциями?

отвечать

До React 16.8 (в котором были представлены хуки) компоненты на основе классов использовались для создания компонентов, которые должны были поддерживать внутреннее состояние или использовать методы жизненного цикла (т.componentDidMountа такжеshouldComponentUpdate). Компоненты на основе классов — это классы ES6, которые расширяют класс React Component и реализуют как минимумrender()метод.

Компонент класса:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Функциональные компоненты не имеют состояния (опять же, меньше, чем в версиях React 16.8) и возвращают вывод для рендеринга. Их предпочтение рендеринга пользовательского интерфейса зависит только от свойств, поскольку они проще и производительнее, чем компоненты на основе классов.

Компонент функции:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Примечание. Введение хуков в React 16.8 означает, что эти различия больше не применяются (см. вопросы 14 и 15).

дальнейшее чтение

• Сравнение функциональных и классовых компонентов в React
• Компоненты функций и классов в React

4. Какова роль ключей в React?

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

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

<ul>
  {todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  )};
</ul>

Неиспользование ключа или использование индекса в качестве ключа может привести к странному поведению при добавлении и удалении элементов из коллекции.

дальнейшее чтение

• Список и ключ
• Ключевое свойство в React

5. В чем разница между состоянием и реквизитом?

отвечать

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

дальнейшее чтение

• Глубокое понимание свойств и состояния

6. Зачем вызывать setState вместо прямого изменения состояния?

отвечать

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

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

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

дальнейшее чтение

• Используйте состояние правильно

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

отвечать

Чтобы проверить реквизиты компонента, вы можете использоватьprop-typespackage (ранее включенный как часть React до версии 15.5), чтобы объявить тип ожидаемого значения и указать, требуется ли поддержка:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

дальнейшее чтение

• Проверка типов с помощью PropTypes

8. Что такое опорное бурение и как его избежать?

Prop drilling(также известная как многопоточность) — это то, что происходит, когда вам нужно передать данные от родительского компонента к компонентам, расположенным ниже в иерархии, «просверливая» другие компоненты, которым не нужны реквизиты, кроме их передачи.

Иногда можно избежать детализации путем рефакторинга компонентов, предотвращения преждевременного разложения компонентов на более мелкие компоненты и сохранения общего состояния в ближайшем общем родительском элементе. Если вам нужно разделить состояние между компонентами глубоко в дереве компонентов/между собой, вы можете использоватьContext APIили выделенная библиотека управления состоянием (например,Redux).

дальнейшее чтение

• Подробное объяснение бурения с опорой

9. Что такое контекст React?

отвечать

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

дальнейшее чтение

• Контекст в документации React
• Как заменить Redux на React Hooks и Context API

10. Что такое Редукс?

отвечать

Redux — это сторонняя библиотека управления состоянием для React, созданная до появления Context API. Он основан на концепции, называемой контейнером сохраненного состояния, из которого компоненты могут получать данные в качестве свойств. Единственный способ обновить хранилище — отправить в хранилище операцию, которая передается в редюсер. Редьюсер получает операцию и текущее состояние и возвращает новое состояние, которое запускает повторный рендеринг подписанного компонента.

дальнейшее чтение

• Начало работы с Redux
• Погрузитесь в Редукс

11. Какой самый распространенный способ оформления приложения React?

отвечать

Существует несколько способов стилизации компонентов React, каждый из которых имеет свои плюсы и минусы. Среди основных следует упомянуть:

• встроенный стиль: хорошо подходит для прототипирования, но с ограничениями (например, без стилей псевдоклассов).
• Стили CSS на основе классов: более эффективен, чем встроенные стили, и знаком разработчикам, плохо знакомым с React.
• CSS в стилях JS: существует ряд библиотек, которые позволяют объявлять стили как JavaScript внутри компонентов, делая стили более похожими на код.

дальнейшее чтение

• Как стилизовать компоненты React

12. В чем разница между контролируемым компонентом и неконтролируемым компонентом?

отвечать

В документах HTML многие элементы формы (например,<select>、<textrarea>、<input>) остаются в своем собственном состоянии. Неуправляемые компоненты видят в DOM источник истины для этих входных состояний. В контролируемом компоненте внутреннее состояние используется для отслеживания значений элементов. React будет повторно отображать ввод при изменении входного значения.

Неуправляемые компоненты полезны при интеграции с кодом, отличным от React (например, если вам нужно поддерживать какой-то плагин формы jQuery).

дальнейшее чтение

• Управляемые компоненты
• неконтролируемые компоненты
• Контролируемые и неконтролируемые входы

13. Что такое методы жизненного цикла?

отвечать

Компоненты на основе классов могут объявлять специальные методы, которые вызываются в определенные моменты их жизненного цикла, например, при загрузке (рендеринге в DOM) и при выгрузке. Например, они полезны для настройки и удаления вещей, которые могут понадобиться компоненту, установки таймеров или привязки к событиям браузера.

В компоненте могут быть реализованы следующие методы жизненного цикла:

• componentWillMount: вызывается после создания компонента, но до его рендеринга в DOM.
• componentDidMount: вызывается после первого рендера; теперь доступны DOM-элементы компонента
• componentWillReceiveProps: вызывается при обновлении свойства
• shouldComponentUpdate: этот метод предотвращает повторный рендеринг для оптимизации производительности при получении новых реквизитов.
• componentWillUpdate: поворачивать при получении новых PROPS и ComponentUpdate возвращает True
• componentDidUpdate: вызывается после обновления компонента
• componentWillUnmount: вызывается перед удалением компонента из DOM, что позволяет очистить такие вещи, как прослушиватели событий.

При работе с функциональными компонентами вы можете использоватьuseEffectХуки для воспроизведения поведения жизненного цикла.

дальнейшее чтение

• Диаграмма метода жизненного цикла React
• жизненный цикл компонента

14. Что такое хуки React?

отвечать

Хуки — это попытка React перенести преимущества компонентов на основе классов (т. е. методы внутреннего состояния и жизненного цикла) в функциональные компоненты.

дальнейшее чтение

• Изучите хуки React за 5 минут
• React Hooks: как начать и быстро построить

15. Каковы преимущества хуков React?

отвечать

Внедрение хуков в React имеет несколько явных преимуществ:

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

дальнейшее чтение

• Преимущества реактивных крюков
• Преимущества React Hooks по сравнению со старым подходом к многократно используемой логике

16. Почему виртуальный дом повышает производительность?

отвечать

• Виртуальный дом эквивалентен добавлению кеша между js и реальным домом, используя алгоритм dom diff, чтобы избежать ненужных операций с домом, тем самым повышая производительность.
• Используйте структуру объектов JavaScript для представления структуры дерева DOM, затем используйте это дерево для построения настоящего дерева DOM, вставьте его в документ и перестройте новое дерево объектов при изменении состояния. Затем сравните новое дерево со старым деревом, запишите разницу между двумя деревьями, примените разницу, записанную на шаге 2, к настоящему дереву DOM, построенному на шаге 1, и представление обновится.

дальнейшее чтение

• Как понять виртуальный DOM

17. Принцип React diff

отвечать

• Древовидная структура декомпозируется иерархически, и сравниваются только элементы одного уровня.
• Каждая ячейка структуры списка добавляет уникальный ключевой атрибут для удобства сравнения.
• React будет сопоставлять только компоненты одного и того же класса (где класс относится к имени компонента)
• Операции слияния, когда вызывается метод setState компонента, React помечает его как грязный до конца каждого цикла событий, а React проверяет все компоненты, помеченные как грязные, для перерисовки.
• Выборочный рендеринг поддерева. Разработчики могут переопределить shouldComponentUpdate, чтобы улучшить производительность сравнения.

дальнейшее чтение

• Невероятная разница React
• Научит вас принципу React diff

18. Какова роль ссылок в React?

отвечать

Рефы — это дескрипторы, предоставляемые React для безопасного доступа к элементам DOM или экземпляру компонента.

Мы можем добавить атрибут ref к элементу и принять дескриптор элемента в дереве DOM в функции обратного вызова, который будет возвращен в качестве первого параметра функции обратного вызова:

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

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

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

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

дальнейшее чтение

• Когда использовать ссылки

Суммировать

Хотя это не исчерпывающий список (React постоянно развивается), у этих вопросов есть много аспектов. Знание этих проблем даст вам хорошее представление о библиотеке и некоторых ее последних изменениях. Предлагаемое дополнительное чтение поможет укрепить ваше понимание, чтобы вы могли продемонстрировать знания от более мелких к более глубоким.

Надеюсь, это поможет новичкам в React или интервьюерам, удачи!

Ссылка:15 React Interview Questions with Solutions

Если хотите, вы можете подписаться на официальный аккаунт автора [Lazy Code Farmer], мы вместе будем учиться и добиваться успехов. . .