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

Подписывайтесь на наш 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. Также по теме собеседований рекомендую прочитать:

• Полное руководство по React
• ТОП 10 вопросов на собеседовании ReactJS
• Собеседование фронтенд разработчика. ТОП вопросов по HTTP и CORS
• Вопросы по React на собеседовании

Если у вас нет опыта server side программирования, переменные среды могут показаться чем-то магическим. Этот недостаток знаний может поставить вас в тупик, когда вы закончите создавать приложения todo на localhost и попытаетесь создать продакшн сборку в первый раз. Если вы хотите узнать, как использовать переменные среды в ваших собственных инструментах, или глубоко погрузиться в то, как переменные среды работают в React, вы можете продолжить чтение этой статьи. Но если вы ищете быстрое решение и используете Create React App, ознакомьтесь с документацией здесь. Пользователи NextJS, ознакомьтесь с документацией здесь.

Проблема, которую мы решаем

Как объявить различные URL-адресов API для локальной разработки и для продакшн сборки.

Как решить эту проблему

Использовать переменные среды. При работе с React переменные среды — это переменные, доступные через глобальный объект process.env. Этот глобальный объект предоставляется вашей средой через NodeJS. И поскольку у нас нет NodeJS в браузере, нам понадобится webpack. В этой статье рассмотрим два способа установки и использования переменных среды для ваших React проектов с помощью webpack: с помощью скриптов npm и с помощью файла .env.

Способ 1: Использование скриптов npm для установки переменных среды

Во-первых, установите webpack и webpack-cli из npm:

npm install --save-dev webpack webpack-cli

Перейдите в файл package.json, проверьте поле scripts и найдите команды, которые запускают webpack. Вероятно, это будет выглядеть примерно так:

{
  // ...
  scripts: {
    "dev": "webpack --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.build.js"
  }
}

Давайте добавим некоторые переменные окружения с флагом --env в scripts:

{
  // ...
  scripts: {
    "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js",
    "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js"
  }
}

Мы добавили --env.API_URL= часть в обоих скриптах. Теперь запустите команду npm run dev, перейдите к React компоненту и используйте process.env.API_URL:

const App = () => <h1>{process.env.API_URL}</h1>;

И тут проект должен сломаться.

Сломается он потому, что когда мы используем переменные окружения в клиентском коде, они на самом деле просто служат заполнителями, которые будут заменены при компиляции нашего кода. Проблема в том, что мы не сказали webpack скомпилировать эти переменные в реальные значения. Давайте сделаем это в нашем конфигурационном файле webpack с плагином DefinePlugin:

const webpack = require('webpack'); // DefinePlugin это часть webpack, поэтому это require обязателен

// возвращаем функцию из config файла
// переменная `env` будет просто объектом { API_URL: 'http://localhost:8000' }
// в ней будут содержаться все переменные среды, которые мы указали в package.json

module.exports = (env) => {
  // этот объект это сама конфигурация webpack
  return {
    plugins: [
      // добавим плагин в список плагинов
      new webpack.DefinePlugin({ `process.env.API_URL`: JSON.stringify(${env.API_URL}) })
    ]
  };
};

DefinePlugin требует, чтобы вы буквально определили свои «переменные среды». Вы также можете применить .reduce к переменным среды, чтобы получить объект:

module.exports = (env) => {
  // создаем объект из переменных среды
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

Если вы запустите команду сейчас, все скомпилируется, и ваш process.env.API_URL будет скомпилирован в правильный URL-адрес на основе переменной среды.

Способ 2: Использование файла .env для установки переменных среды

Вся идея здесь состоит в том, чтобы создать файл (называемый просто .env), заполненный переменными среды. Чтобы защитить пароли и другие значения переменных среды, добавьте файл .env в .gitignore. Фронтенд код будет ссылаться на одну и ту же переменную среды (process.env.API_URL) в обеих средах (при локальной разработке и на продакшене), но поскольку вы определили разные значения в своих .env, скомпилированные значения будут отличаться.

Создадим файл .env

Этот файл должен находиться в корневом каталоге проекта и называться .env. Добавим переменную:

API_URL=http://localhost:8000

Обработка файла .env

Теперь нам нужен какой-то способ обработки файлов и их содержимого. Для этого мы собираемся использовать популярный npm пакет под названием dotenv. Dotenv широко используется (create-react-app использует его). Он будет получать переменные из нашего файла .env и добавлять их в глобальный process.env.

$ npm install --save-dev dotenv

Добавление переменных в проект React

Есть одна проблема. Dotenv работает только на стороне сервера. А мы хотим использовать переменные среды на стороне клиента, на фронтенде. В данном случае мы разрабатываем клиентскую часть. И dotenv нужна какая-то среда для фактического хранения переменных. Здесь поможет Webpack. Воспользуемся плагином DefinePlugin в нашей webpack конфигурации:

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // dotenv вернет объект с полем parsed 
  const env = dotenv.config().parsed;
  
  // сделаем reduce, чтобы сделать объект
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};

При необходимости проверьте параметры конфигурации dotenv в документации на github. Вызов .config() в dotenv вернет объект со всеми переменными среды, установленными в вашем файле .env через поле parsed. Теперь давайте проверим наш React код:

const App = () => <h1>{process.env.API_URL}</h1>;

И это работает! Он показывает значение переменной среды API_URL, определенной в .env. Осталась только одна проблема: нам все еще нужно определить различные API_URL для локальной разработки и продакшена.

Различные переменные среды для разных сред

Вся идея состоит в том, чтобы создать разные файлы .env для разных сред и позволить webpack выбрать правильный файл .env в зависимости от активной среды. Поэтому создайте два файла в корневом каталоге проекта:

• .env (содержит все переменные среды для продакшн)
• .env.development (содержит все переменные среды для локальной разработки)

Чтобы было ясно: мы добавляем к имени файла .env сопоставление имени среды. Общепринятой практикой является использование исходного файла .env для продакшн сборки, поэтому мы не будем добавлять постфикс для продакшн .env .

Настройка активной среды с помощью scripts в package.json

Мы собираемся использовать scripts (как мы это делали в методе 1), чтобы установить текущую среду в нашем package.json:

{
  "scripts": {
    "dev": "webpack --env.ENVIRONMENT=development --config webpack.config.dev.js",
    "build": "webpack --env.ENVIRONMENT=production --config webpack.config.build.js"
  }
}

Так как мы определили нашу среду в нашем package.json, теперь она доступна в нашей конфигурации webpack. Следующим шагом будет переход к webpack конфигурации и дать ему использовать файл .env, принадлежащий активной среде. Как и раньше, мы используем dotenv, но теперь мы указываем пользовательский path в параметрах.

const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs'); // для проверки существования файла
const path = require('path'); // для получения текущего пути

module.exports = (env) => {
  // получаем корневой путь (предполагаем, что webpack config лежит в корне проекта)
  const currentPath = path.join(__dirname);
  
  // путь по умолчанию (будет использован для продакшена - `.env`)
  const basePath = currentPath + '/.env';

  // склеиваем имя среды с именем файла для получения имени env файла
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // проверяем существует ли env файл, если нет используем имя по умолчанию
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // устанавливаем параметр path в dotenv
  const fileEnv = dotenv.config({ path: finalPath }).parsed;
  
  // сделаем reduce, чтобы получить объект
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

Эта вся необходимая настройка, но вы можете создать больше .env файлов для большего количества сред (например, .env.staging) по аналогии.