Ответы на 20 основных вопросов на собеседовании по ReactJS

Привет! 👋

Меня зовут Сахил Дарджи, я работаю фронтенд-инженером. Я потратил более двух лет на изучение JavaScript и ReactJS, создавая с их помощью интересные вещи. Мне посчастливилось участвовать в различных стартапах, где я решал сложные функции с помощью React. Я немного фанат React — мне это просто нравится! ❤️

Со временем я прошел довольно много собеседований по интерфейсу. И знаешь, что? Я многому научился из этого опыта. Итак, я хочу поделиться с вами чем-то ценным. Я собрал список из 20 лучших вопросов, которые действительно помогут вам проявить себя на следующем собеседовании по ReactJS. Эти вопросы идеальны, если вы стремитесь к должностям младшего и среднего уровня. 🚀

Но подождите, это еще не все! Здесь работает не только мой мозг. Я объединился с некоторыми из моих коллег по интерфейсу. Они волшебники React, серьезно! 🧙‍♂️ Мы объединили наши мысли, чтобы создать комплексный набор вопросов, который даст вам надежную отправную точку. 🎯

Итак, давайте углубимся и подготовим вас к собеседованию по ReactJS! 🌟

Содержание

1. Что такое React и почему он так популярен? Каковы основные особенности React, которые выделяют его?
2. Когда использовать компонент класса вместо функционального компонента?
3. В чем разница между состоянием и реквизитом? Почему бы нам не обновить состояние напрямую?
4. Что такое виртуальный DOM? Как работает Virtual DOM?
5. Каковы различные этапы жизненного цикла компонента? Каковы методы жизненного цикла?
6. Изложите преимущества и ограничения React
7. Что такое винтовое бурение? Как избежать винтового бурения?
8. Каковы границы ошибок в React?
9. Что такое крючки? В чем разница между useMemo и useCallback?
10. Что такое контекстный API? Что такое Редукс? Контекстный API против Redux?
11. В чем разница между локальным хранилищем и хранилищем сеансов?
12. Что такое React-фрагмент?
13. Создайте форму регистрации с помощью React (раунд кодирования)
14. Зачем нужно использовать ключи в списке?
15. Объясните — чистый компонент, компонент высшего порядка (HOC), контролируемый компонент, неконтролируемый компонент, компонент с состоянием, компонент без состояния.
16. На ваш взгляд, какие рекомендации наиболее эффективны при работе с React?
17. Какой подход вы рекомендуете к организации и структурированию файлов в проекте React?
18. Что такое синтетические события в React?
19. Какая польза от рефа?
20. Рекомендуется ли использовать технику CSS In JS в React?
Заключительные слова

1. Что такое React и почему он так популярен? Каковы основные особенности React, которые выделяют его?

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

Основные возможности React

Виртуальный DOM: React использует виртуальный DOM, который представляет собой облегченную копию фактического DOM. Это позволяет React обновлять только те части пользовательского интерфейса, которые необходимо изменить, делая обновления быстрее и эффективнее.
Компонентная архитектура. React следует компонентной архитектуре, в которой элементы пользовательского интерфейса разбиваются на повторно используемые компоненты. Такой модульный подход упрощает разработку, обслуживание и тестирование.
Однонаправленный поток данных. React обеспечивает однонаправленный поток данных, то есть данные перемещаются в одном направлении внутри приложения. Это облегчает понимание того, как изменения данных влияют на пользовательский интерфейс.
JSX (JavaScript XML):JSX — это расширение синтаксиса, которое позволяет разработчикам писать компоненты пользовательского интерфейса, используя синтаксис, аналогичный HTML. Он сочетает в себе логику JavaScript с разметкой пользовательского интерфейса, что делает работу с элементами пользовательского интерфейса более интуитивно понятной.
Инструменты разработчика. React включает в себя мощные инструменты разработчика, которые помогают в отладке, проверке иерархии компонентов и анализе узких мест в производительности.

2. Когда использовать компонент класса вместо функционального компонента?

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

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

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

import React, { useState } from 'react';

function CounterFunction() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default CounterFunction;

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

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

3. В чем разница между состоянием и реквизитом? Почему бы нам не обновить состояние напрямую?

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

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

Props в React: «Props» (сокращение от «свойства») — это способ передачи данных из родительского компонента в дочерний компонент. Представьте, что у вас есть компонент, представляющий кнопку. Возможно, вы захотите настроить текст, цвет или поведение кнопки в зависимости от того, где она используется. Реквизиты позволяют отправлять определенные данные из родительского компонента в дочерний компонент, что делает его универсальным и пригодным для повторного использования.

Например, если вы создаете компонент «Пользователь» для отображения сведений о пользователе, вы можете отправить имя пользователя и URL-адрес изображения профиля в качестве реквизита для этого компонента.

Props vs State
И props, и state являются простыми объектами JavaScript. Хотя оба они содержат информацию, влияющую на результат рендеринга, они различаются по своей функциональности в отношении компонента. Реквизиты передаются компоненту аналогично параметрам функции, тогда как состояние управляется внутри компонента аналогично переменным, объявленным внутри функции.

Короче говоря, «состояние» используется для управления внутренними данными компонента, которые могут изменяться, а «реквизиты» используются для передачи данных от родительского компонента к дочерним для настройки и конфигурации.

Почему нам не следует обновлять состояние напрямую?
Обновление состояния непосредственно в React не рекомендуется, поскольку это может привести к неожиданному поведению и проблемам с отрисовкой компонентов. React использует процесс, называемый «согласование», для эффективного обновления пользовательского интерфейса на основе изменений состояния. Когда вы обновляете состояние напрямую, вы обходите контроль React над этим процессом, что может привести к несогласованности пользовательского интерфейса и ошибкам.

Вот почему вам не следует обновлять состояние напрямую:

Непредсказуемый рендеринг: React может не сразу распознать изменение состояния, если вы обновите его напрямую. Это может привести к тому, что пользовательский интерфейс не будет обновляться должным образом, что вызовет путаницу у пользователей.
Пакетные обновления. React пакетно обновляет состояние для повышения эффективности. Непосредственное обновление состояния может помешать этому процессу пакетной обработки, что приведет к одновременному выполнению нескольких обновлений и потенциально приведет к ошибкам.
Производительность компонентов. React оптимизирует рендеринг, сравнивая предыдущее и новое состояния. Когда вы обновляете состояние напрямую, React может пропустить эти изменения, что приведет к ненужному повторному рендерингу или даже к невозможности обновить пользовательский интерфейс.
Будущая совместимость. Внутренние механизмы и оптимизации React могут меняться в зависимости от версии. Непосредственное управление состоянием может привести к проблемам совместимости с будущими выпусками React.

Позвольте мне показать это на простом примере:
Предположим, у нас есть такой простой счетчик.

import React, { useState } from 'react';

function CounterFunction() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // Directly updating state - not recommended!
    count += 1;
    // This won't trigger the expected re-render
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default CounterFunction;

В этом примере функция increment напрямую обновляет переменную count. Однако этот подход проблематичен, поскольку пользовательский интерфейс не будет перерисовываться должным образом, даже если значение count изменится.

Вот исправленная версия с использованием хука useState:

import React, { useState } from 'react';

function CounterFunction() {
  const [count, setCount] = useState(0);

  const increment = () => {
    // Correct way using the setCount function from useState
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default CounterFunction;

При использовании функции setCount из useState состояние обновляется правильно, и React информируется об изменении, что приводит к ожидаемому повторному рендерингу пользовательского интерфейса при нажатии кнопки «Увеличить». Это гарантирует правильное управление процессами рендеринга React.

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

Виртуальный DOM (VDOM) — это концепция React, которая повышает эффективность обновления пользовательского интерфейса (UI) в веб-приложениях. Это облегченная копия или представление фактической объектной модели документа (DOM) — структуры, представляющей элементы веб-страницы.

Работа виртуального DOM

Когда вы обновляете состояние или данные в своем приложении React, платформа инициирует процесс согласования, чтобы определить, какие части пользовательского интерфейса необходимо изменить.
React сравнивает текущую версию Virtual DOM (представляющую пользовательский интерфейс) с предыдущей версией. Он определяет, какие элементы были изменены, добавлены или удалены.
На основе выявленных различий React генерирует список изменений, которые необходимо внести в реальный DOM. Этот список часто называют «разницей».
Целью согласования является минимизация количества изменений, необходимых в реальном DOM. React рассчитывает наиболее эффективный способ обновления DOM, применяя только необходимые изменения.
Наконец, React применяет изменения к реальному DOM, обновляя пользовательский интерфейс в соответствии с новым состоянием или данными.

5. Каковы различные этапы жизненного цикла компонента? Каковы методы жизненного цикла?

Жизненный цикл компонента состоит из трех отдельных фаз жизненного цикла:

Монтаж. Компонент готов к монтированию в DOM браузера. Этот этап охватывает инициализацию методов жизненного цикла constructor(), getDerivedStateFromProps(), render() и componentDidMount().
Обновление. На этом этапе компонент обновляется двумя способами: отправляются новые реквизиты и обновляется состояние либо с setState(), либо с forceUpdate(). На этом этапе рассматриваются методы жизненного цикла getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() и componentDidUpdate().
Отключение. На этом последнем этапе компонент не нужен и отключается от DOM браузера. Этот этап включает componentWillUnmount() метод жизненного цикла.

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

6. Расскажите о преимуществах и ограничениях React

Вот некоторые преимущества использования React!

Компонентная архитектура. Компонентный подход React позволяет создавать сложные пользовательские интерфейсы, разбивая их на более мелкие, повторно используемые компоненты. Это повышает возможность повторного использования кода и удобство сопровождения.
Виртуальный DOM: React использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса. Он обновляет фактическую DOM только с необходимыми изменениями, что приводит к повышению производительности и более удобному пользовательскому интерфейсу.
Однонаправленный поток данных. React обеспечивает однонаправленный поток данных, что упрощает понимание того, как изменения данных влияют на пользовательский интерфейс. Это помогает предотвратить непредвиденные побочные эффекты и упрощает отладку.
Большая экосистема. React имеет обширную экосистему библиотек, инструментов и расширений, которые упрощают задачи разработки и повышают производительность.
Сильное сообщество и поддержка. React имеет большое и активное сообщество, предоставляющее множество ресурсов, учебных пособий и решений распространенных проблем.
Удобство для SEO. Серверный рендеринг React (SSR) и поддержка динамического рендеринга делают его более оптимизированным для SEO, улучшая видимость для поисковых систем.
Легкость обучения. Простота и четко определенные концепции React делают его относительно простым в освоении, особенно для разработчиков, знакомых с JavaScript.
Интеграция с экосистемой JavaScript. React хорошо взаимодействует с другими библиотеками и платформами JavaScript, что позволяет интегрировать его в предпочитаемый вами стек разработки.

Вот ограничения React

Шаблоновый код. Ориентация React на модульность и возможность повторного использования может привести к увеличению объема кода начальной настройки, особенно при настройке инструментов сборки и настройке проектов.
Сложность JSX: JSX, несмотря на свою мощь, может усложнить работу разработчиков, впервые знакомых с синтаксисом, поскольку он сочетает в себе логику JavaScript с разметкой, подобной HTML.
Библиотека просмотра. React в первую очередь ориентирован на уровень пользовательского интерфейса, а это означает, что вам необходимо интегрировать его с другими библиотеками или платформами для создания полноценных веб-приложений.
Большой размер пакета. По мере роста вашего проекта и включения в него различных библиотек и зависимостей размер пакета может стать значительным, что повлияет на начальное время загрузки.
Обратная совместимость. Обновление между основными версиями React иногда может потребовать внесения изменений в ваш код из-за изменений в API или устаревших функций.
Внешнее управление состоянием.Хотя React имеет встроенное управление состоянием (useState и useReducer), для более сложных приложений вам может потребоваться использовать внешние библиотеки управления состоянием, которые могут потребовать обучения.

7. Что такое винтовое бурение? Как избежать винтового бурения?

Детализация реквизитов, также известная как «детализация реквизитов», — это термин, используемый в React для описания ситуации, когда реквизиты пропускаются через несколько слоев компонентов, чтобы добраться до глубоко вложенного дочернего компонента, которому нужны данные. Это может привести к тому, что по мере роста приложения станет сложнее управлять и поддерживать код.

Вот пример, иллюстрирующий бурение винта:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = "Hello, Prop Drilling!";

  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
}

export default ParentComponent;
// ChildComponent.js
import React from 'react';
import GrandChildComponent from './GrandChildComponent';

function ChildComponent({ data }) {
  return (
    <div>
      <GrandChildComponent data={data} />
    </div>
  );
}

export default ChildComponent;
// GrandChildComponent.js
import React from 'react';

function GrandChildComponent({ data }) {
  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

export default GrandChildComponent;

В этом примере реквизит data передается от ParentComponent через ChildComponent к GrandChildComponent. С этим можно справиться для небольших приложений, но по мере того, как ваше приложение растет и компоненты становятся более глубоко вложенными, передача реквизитов через каждый уровень может стать громоздкой и усложнить поддержку кода.

Чтобы избежать детализации свойств, вы можете использовать такие методы, как контекст React или библиотеки управления состоянием, такие как Redux или MobX. Эти инструменты позволяют вам управлять состоянием компонентов и обмениваться ими без необходимости явно передавать реквизиты через каждый уровень дерева компонентов. Это может привести к созданию более чистого и удобного в сопровождении кода.

8. Каковы границы ошибок в React?

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

Вот как работают границы ошибок:

Компонент с границей ошибки:

Вы оборачиваете компонент (или дерево компонентов) компонентом границы ошибки.
Этот граничный компонент ошибок служит защитой для обнаружения ошибок, выдаваемых его дочерними компонентами.

2. Методы жизненного цикла границы ошибки:

Границы ошибок определяют два метода: componentDidCatch(error, info) и getDerivedStateFromError(error).
Когда дочерний компонент выдает ошибку во время рендеринга, ошибка перехватывается методом componentDidCatch границы ошибки.

3. Запасной интерфейс:

Внутри метода componentDidCatch вы можете обновить состояние, чтобы указать, что произошла ошибка.
Граница ошибки затем отображает резервный пользовательский интерфейс, который может быть удобным сообщением об ошибке или другим компонентом.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Update state to indicate an error occurred
    this.setState({ hasError: true });
    // You can also log the error for debugging
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>Oops! Something went wrong.</div>;
    }
    return this.props.children;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to My App</h1>
        <ErrorBoundary>
          {/* Component that might throw an error */}
          <ChildComponent />
        </ErrorBoundary>
      </div>
    );
  }
}

class ChildComponent extends Component {
  render() {
    // Simulate an error by throwing an exception
    throw new Error('Oops, an error occurred!');
    return <div>Child Component</div>;
  }
}

export default App;

В этом примере компонент ErrorBoundary оборачивает ChildComponent. Если ChildComponent выдает ошибку во время рендеринга, ошибка будет обнаружена методом componentDidCatch ErrorBoundary. Вместо сбоя всего приложения будет отображаться резервный пользовательский интерфейс («Упс! Что-то пошло не так»). Это позволяет обеспечить лучший пользовательский опыт и выявить ошибки во время разработки.

9. Что такое крючки? В чем разница между `useMemo` и `useCallback`?

Хуки — это функция, представленная в React 16.8, которая позволяет вам использовать состояние и другие функции React без написания компонентов класса. Они предоставляют возможность использовать основные функции React, такие как методы состояния и жизненного цикла, в функциональных компонентах, делая их более мощными и выразительными.

Хуки призваны упростить логику компонентов и уменьшить сложность управления состоянием и побочными эффектами. Они также поощряют повторное использование логики с сохранением состояния в разных компонентах.

В чем разница между useMemo и useCallback?
Оба useCallback и useMemo являются хуками React, целью которых является оптимизация производительности путем запоминания значений и функций. Однако они служат разным целям и используются в разных сценариях.

useCallback:
Хук useCallback используется для запоминания функций. Он возвращает запомненную версию функции, которая изменяется только в том случае, если изменилась одна из ее зависимостей. Это может быть особенно полезно при передаче функций в качестве реквизитов дочерним компонентам, чтобы предотвратить ненужную повторную визуализацию этих компонентов.

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent increment={increment} />
    </div>
  );
}

В этом примере функция increment запоминается с помощью useCallback, гарантируя, что она останется неизменной до тех пор, пока count не изменится. Это предотвращает ненужную повторную визуализацию ChildComponent при изменении count.

useMemo:
Хук useMemo используется для запоминания значений. Он принимает функцию и список зависимостей и возвращает запоминаемое значение, которое пересчитывается только при изменении одной из зависимостей.

import React, { useState, useMemo } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const doubledCount = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubledCount}</p>
    </div>
  );
}

В этом примере значение doubledCount запоминается с помощью useMemo, что гарантирует его перерасчет только при изменении count. Эта оптимизация может быть полезна при расчете дорогостоящих или трудоемких значений.

Таким образом, useCallback используется для запоминания функций, а useMemo используется для запоминания значений. Оба хука могут повысить производительность, предотвращая ненужные перерасчеты и повторные рендеринги в ваших компонентах React.

10. Что такое контекстный API? Что такое Редукс? Контекстный API против Redux?

React Context API:
Context API — это функция, предоставляемая React, которая позволяет вам управлять глобальным состоянием в вашем приложении без необходимости передавать реквизиты через каждый уровень дерева компонентов. Он предназначен для решения проблемы «сверления реквизита», когда данные необходимо передавать через несколько слоев компонентов.
Контекст предоставляет способ обмена данными между компонентами без необходимости явно передавать реквизиты, что делает его особенно полезным. для управления состоянием, которое является общим для разных частей вашего приложения.

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

Redux следует принципам архитектуры Flux и построен на трёх основных концепциях:

Магазин. Единственный источник достоверной информации о состоянии вашего приложения. Он содержит все дерево состояний вашего приложения.
Действия. Обычные объекты JavaScript, представляющие события или действия пользователя, вызывающие изменения в состоянии. Их отправляют в магазин.
Редукторы. Функции, определяющие, как изменяется состояние в ответ на действия. Они принимают текущее состояние и действие в качестве входных данных и возвращают новое состояние.

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

Redux DevTools – это расширение для браузера, которое предоставляет расширенные возможности отладки и мониторинга для управления состоянием Redux, позволяя разработчикам отслеживать и анализировать изменения состояния, действия и многое другое.

React Context API и Redux

Выбор между React Context API и Redux зависит от сложности и конкретных потребностей вашего приложения.

API контекста React:

Простое совместное использование состояния. Если ваше приложение имеет относительно небольшой объем общего состояния, к которому требуется доступ нескольким компонентам, Context API может быть хорошим выбором. Его проще настроить и он не требует дополнительных библиотек.
Связь компонентов. Контекст может быть полезен, если состояние, которым вы делитесь, тесно связано с определенной частью вашего дерева компонентов. Это может помочь избежать детализации реквизитов и упростить управление общими данными в конкретном контексте.
Новые проекты. Если вы начинаете новый проект и вам нужен легкий способ управления состоянием без добавления сложности отдельной библиотеки, такой как Redux, контекстный API может подойти лучше.

Редукс:

Сложное управление состоянием. Для более крупных и сложных приложений с большим количеством общего состояния Redux предоставляет структурированный и централизованный подход к управлению состоянием. Это помогает поддерживать четкий поток данных и разделение задач.
Предсказуемые изменения состояния. Строгий однонаправленный поток данных Redux и четкое разделение между действиями и редукторами упрощают прогнозирование и отладку изменений состояния, что особенно полезно для приложений с большим количеством движущихся частей.
Промежуточное программное обеспечение и расширенные функции. Система промежуточного программного обеспечения Redux позволяет обрабатывать асинхронные действия, ведение журналов и другое сложное поведение. Если вашему приложению требуются расширенные функции, помимо простого управления состоянием, Redux может быть лучшим выбором.
Существующие проекты. Если ваш проект уже использует Redux и достиг значительных размеров, возможно, имеет смысл продолжать использовать его для обеспечения единообразия и использования знакомых концепций Redux.

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

11. В чем разница между локальным хранилищем и хранилищем сеансов?

И localStorage, и sessionStorage представляют собой механизмы веб-хранилища, предоставляемые современными веб-браузерами для хранения пар ключ-значение на стороне клиента. Однако они различаются по объему применения, сроку службы и использованию.

Локальное хранилище:

Область применения: данные, хранящиеся в localStorage, имеют более широкую область применения. Он доступен в разных вкладках/окнах браузера в одном домене.
Срок службы: данные, хранящиеся в localStorage, сохраняются даже после закрытия и повторного открытия браузера. Он остается доступным до тех пор, пока он не будет явно удален пользователем или приложением.
Использование: localStorage обычно используется для хранения данных, которые необходимо сохранять между сеансами, таких как пользовательские настройки, настройки или кэшированные данные.

Хранилище сеансов:

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

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

12. Что такое фрагмент React?

Фрагмент React — это встроенный компонент в React, который позволяет группировать несколько элементов без добавления дополнительного элемента DOM к отображаемому выводу. Поскольку компонент React может отображать только один элемент, для удовлетворения этого требования обычно компоненты обертываются в <div>. Вот типичные варианты использования React Fragment!

Фрагменты помогают улучшить структуру и удобство сопровождения вашего кода, особенно когда вам нужно вернуть несколько элементов из компонента, не вводя ненужные элементы HTML в визуализируемый результат.
Использование фрагмента позволяет избежать необходимости добавлять дополнительную обертку <div> или другой элемент-контейнер, что может быть особенно полезно, если вы хотите сохранить чистую и лаконическую структуру DOM. (Инспектор DOM менее загромождён!)
Фрагменты работают немного быстрее и используют меньше памяти, поскольку не создают дополнительный узел DOM. Это дает реальную пользу только на очень больших и глубоких деревьях.
Некоторые механизмы CSS, такие как Flexbox и CSS Grid, имеют особые родительско-дочерние отношения, а добавление элементов div в середине затрудняет сохранение желаемого макета.

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  )
}jsx

13. Создайте форму регистрации с помощью React (раунд кодирования)

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

import React, { useState } from 'react';

function SignupForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
  });

  const [passwordMatchError, setPasswordMatchError] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.password !== formData.confirmPassword) {
      setPasswordMatchError(true);
    } else {
      // Passwords match, perform signup logic here
      setPasswordMatchError(false);
      // ...perform signup logic
    }
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={formData.name} onChange={handleChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" value={formData.email} onChange={handleChange} />
        </label>
        <br />
        <label>
          Password:
          <input type="password" name="password" value={formData.password} onChange={handleChange} />
        </label>
        <br />
        <label>
          Confirm Password:
          <input
            type="password"
            name="confirmPassword"
            value={formData.confirmPassword}
            onChange={handleChange}
          />
        </label>
        <br />
        {passwordMatchError && <p style={{ color: 'red' }}>Passwords do not match</p>}
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
}

export default SignupForm;

14. Зачем нужно использовать ключи в списке?

Использование ключей в списках в React важно по нескольким причинам:

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

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

15. Объясните — чистый компонент, компонент высшего порядка (HOC), контролируемый компонент, неконтролируемый компонент, компонент с состоянием, компонент без состояния.

Чистый компонент: PureComponent — это компонент класса, предоставляемый React, который автоматически реализует поверхностное сравнение свойств и состояния перед повторным рендерингом. Такое сравнение помогает предотвратить ненужные повторные рендеринги, если данные не изменились. Это особенно полезно, когда результат рендеринга компонента определяется исключительно его свойствами и состоянием. Использование PureComponent может оптимизировать производительность вашего приложения за счет сокращения ненужных обновлений.

Компонент высшего порядка (HOC): Компонент высшего порядка (HOC) – это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. HOC позволяют вам повторно использовать и совместно использовать логику компонентов в разных частях вашего приложения. Они часто используются для таких задач, как управление аутентификацией, ведение журнала или абстрагирование общих функций. HOC не изменяют исходный компонент; они создают новый, оборачивая его.

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

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

Компонент с отслеживанием состояния. Компонент с отслеживанием состояния, часто называемый «контейнером» или «умным» компонентом, представляет собой компонент, который управляет своим собственным состоянием. Это компонент класса, который может иметь собственное состояние, методы жизненного цикла и управлять сложной логикой. Компоненты с отслеживанием состояния отвечают за данные и бизнес-логику в вашем приложении.

Компонент без сохранения состояния. Компонент без сохранения состояния, также известный как «функциональный компонент» или «немой» компонент, — это компонент, который не имеет собственного состояния. Это функция JavaScript, которая получает реквизиты в качестве аргументов и возвращает элементы JSX. Компоненты без сохранения состояния в первую очередь ориентированы на рендеринг пользовательского интерфейса на основе получаемых реквизитов и не управляют методами состояния или жизненного цикла.

16. Каковы, на ваш взгляд, наиболее эффективные рекомендации, которым следует следовать при работе с React?

1. Структура и организация компонентов:

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

2. Управление состоянием:

Используйте состояние локального компонента для состояния пользовательского интерфейса, которое не требует совместного использования.
Используйте React Context API для совместного использования состояния, к которому должны иметь доступ несколько компонентов.
Рассмотрите возможность использования библиотеки управления состоянием, такой как Redux, для более сложного глобального управления состоянием.

3. Реквизит и поток данных:

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

4. Методы жизненного цикла и перехватчики:

По возможности отдавайте предпочтение функциональным компонентам с хуками, а не компонентам классов.
Используйте useState, useEffect и другие хуки для управления состоянием и побочными эффектами.
Избегайте побочных эффектов в render методах; используйте useEffect для этой цели.

5. Оптимизация производительности:

Используйте PureComponent или внедрите shouldComponentUpdate для оптимизации повторного рендеринга.
Запомните дорогостоящие вычисления, используя useMemo или React.memo.
Оптимизируйте рендеринг компонентов, разбивая сложный пользовательский интерфейс на более мелкие компоненты.

6. Стилизация и CSS:

Используйте библиотеки CSS-in-JS, модули CSS или препроцессоры CSS для стилей на уровне компонентов.
При необходимости используйте CSS-фреймворки или служебные библиотеки для единообразного стиля.
Избегайте встроенных стилей для создания сложных стилей; предпочитайте внешние таблицы стилей или CSS-in-JS.

7. Обработка ошибок:

Реализуйте границы ошибок, чтобы корректно обрабатывать ошибки в компонентах.
Используйте блок try-catch для обработки исключений при работе с асинхронным кодом.

8. Тестирование:

Создавайте модульные тесты, используя библиотеки тестирования, такие как Jest, и утилиты тестирования, предоставляемые React.
Используйте такие инструменты, как библиотека тестирования React, для написания интеграционных тестов компонентов.
Тестируйте поведение компонентов и взаимодействие с пользователем, а не детали реализации.

9. Документация:

Документируйте свои компоненты, их реквизиты и шаблоны использования.
Используйте такие инструменты, как PropTypes или TypeScript, чтобы предоставить информацию о типах ваших компонентов.

17. Какой рекомендуемый вами подход к организации и структурированию файлов в проекте React?

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

src/
|-- assets/
|   |-- images/
|   |-- styles/
|
|-- components/
|   |-- Header/
|   |   |-- Header.js
|   |   |-- Header.css
|   |
|   |-- Sidebar/
|   |   |-- Sidebar.js
|   |   |-- Sidebar.css
|   |
|   |-- ...
|
|-- containers/
|   |-- Home/
|   |   |-- Home.js
|   |   |-- Home.css
|   |
|   |-- Profile/
|   |   |-- Profile.js
|   |   |-- Profile.css
|   |
|   |-- ...
|
|-- context/
|   |-- AuthContext.js
|   |-- ThemeContext.js
|
|-- utils/
|   |-- api.js
|   |-- helpers.js
|
|-- App.js
|-- index.js
|-- index.css
|-- ...

assets/: В этом каталоге хранятся такие ресурсы, как изображения, шрифты и глобальные стили.
components/: Этот каталог содержит повторно используемые презентационные компоненты. Каждый компонент обычно размещается в отдельной папке со своими файлами JavaScript и CSS.
containers/: В этом каталоге находятся компоненты контейнера, которые подключаются к состоянию, управляют данными и отображают компоненты пользовательского интерфейса. Как и компоненты, каждый контейнер обычно имеет собственную папку.
context/: В этом каталоге хранятся поставщики контекста React и связанные файлы. Группируйте поставщиков контекста в свои файлы для управления глобальным состоянием.
utils/: Этот каталог содержит служебные файлы, которые не являются компонентами, но предлагают вспомогательные функции, вызовы API и другую общую логику.
App.js: Это точка входа вашего приложения, содержащая структуру основного компонента и маршрутизацию.
index.js: это точка входа приложения, которое отображает приложение React в DOM.
index.css: Здесь импортируются глобальные стили.

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

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

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

import React from 'react';

class Button extends React.Component {
  handleClick = (event) => {
    console.log('Button clicked!');
    console.log('Target:', event.target);
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

В этом примере обработчик событий onClick получает в качестве аргумента объект синтетического события. Вы можете получить доступ к таким свойствам, как event.target, так же, как и к собственным событиям.

Синтетические события упрощают обработку событий в компонентах React, предоставляя согласованный API и абстрагируя многие тонкости собственных событий браузера.

19. Какая польза от ссылки?

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

Есть два основных варианта использования ссылок:

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

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

20. Рекомендуется ли использовать технику CSS In JS в React?

Использование CSS-in-JS (CSS в JavaScript) — это метод, при котором вы пишете стили непосредственно в коде JavaScript, часто используя библиотеки или платформы, которые позволяют определять стили как объекты JavaScript. Рекомендуется ли использовать CSS-in-JS в React, зависит от различных факторов и соображений. Вот разбивка:

Преимущества CSS-in-JS:

Стили с областью действия. Стили, определенные с помощью CSS-in-JS, обычно привязаны к компоненту, которому они принадлежат, что снижает вероятность конфликтов стилей и загрязнения глобального пространства имен.
На основе компонентов: CSS-in-JS продвигает компонентный подход к стилизации, который хорошо согласуется с компонентной архитектурой React.
Динамическое оформление. Поскольку стили определяются с помощью JavaScript, вы можете легко создавать динамические стили на основе свойств и состояния компонента.
Производительность.Некоторые решения CSS-in-JS генерируют стили во время выполнения, что позволяет оптимизировать загружаемые стили на основе компонентов, используемых в вашем приложении.
Устранение мертвого кода. Некоторые инструменты могут удалять неиспользуемые стили в процессе сборки, уменьшая размер CSS.

Соображения и недостатки:

Размер сборки. Некоторые решения CSS-in-JS добавляют в пакет дополнительный код JavaScript, что может увеличить размер сборки.
Предпочтения разработчика.Некоторые разработчики предпочитают отделять стили от кода JavaScript, и CSS-in-JS может не соответствовать их предпочтительному рабочему процессу.
SEO и SSR. В некоторых случаях встроенные стили могут влиять на рендеринг на стороне сервера (SSR) и поисковую оптимизацию (SEO).

Подводя итог, решение использовать CSS-in-JS зависит от требований вашего проекта, предпочтений команды и компромиссов. Если вы цените стили с ограниченной областью действия, динамические стили и преимущества компонентного подхода, CSS-in-JS может вам подойти. Однако, если вы предпочитаете хранить стили отдельно от JavaScript или если в вашем проекте уже настроен традиционный рабочий процесс CSS, придерживаться этого подхода может быть более подходящим.

В конечном счете, рекомендуется оценить плюсы и минусы в контексте вашего конкретного проекта и динамики команды, прежде чем принимать решение о применении CSS-in-JS.

Заключительные слова

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

Чтобы по-настоящему добиться успеха, не сосредотачивайтесь только на запоминании вопросов и ответов. Получите практический опыт работы с React, создавая проекты. Узнайте о типичных проблемах и проблемах, с которыми вы можете столкнуться. Попробуйте практические тесты, чтобы смоделировать реальные сценарии собеседования, и ответьте как можно больше вопросов в стиле собеседования перед реальным собеседованием. Верьте в себя и свои способности!

Желаю вам удачи на собеседовании! У вас есть это! 😊