Собеседование ReactJS - вопросы и ответы

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

В‌ ‌этой ‌статье рассмотрим 10 вопросов, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика.

Подписывайтесь на наш Boosty и задавайте ваши вопросы через форму. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы. Если вы начинающий фронтенд-разработчик, это лучшая возможность получить ответ на вопрос, который вы стеснялись задать коллегам. А еще на Boosty вас уже ожидают эксклюзивные статьи и видео на актуальные темы. Итак, теперь рассмотрим вопросы с собеседований:

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

Элемент называется управляемым, если его значение контролирует React. Эта тема связана с такими HTML элементами как input, textarea, select. Обычно эти элементы сами управляют своим состоянием и сами обновляются когда пользователь вводит данные. Это неуправляемые компоненты - они хранят свои данные прямо в DOM. Чтобы прочитать их значения, используются рефы. Для того чтобы сделать управляемый компонент, нужно чтобы значение этих элементов хранилось именно в состоянии React компонента, т.е. управлялось через setState/useState, таким образом состояние React-компонента становится единственным источником правды для этих элементов.
// Управляемый компонент
import React, { useState } from 'react'

export function ControlledInput() {
  const [name, setName] = useState('')

  function handleNameChange(event) {
    setName(event.target.value)
  }

  function handleSubmit(event) {
    event.preventDefault()
    console.log(name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}
// Неуправляемый компонент
import React, { useRef } from 'react'

export function UncontrolledInput() {
  const nameInput = useRef()

  function handleSubmit(event) {
    event.preventDefault()
    console.log(nameInput.current.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInput} defaultValue="" />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}
Исходный код

Что такое контекст в React (React Context)?

Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях. Обычно данные в React-приложении передаются от родителя к дочернему компоненту через пропсы (Как передавать данные между компонентами в ReactJS). Но когда компонентов много или множество компонентов должны быть изменяемы в зависимости от темы - то передавать пропсы для такого случая очень сложно. Для решения этой проблемы можно использовать контекст. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева компонентов. Создаем контекст.
// context.js
import { createContext } from 'react'

export const Context = createContext()
Оборачиваем пользователей этого контекста в тег <Context.Provider /> и передаем внего значения через проп value.
// Component.js
import { useState } from 'react'
import { Context } from './context'

import Parent from './Parent'

export const Component = () => {
  const [name, setName] = useState()

  return (
    <Context.Provider value={{ name, setName }}>
      <Parent />
    </Context.Provider>
  )
}
В компоненте Parent вызываем функцию setName из контекста.
// Parent.js
import { useContext } from 'react'

import { Context } from './context'
import Child from './Child'

export const Parent = () => {
  const { setName } = useContext(Context)

  const handleNameChange = (event) => {
    setName(event.target.value)
  }

  return (
    <>
      <input
        type="text"
        onChange={handleNameChange}
      />

      <Child />
    </>
  )
}
В компоненте Child читаем из контекста значение name.
// Child.js
import { useContext } from 'react'
import { Context } from './context'

export const Child = () => {
  const { name } = useContext(Context)

  return (
    <span>Name is: {name || '<Not set>'}</span>
  )
}

Что такое порталы в React?

Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента. Порталы особенно спасают когда в родительском компоненте заданы стили overflow: hidden или z-index, и нужно, чтобы дочерний элемент визуально выходил за рамки своего контейнера. Это диалоги, модальные окна или всплывающие подсказки.

Что такое refs в React и в чем их важность?

Рефы дают возможность получить доступ к DOM-узлам или React-компонентам. Ситуации, в которых использование рефов является оправданным:
  • Управление фокусом, выделение текста или воспроизведение медиа;
  • Императивный вызов анимаций;
  • Интеграция со сторонними DOM-библиотекам;
  • и др.
В рефах можно хранить любое значение, не обязательно ссылку на элемент. Изменение поля current не приводит к реренденру компонента.
import React, { useRef } from 'react'

export function UncontrolledInput() {
  const nameInput = useRef()

  function handleSubmit(event) {
    event.preventDefault()
    console.log(nameInput.current.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameInput} defaultValue="" />
      <button type="submit">Submit</button>
    </form>
  )
}

Что такое key в React и в чем их важность?

Key - это специальный строковый атрибут, который нужно указывать при создании списка элементов. Если мы хотим показать компоненты в списке то нужно указать эти ключи явно, чтобы помочь React определять, какие элементы были изменены, добавлены или удалены. Далее React сопоставляет элементы массива с течением времени. Если у элемента есть id то лучше всего использовать именно это значение в качестве ключа. В крайнем случае можно использовать индекс элемента как ключ. Если порядок элементов может поменяться, использовать индексы в качестве ключей крайне не рекомендуется. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Еще один сценарий использования key

Render props

Render prop относится к возможность разделять код между компонентами с помощью пропа, значение которого является функцией. Render prop — функция, которая сообщает компоненту, что необходимо рендерить.
// Example.jsx
import React, { useState } from "react";
import Button from "react-bootstrap/Button";

import { CartIcon } from "./CartIcon/CartIcon";

const renderBadge = (count) => {
  return (
      <div>{count}</div>
  );
};

export const Example = () => {
  const [cart, setCart] = useState([]);

  const handleClick = () => {
    console.log("Cart Item clicked");
  };

  return (
    <CartIcon
      renderBadge={() => renderBadge(cart.length)}
      onClick={handleClick}
    />
  );
};
// CartIcon.jsx
import React from "react";
import { MdShoppingCart } from "react-icons/md";

export const CartIcon = ({ renderBadge = () => null, onClick }) => {
  return (
    <div onClick={onClick}>
      <div>{renderBadge()}</div>
      <MdShoppingCart />
    </div>
  );
};
Исходный код

Что такое Redux?

Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Он хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action - это объект, который описывает действие (он отвечает на вопрос: "Что я хочу изменить в состоянии?"). Далее action попадает в reducer, где описано, как состояние должно быть изменено. (reducer отвечает на вопрос: "Как я хочу изменить стэйт?").

Как реализовать сайд эффекты в Redux

Сайд эффект - это действие, которые должно произойти на диспатчинг экшена, помимо после сохранения в стор, например, логирование в консоль или отправка запроса на сервер. Основной способ сделать сайд эффект - вызвать его в middleware. Можно написать свой middleware, а можно использовать сторонние библиотеки, например, redux thunk - для синхронных и простых асинхронных действий или redux saga - для сложных асинхронных действий. Можно вызывать сайд эффекты в action сreator'ах. Однако, это не самый лучший способ, т.к. можно задиспатчить действие и без вызова action creator, тогда сайд эффект не сработает.

React - реактивен?

Начнем с того, что React-компоненты это функции, которые мы не вызываем на прямую. Эти функции в некоторые моменты возвращают описание того что нужно рендерить. Эти функции вызывает сам React в те самые "некоторые" моменты. И React может отложить этот вызов. React рекурсивно обходит дерево компонентов и может применять оптимизации - и задерживать рендеры чтобы избежать потерю кадров. React в первую это UI фреймворк, и для того чтобы избежать тормозов такие меры оправданы. Т.к. данные могут поступать быстрее чем скорость обновления кадров - есть смысл объединять обновления в пакеты и обновлять пакетами. Поэтому React это скорее «Планировщик», и реактивность не провалятся в React в чистом виде.

Что такое синтетические события в React?

SyntheticEvent это обёртка над нативными событиями. SyntheticEvent является частью системы событий React. Ваши обработчики событий получают экземпляр SyntheticEvent, это кроссбраузерная обёртка над нативным экземпляром события. У неё такой же интерфейс, как и у нативного события, включая методы stopPropagation() и preventDefault(). Эта обёртка помогает событиям работать одинаково во всех браузерах. Еcли всё-таки нужно получить нативное браузерное событие, следует обратиться к атрибуту nativeEvent. Синтетические события отличаются от нативных событий браузера и непосредственно не связаны с ними.

Как работает браузер?

Обо всех шагах, которые совершает браузер при переходе на страницу вы можете найти в этом посте.

Задачи на написание кода

Подробный разбор одной из задач с реального собеседования вы можете найти на Boosty. Там вы можете найти как неоптимальный вариант решения, так и оптимальный. С описанием сложности каждого варианта решения в нотации Big "O" notaion. Также по теме собеседований рекомендую прочитать:

Микрофронтенд и Module Federation

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

Module Federation - это плагин для Webpack. С его помощью можно разбивать приложение на микрофронтенды, подключив их в хост приложение.

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

Низкоуровневые концепции

Различаются два вида модулей - локальные и удаленные модули. Локальные модули — это обычные модули, которые являются частью текущей сборки. Удаленные модули (remote modules) — это модули, которые не являются частью текущей сборки, но загружаются во время выполнения из удаленного контейнера. Загрузка удаленных модулей считается асинхронной операцией. Невозможно использовать удаленный модуль без загрузки его чанка. Операция загрузки чанка обычно является вызовом import(), но также поддерживаются более старые конструкции, такие как require.ensure или require([...])). Контейнер создается с помощью точки входа контейнера, которая предоставляет асинхронный доступ к определенным модулям. Доступ к предоставляемым (expose) моделям разделен на два этапа:
  1. загрузка модуля (асинхронная)
  2. выполнение модуля (синхронная).
Шаг 1 будет выполнен во время загрузки чанка. Шаг 2 будет выполнен во время выполнения модуля, чередующегося с другими (локальными и удаленными) модулями. Таким образом, порядок выполнения не зависит от преобразования модуля из локального в удаленный или наоборот. Возможно вложение контейнеров. Контейнеры могут использовать модули из других контейнеров. Также возможны циклические зависимости между контейнерами.

Высокоуровневые концепции

Каждая сборка действует как контейнер, а также потребляет другие сборки в качестве контейнеров. Таким образом, каждая сборка может получить доступ к любому другому предоставленному модулю, загрузив его из своего контейнера. Общие модули — это модули, которые являются переопределяемыми и предоставляются в качестве переопределений для вложенных контейнеров. Они обычно указывают на один и тот же модуль в каждой сборке, например, на одну и ту же библиотеку. Параметр packageName позволяет задать имя пакета для поиска requiredVersion. Он автоматически выводится для запросов модуля по умолчанию. Установите requiredVersion в false, когда автоматический вывод должен быть отключен.

Основные части

ContainerPlugin (низкий уровень)

Этот плагин создает дополнительную запись контейнера с указанными открытыми модулями.

ContainerReferencePlugin (низкий уровень)

Этот плагин добавляет конкретные ссылки на контейнеры как внешние и позволяет импортировать удаленные модули из этих контейнеров. Он также вызывает API override этих контейнеров для предоставления им переопределений. Локальные переопределения (через __webpack_override__ или override API когда сборка является контейнером) и указанные переопределения предоставляются всем контейнерам, на которые имеются ссылки.

ModuleFederationPlugin (высокий уровень)

ModuleFederationPlugin объединяет ContainerPlugin и ContainerReferencePlugin.

Какие цели преследует Module Federation

  • Должна быть возможность предоставлять и использовать любой тип модуля, поддерживаемый webpack.
  • При загрузке чанков должно загружаться все необходимое параллельно (за один запрос к серверу).
  • Управление от потребителя к контейнеру
    • Переопределение модулей представляет собой однонаправленную операцию.
    • Родственные контейнеры не могут переопределять модули друг друга.
  • Концепция должна быть независимой от среды.
    • Можно использовать в web, Node.js и т. д.
  • Относительный и абсолютный запрос в shared:
    • Всегда будет предоставлен, даже если не используется.
    • Будет разрешаться относительно config.context.
    • Не использует requiredVersion по умолчанию.
  • Запросы модулей в shared:
    • Предоставляются только тогда, когда они используются.
    • Будет соответствовать всем используемым равным запросам модулей в вашей сборке.
    • Предоставит все соответствующие модули.
    • Будет извлекать requiredVersion из package.json в этой позиции в графе.
    • Может предоставлять и использовать несколько различных версий при наличии вложенных node_modules.
  • Запросы модулей с / в shared будут сопоставлять все запросы модулей с этим префиксом.

Примеры использования

Отдельные сборки для каждой страницы

Каждая страница одностраничного приложения предоставляется из контейнерной сборки в отдельной сборке. Оболочка приложения (application shell) также представляет собой отдельную сборку, ссылающуюся на все страницы как на удаленные модули. Таким образом, каждая страница может быть развернута отдельно. Оболочка приложения заново развертывается при обновлении маршрутов или добавлении новых маршрутов. Оболочка приложения определяет часто используемые библиотеки как разделяемые модули (shared), чтобы избежать их дублирования в сборках страниц.

Библиотека компонентов в качестве контейнера

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

Динамические удаленные контейнеры

Интерфейс контейнера поддерживает методы get и init. init — это async метод, который вызывается с одним аргументом: объектом общей области (shared scope). Этот объект используется в качестве общей области в удаленном контейнере и заполняется предоставленными модулями от хоста. Его можно использовать для динамического подключения удаленных контейнеров к контейнеру хоста во время выполнения.
// init.js

(async () => {
  // Инициализирует общую область. Заполняет его предоставленными модулями 
  // из текущего билда и из удаленных билдов
  await __webpack_init_sharing__('default');
  const container = window.someContainer; // или получить контейнер откуда-либо еще
  // Проинициализируйте контейнер, он может предоставлять общие модули
  await container.init(__webpack_share_scopes__.default);
  const module = await container.get('./module');
})();
Контейнер пытается предоставить общие модули, но если общий модуль уже использовался, предупреждение и предоставленный общий модуль будут проигнорированы. Контейнер может по-прежнему использовать его в качестве запасного варианта. Таким образом, вы можете динамически загружать A/B-тест, который предоставляет другую версию общего модуля. Убедитесь, что контейнер загружен, прежде чем пытаться динамически подключить удаленный контейнер. Пример:
// init.js

function loadComponent(scope, module) {
  return async () => {
    // Инициализирует общую область. Заполняет его предоставленными модулями 
    // из текущего билда и из удаленных билдов
    await __webpack_init_sharing__('default');
    const container = window[scope]; // или получить контейнер откуда-либо еще
    // Проинициализируйте контейнер, он может предоставлять общие модули
    await container.init(__webpack_share_scopes__.default);
    const factory = await window[scope].get(module);
    const Module = factory();
    return Module;
  };
}

loadComponent('abtests', 'test123');

Динамические удаленные модули на основе промисов

Как правило, удаленные модули настраиваются с использованием URL-адресов, как в этом примере:
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};
Но вы также можете передать промис в этот модуль, который будет зарезолвлен во время выполнения. Вы должны зарезолвить этот промис с помощью любого модуля, который соответствует интерфейсу get/init, описанному выше. Например, если вы хотите передать, какую версию fedarated модуля вы должны использовать, с помощью параметра запроса вы можете сделать что-то вроде следующего:
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: `promise new Promise(resolve => {
      const urlParams = new URLSearchParams(window.location.search)
      const version = urlParams.get('app1VersionParam')
      // Эта часть зависит от того как вы планируете хостить
      // и версионировать ваши federated модули
      const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js'
      const script = document.createElement('script')
      script.src = remoteUrlWithVersion
      script.onload = () => {
        // внедренный скрипт загружен и доступен через объект window
        // теперь можно зарезолвить Promise
        const proxy = {
          get: (request) => window.app1.get(request),
          init: (arg) => {
            try {
              return window.app1.init(arg)
            } catch(e) {
              console.log('remote container already initialized')
            }
          }
        }
        resolve(proxy)
      }
      // внедрим этот скрипт с src с версионированным remoteEntry.js
      document.head.appendChild(script);
    })
    `,
      },
      // ...
    }),
  ],
};
Обратите внимание, что при использовании этого API необходимо зарезолвить объект, содержащий API get/init.

Динамический publicPath

Установка publicPath

Можно разрешить хосту задавать publicPath удаленного модуля во время выполнения, предоставляя метод из этого удаленного модуля. Этот подход особенно полезен при подключении независимо развернутых дочерних приложений по подпути домена узла. Сценарий: У вас есть хост приложение, размещенное на https://my-host.com/app/*, и дочернее приложение, размещенное на https://foo-app.com. Дочернее приложение также монтируется на хост-домене, следовательно, ожидается, https://foo-app.com будет доступно через https://my-host.com/app/foo-app, а запросы https://my-host.com/app/foo-app/* перенаправляются https://foo-app.com/* через прокси-сервер. Пример:
// webpack.config.js (удаленный)

module.exports = {
  entry: {
    remote: './public-path',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote', // это имя должно совпадать с именем точки входа
      exposes: ['./public-path'],
      // ...
    }),
  ],
};
public-path.js (remote)

export function set(value) {
  __webpack_public_path__ = value;
}
// src/index.js (host)

const publicPath = await import('remote/public-path');
publicPath.set('/your-public-path');

//bootstrap app  e.g. import('./bootstrap.js')

Вывод publicPath из скрипта

Можно вывести publicPath из тега script из document.currentScript.src и задать его с переменной __webpack_public_path__ во время выполнения. Пример:
// webpack.config.js (удаленный)

module.exports = {
  entry: {
    remote: './setup-public-path',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote', // this name needs to match with the entry name
      // ...
    }),
  ],
};
setup-public-path.js (удаленный)

// вычислите publicPath и установите его в  __webpack_public_path__
__webpack_public_path__ = document.currentScript.src + '/../';
Существует также значение 'auto', доступное для output.publicPath, которое автоматически определяет publicPath для вас.