Сегодня я покажу вам мою подборку из популярный вопросов для Junior React разработчиков

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

1 ) Что такое React? Какие отличия от других современных технологий?

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

Из основных отличий от других технологий можно выделить:

1. Встроенный JSX

2. Возможность выбора между JavaScript и TypeScript (У Angular выбора нет, только TypeScript)

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

4. Однонаправленный поток данных

2) Что такое компонентный подход? Какие преимущества у данного подхода?

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

Преимущества компонентного подхода это:

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

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

3. Улучшение читаемости кода, разбиение приложения на компоненты делает код более читаемым и понятным.

4. При грамотном использовании, позволяет улучшить производительность,за счет уменьшение ререндеров (перерисовок).

3) Что такое Virtual DOM?

VirtualDOM - это копия DOM дерева и вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого React применяет изменения к реальному DOM. При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено. Такой подход работает быстрее, потому как не включает в себя все тяжеловесные части реального DOM. Но теперь нам придется следить за перерисовками, так как в некоторых случаях могут происходить не нужные перерисовки.

4) Что такое однонаправленный поток данных, какие есть альтернативы?

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

5) Что такое JSX?

JSX это расширение для JavaScript, которое позволяет нам описывать структуру HTML-подобными конструкциями, а также добавлять атрибуты и события.

Пример создания div'а с надписью "Привет мир!" без JSX:

React.createElement('div', null, `Привет мир!`);

Пример создания div'а с надписью "Привет мир!" c JSX:

<div>Привет мир!</div>;

JSX не является расширением только для React, при желании его можно использовать без React'а.

JSX не читается браузером, поэтому для работы с JSX необходим babel, который транспилирует ваш JSX в JS которые уже поддерживается браузерами

6) Что такое атрибут key? Для чего он нужен?

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

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => {
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.

Неправильно использованный key:

export default function App() {
  const [sort, setSort] = useState(true);
  const fruits = ["Апельсин", "Банан", "Яблоко"];
  const sortedFruits = sort ? [...fruits].sort() :
[...fruits].sort().reverse();
  const sortOrder = () => setSort((sort) => !sort);
  return (
    <div>
      <button onClick={sortOrder}>Сортировка</button>
      <ul>
        {sortedFruits.map((fruit, index) => (
          <li key={index}>
            <label>
              <input type="checkbox" /> {fruit}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}

Кликаем на "Апельсин"

Кликаем на сортировку

Что то пошло не так.....

Такую ошибку мы получаем из-за использования индекса массива в качестве key

Давайте попробуем исправить это

Исправленный вариант:

export default function App() {
  const [sort, setSort] = useState(true);
  const sortOrder = (a, b) => {
    if (a.name < b.name) {
      return -1;
    }
    if (a.name > b.name) {
      return 1;
    }
    return 0;
  };
  const fruits = [
    { name: "Апельсин", id: "1" },
    { name: "Банан", id: "2" },
    { name: "Яблоко", id: "3" },
  ];
  const sortedFruits = sort
    ? [...fruits].sort(sortOrder)
    : [...fruits].sort(sortOrder).reverse();
  const reverseSortOrder = () => setSort((sortAToZ) => !sortAToZ);
  return (
    <div>
      <button onClick={reverseSortOrder}>Сортировка</button>
      <ul>
        {sortedFruits.map((fruit) => (
          <li key={fruit.id}>
            <label>
              <input type="checkbox" /> {fruit.name}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}

Выбираем "Апельсин"

Кликаем на сортировку

Все работает как запланировано.

Более подробно про key можно почитать тут: https://habr.com/ru/companies/otus/articles/750542/

7) Что такое условный рендеринг? Для чего он нужен?

Условный рендеринг это механизм позволяющей рендерить разные элементы в зависимости от условий. Например для показа индикатора загрузки.

const ComponentWithLoader = (isLoaded) => {
if(isLoaded) {
return <Loader/>
}
 return (
    <div>
<MainContent/>
   </div> 
);
};

8) Что такое React fragment?

Простыми словами при необходимости вернуть из компонента два элемента нам нужно обернуть их в div

const ComponentWithDiv = () => {
 return (
    <div>
<Component1/>
<Component2/>  
</div>
  );
};

Но для решения этой задачи можно использовать React.Fragment

const ComponentWithFragment = () => {
 return (
    <React.Fragment>
<Component1/>
<Component2/>
   </React.Fragment>
  );
};

или

const ComponentWithFragment = () => {  
return (
    <>
<Component1/>
<Component2/>
   </>
  );
};

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

А в чем смысл? Дивы как то проще и понятнее

React.Fragment не создает узел в DOM дереве, из за этого наш DOM будет чуть-чуть меньше и не будет содержать элементов ради элементов.

9) Отличия Function components от class components? Можно ли обойтись без class components?

Основные отличия это:

Классовые компоненты медленнее, из-за большого количества встроенных методов
Классовые компоненты имеют больше методов жизненного цикла
Множество синтаксических различий

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

Получается можно забыть про классовые компоненты?

Да, в реальном коде почти нет ситуаций когда классовый компонент будет лучше функционального, можно вспомнить про error boundary, который для своей реализации требует метод из классового компонента, но в противовес есть сторонние библиотеки, реализующие нужное поведение под капотом, или можно зайти на официальный сайт React и скопировать классовый компонет error boundary, и немного его поправить под себя, какой то специфичной логики там нет.
Вот ссылка на Error boundary, если интересно https://ru.react.js.org/docs/error-boundaries.html

10) Что такое hook? Правила использования хуков?

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

Хук — это специальная функция, которая позволяет «подцепиться» к возможностям React. Например, хук useState предоставляет функциональным компонентам доступ к состоянию React.

Теперь о правилах использования:

1) Хуки можно использовать только в функциональных компонентах или в кастомных хуках.

2) Хуки не должны вызываться в циклах или операторах ветвления, проще запомнить что хуки должны вызываться только на верхнем уровне

Итог

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

Удачи в подготовке к собеседованиям!