Вопросы и ответы React собеседования 2023 - Часть 1

год назад·6 мин. на чтение

Актуальный список вопросов и ответов по ReactJS на собеседовании 2023

1. Как работает React?

React создает виртуальный DOM. Когда состояние компонента изменяется, он сначала запускает алгоритм сравнения, который идентифицирует, что изменилось в виртуальном DOM. Второй шаг — согласование (reconciliation), при котором DOM обновляется результатами из сравнения.

2 Каковы достоинства использования React?

  • Легко узнать, как визуализируется компонент, вам просто нужно взглянуть на функцию рендеринга.
  • JSX упрощает чтение кода ваших компонентов. Также очень легко увидеть макет или то, как компоненты подключены/объединены.
  • Вы можете рендерить React на стороне сервера. Это улучшает SEO и производительность.
  • Легко тестировать.

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

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

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

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

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

Состояние — это структура данных, которая начинается со значения по умолчанию при монтировании компонента. Он может видоизменяться со временем, в основном в результате пользовательских событий. Пропсы (сокращение от properties, props) — это конфигурация компонента. Они получены сверху из компонента родителя и неизменяемы (иммутабельны). Компонент не может изменять свои пропсы. Функции обратного вызова также можно передавать в качестве пропсов.

6. Какие существуют методы жизненного цикла?

  • componentWillMount (устаревший) — чаще всего используется для настройки приложения в корневом компоненте.
  • componentDidMount — здесь вы можете сделать всю настройку, которую вы не смогли бы сделать без DOM, и начать получать все необходимые вам данные. Кроме того, если вы хотите настроить прослушиватели событий и т. д., этот хук жизненного цикла — хорошее место для этого.
  • componentWillReceiveProps (устаревший) — этот жизненный цикл действует на определенные изменения пропсов, чтобы вызвать переходы состояний.
  • shouldComponentUpdate — если вы беспокоитесь о потраченных впустую рендерах, shouldComponentUpdate — отличное место для повышения производительности, поскольку оно позволяет предотвратить повторный рендеринг, если компонент получает новый проп. shouldComponentUpdate всегда должен возвращать логическое значение, и на его основе будет определяться, будет ли компонент перерисован или нет.
  • componentWillUpdate (устаревший) — используется редко. Его можно использовать вместо componentWillReceiveProps для компонента, у которого также есть shouldComponentUpdate (но нет доступа к предыдущим значениям пропсов).
  • componentDidUpdate — также обычно используется для обновления DOM в ответ на изменение пропсов или состояния.
  • componentWillUnmount — позволяет отменить любые исходящие сетевые запросы или удалить все прослушиватели событий, связанные с компонентом. Вызывается перед размонтированием компонента.

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

Хуки позволяют вам использовать больше функций React без использования классов. Первый хук, с которым вы, скорее всего, столкнетесь, это useState. useState — это хук, который позволяет добавлять состояние React к компонентам-функциям. Он возвращает массив с геттером и сеттером. Синтаксис выглядит так:
const [count, setCount] = React.useState(0);

<button onClick={() => setCount(count + 1)}>Increase Count</button>;
Эквивалентом при использовании компонента класса будет.
this.state = {
  count: 0,
};

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Increase Count
</button>;
Следующий хук, с которым вы, скорее всего, столкнетесь, это useEffect. Хук эффектов позволяет выполнять побочные эффекты в функциональных компонентах. Передача пустого массива в качестве второго аргумента useEffect эквивалентна использованию componentDidMount. Если вы передадите значение в массив, функция useEffect будет вызываться только при обновлении значения в массиве.
useEffect(() => {
  // делаем что-то, когда компонент монтируется
}, []);
Подробнее о хуках:

8. Где стоит выполнять AJAX/API запрос в классовом React компоненте?

componentDidMount — это место, где должен быть сделан запрос AJAX в компоненте React. Этот метод будет выполнен, когда компонент монтируется (добавляется в DOM) в первый раз. Этот метод выполняется только один раз в течение жизненного цикла компонента.

9. Что такое управляемые компоненты?

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно поддерживают свое собственное состояние и обновляют его на основе ввода пользователя. Когда пользователь отправляет форму, значения из упомянутых элементов отправляются вместе с формой. С React это работает иначе. Компонент, содержащий форму, будет отслеживать значение ввода в своем состоянии и будет повторно отображать компонент каждый раз, когда запускается функция обратного вызова, например, onChange, когда состояние будет обновлено. Элемент формы ввода, значение которого управляется React таким образом, называется управляемым компонентом. Видео про управляемые компоненты.

10. Для чего в React используются рефы?

Рефы используются для получения ссылки на DOM узел или экземпляр компонента в React. Хорошими примерами использования ссылок являются управление фокусом/выбором текста, запуск императивной анимации или интеграция со сторонними DOM библиотеками.

11. Что такое компоненты высшего порядка?

Компонент высшего порядка (Higher Order Component, HOC) — это компонент, который принимает компонент и возвращает новый компонент. HOC позволяют повторно использовать код и инициализировать компонент. Наиболее популярным HOC является функция connect из Redux. Помимо простого совместного использования библиотек и простой композиции, HOC — лучший способ хранить общее поведение между React компонентами. Если вы обнаружите, что пишете много кода в разных местах, который делает одно и то же, вы можете реорганизовать этот код в многоразовый HOC. Видео по теме:

12. Какие преимущества дает использование стрелочных функций?

  • Безопасность области действия: до появления стрелочных функций каждая новая функция определяла собственное значение this (новый объект в случае конструктора, undefined в вызовах функций в строгом режиме или базовый объект, если функция вызывается как «метод объекта» и т. д.). Стрелочная функция не создает собственного this, используется значение this окружающего контекста выполнения.
  • Компактность: стрелочные функции легче читать и писать.
  • В классовых React компонентах стрелочные функции удобнее использовать для того чтобы избежать байндинга методов при передаче их в качестве функций обратного вызова.

13. Как бы вы предотвратили рендеринг классового компонента?

Возврат null из метода рендеринга компонента означает, что ничего не будет отображаться, но это не влияет на срабатывание методов жизненного цикла компонента. Если количество повторных рендеров компонента является проблемой, доступны два варианта. Ручная реализация проверки в методе жизненного цикла shouldComponentUpdate.
shouldComponentUpdate(nextProps, nextState){
  const allowRender = true;
  // Делаем здесь некоторую проверку и назначаем решение в allowRender
  return allowRender
}
Или использовать React.PureComponent вместо React.Component. React.PureComponent реализует shouldComponentUpdate() с поверхностным сравнением пропсов и состояний. Это позволяет избежать повторного рендеринга компонента со значениями просов и состояний, которые не поменялись.

14. Что такое key при рендеринге списка и для чего он нужен?

Key помогают React определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть даны элементам внутри массива, чтобы однозначно идентифицировать элементы. Лучший способ выбрать ключ — использовать строку, которая однозначно идентифицирует элемент списка среди его соседей, например, id. Чаще всего вы будете использовать идентификаторы из ваших данных в качестве ключей. Если у вас нет стабильных идентификаторов для отображаемых элементов, вы в крайнем случае можете использовать индекс элемента в качестве ключа. Не рекомендуется использовать индексы для ключей, т.к. это может привести к неверному отображению элементов в случае их удаления или изменения порядка. Также key можно использовать для пересоздания компонентов.

15. Для чего нужно вызывать super(props)?

Конструктор дочернего класса не может использовать this до тех пор, пока не будет вызвана функция super(). Кроме того, конструкторы классов ES2015 должны вызывать super(), если они являются подклассами. Причина передачи пропса в super() заключается в том, чтобы вы могли получить доступ к this.props в конструкторе. Хочешь узнать больше? Еще вопросы с собеседований.

Вопросы и ответы React собеседования 2023 - Часть 2

год назад·6 мин. на чтение

Актуальный список вопросов и ответов по ReactJS на интервью 2023 - Часть 2

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

  • JSX — это расширение синтаксиса для JavaScript, обладающее всеми возможностями JavaScript.
  • Вы можете внедрить любое выражение JavaScript в JSX, заключив его в фигурные скобки. После компиляции выражения JSX становятся обычными объектами JavaScript.
  • Это означает, что вы можете использовать JSX внутри операторов if и циклов for, назначать его переменным, принимать в качестве аргументов и возвращать из функций.

2. Каков эквивалент следующего кода с использованием React.createElement?

const element = <h1 className="greeting">Hello, world!</h1>;
Эквивалент с использованием React.createElement будет выглядеть следующим образом:
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

3. Что такое Redux?

  • Основная идея redux заключается в том, что все состояние приложения хранится в одном хранилище. Store (хранилище) - это просто JavaScript объект.
  • Единственный способ изменить состояние — отправить действие (action) из вашего приложения, а затем написать редьюсеры для этих действий, которые изменяют состояние.
  • Весь переход состояния хранится внутри редьюсеров и не должен иметь никаких побочных эффектов.
Подробнее о Redux можно узнать в бесплатном видео-курсе о Redux.

4. Что такое store в Redux?

Store — это JavaScript объект, который содержит состояние приложения. Наряду с этим он также имеет следующие обязанности:
  • Разрешает доступ к состоянию через getState().
  • Позволяет обновлять состояние с помощью отправки действия dispatch(action).
  • Регистрирует слушателей через subscribe(listener).
  • Обрабатывает отмену регистрации слушателей с помощью функции, возвращаемой из subscribe(listener).

5. Разница между action и reducer.

  • Action (действие) — это простые JavaScript объекты.
  • Они должны иметь тип, указывающий тип выполняемого действия.
  • По сути, действия — это некоторые данные, которые отправляются из вашего приложения в хранилище.
  • Редьюсер — это просто чистая функция, которая принимает предыдущее состояние и действие и возвращает обновленное состояние.

6. Для чего используется Redux Thunk?

  • Redux Thunk — это промежуточное программное обеспечение (middleware), которое позволяет вам писать создателей действий (action creator), которые возвращают функцию вместо действия (action). Что такое action creators?
  • Затем thunk можно использовать для задержки отправки действия, если выполняется определенное условие. Это позволяет вам обрабатывать асинхронную диспетчеризацию действий.
  • Подробнее о Redux Thunk можно узнать в полном видео-курсе о Redux Thunk.

7. Напишите кастомный хук, который можно использовать для debounce’а ввода.

// Хук useDebounce

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timeout);
    };
  }, [value]);

  return debouncedValue;
};

// Использование

const Counter = () => {
  const [value, setValue] = useState(0);
  const lastValue = useDebounce(value, 1000);

  return (
    <div>
      <p>
        Current Value: {value} | Debounced Value: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
};

8. Напишите кастомный хук для копирования текста в буфер обмена.

// Хук useCopyToClipboard

function useCopyToClipboard(content) {
  const [isCopied, setIsCopied] = useState(false);

  const copy = useCallback(() => {
    navigator.clipboard
      .writeText(content)
      .then(() => setIsCopied(true))
      .then(() => setTimeout(() => setIsCopied(false), 1250))
      .catch((err) => alert(err));
  }, [content]);
  return [isCopied, copy];
}
// Использование
export default function App() {
  const [isCopied, copy] = useCopyToClipboard("Text to copy!");
  return <button onClick={copy}>{isCopied ? "Copied!" : "Copy"}</button>;
}

9. Как использовать хук useId для создания уникальных идентификаторов?

  • useId не принимает никаких параметров.
  • useId возвращает уникальную строку идентификатора, связанную с этим конкретным вызовом useId в этом конкретном компоненте.
// Использование

import { useId } from "react";

const App = () => {
  const id = useId();

  return (
    <form>
      <label htmlFor={`email-${id}`}>Email</label>
      <input type="text" id={`email-${id}`} name="email" />

      <label htmlFor={`password-${id}`}>Password</label>
      <input type="password" id={`password-${id}`} name="password" />
    </form>
  );
};

// Плохая практика - не стоит использовать в качестве key
const id = useId();

return posts.map((post) => <article key={id}>...</article>);
Подробности можно найти в статье Что за хук useId в React?.

10. Как проверить/валидировать пропсы в React?

Мы можем использовать пакет prop-types Раньше, до React v15.5, это было частью самого React.
import PropTypes from "prop-types";

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;
Еще один вариант - это добавить к проекту TypeScript.

11. Приведите практический пример компонента высшего порядка в React.

// Компонент высшего порядка
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return <p>Please wait, fetching your data in no time...</p>;
  };
}
export default WithLoading;
// Использование

import UserListComponent from "./UserListComponent.js"; // импорт компонента
import WithLoading from "./withLoading.js"; // импорт HOC

const ListWithLoading = WithLoading(UserListComponent); // обернем компонент в HOC

const App = () => {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // запрос данных
    const dataFromApi = ["this is coming from API call", "don't show loader"];
    
    // в это время загрузчик будет показан в HOC
    // данные получены
    setUsers([...dataFromApi]);
    setLoading(false);
  }, []);

  return <ListWithLoading isLoading={loading} users={users} />;
};

12. Чем полезен хук useDeferredValue?

  • useDeferredValue — это React хук, который позволяет вам отложить обновление части пользовательского интерфейса.
  • По сути, это позволяет вам выполнять технику debounce с меньшим количеством кода.
  • Подробный разбор хука useDeferredValue можно прочитать в статье Хуки useTransition и useDeferredValue в ReactJS 18.
// Использование

import { useState, useDeferredValue } from "react";
// Компонент userList получает searchText для запроса списка пользователей
import UserList from "./UserList.js";

export default function App() {
  const [searchText, setSearchText] = useState("");
  // отправить searchText по умолчанию
  const deferredQuery = useDeferredValue(searchText);

  return (
    <>
      <label>
        Search user:
        <input
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
      </label>
      <div>
        <UserList searchText={deferredQuery} />
      </div>
    </>
  );
}

13. Как отследить клик за пределами компонента React?

export default function OutsideAlerter() {
  const clickMeDivRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    };

    // Добавим прослушивание событий
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      // Удалим прослушивание событий
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [clickMeDivRef]);

  return <div ref={clickMeDivRef}>Clicked me?</div>;
}

14. Почему имена компонентов React должны начинаться с заглавных букв?

В JSX имена тегов нижнего регистра считаются тегами HTML. Однако имена тегов в нижнем регистре с точкой (аксессор свойства) не являются таковыми.
  • <person /> компилируется в React.createElement('person') (тег html)
  • компилируется в React.createElement(Person)
  • <obj.person /> компилируется в React.createElement(obj.person)
// Ошибка! Это компонент и должен начинаться с заглавной буквы
function person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Ошибка! React считает <person /> тэгом HTML, т.к. Не с заглавной буквы
  return <person isLearning={true} />;
}

// Верно! Это компонент и должен начинаться с заглавной буквы
function Person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Верно! React знает, что <Person /> - это компонент, с заглавной буквы
  return <Person isLearning={true} />;
}

15. В чем разница между npx и npm?

  • npm — это менеджер пакетов, который можно использовать для установки пакетов node.js. npM - Manager.
  • npx— это инструмент для выполнения пакетов node.js. npX - Execute.
Неважно, установили ли вы этот пакет глобально или локально. npx временно установит его и запустит. npm также может запускать пакеты, если вы настроите файл package.json. Поэтому, если вы хотите быстро проверить/запустить пакет без его установки - используйте npx. create-react-app — это npm пакет, который должен запускаться только один раз в жизненном цикле проекта. Следовательно, предпочтительнее использовать npx для установки и запуска за один шаг.
> npx create-react-app my-app

16. Как установить фокус на поле ввода после монтирования компонента в UI?

import React, { useEffect, useRef } from "react";

const SearchPage = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} type="text" />
    </div>
  );
};
Еще больше вопросов с собеседований