ТОП 10 вопросов на собеседовании ReactJS
2 года назад·6 мин. на чтение
В этой статье рассмотрим наиболее популярные и важные вопросы, которые могут встретиться на собеседовании по ReactJS на позицию React/фронтенд разработчика. Это вопросы о хуках ReactJS, о методах жизненного цикла компонентов React, JSX, о паттернах в ReactJS и т.д.
Вопросы на собеседовании на позицию Фронтенд разработчика могут быть самые разные. Обычно интервьюер имеет утвержденный список вопросов, стандартный для собеседований в конкретную компанию. Но может задать и дополнительные вопросы. Это могут быть вопросы, связанные с его крайней задачей, или ему захотелось узнать ваше мнение. Или это может быть стандартный вопрос, чтобы узнать действительно ли вы знаете React? и примерно определить на каком уровне. Могут быть вопросы о third-party библиотеках - redux, mobx, saga, thunk. Может быть что-то и про JavaScript.
Очевидно, что интервью для junior/midddle/senior будут различаться. Практически любой вопрос можно задать кандидату любого уровня, а вот ответ может отличаться по глубине, по деталям, более опытный может привести примеры corner case’ов и т.д.
React развивается. Сейчас вряд ли будут спрашивать много про классовые компоненты. Если только это не легаси проект. Либо могут быть специфичные вопросы, которые только немного касаются темы классовых компонентов.
В чем разница
Особенности использования Context API +
Безусловно,
Что вызывает обновление компонента?
Обновление компонента вызывают изменение состояния и изменение пропсов. В классовых компонентах еще естьforceUpdate
(следует использовать только в крайних случаях).
Изменение состояния не будет приводить к обновлениям, если новое значение состояния не изменилось. Если мутировать состояние напрямую это тоже не приведет к повторному рендеру
В функциональных компонентах встроенного аналога функции forceUpdate
нет. Но можно написать свой.
Когда родительский компонент рендерится, дочерние компоненты рекурсивно тоже будут ререндериться. Скорее всего некоторые компоненты в этой цепочке вернут тот же самый результат, т.е. не изменятся. Поэтому они не будут перерисованы в DOM. Но React все равно должен сделать рендер, чтобы определить эти различия, сравнить и определить нужна перерисовка или нет.const [ignored, forceUpdate] = useReducer(x => x + 1, 0); function handleClick() { forceUpdate(); }
Virtual DOM
Виртуальный DOM (VDOM) — это подход для при котором "виртуальное" представление пользовательского интерфейса хранится в памяти. И этот виртуальный DOM синхронизируется с "настоящим" DOM. В React для этого используется библиотеки (react-dom). Сам этот процесс называется согласованием (reconciliation). Также React использует внутренние объекты, называемые "волокнами" (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации "виртуального DOM" в React. Fiber - это JS объект который содержит информацию о компоненте его входные параметры и результат.setState
синхронный или асинхронный?
setState
- асинхронный. setState
говорит React запустить следующую итерацию рендера.
Однако React также может оптимизировать это процесс и несколько вызовов setState - приведут к одному рендеру.
Что такое JSX
JSX - это дополнение к синтаксису JS, который позволяет писать HTML в React компонентах. JSX — синтаксический сахар для функцииReact.createElement(component, props, ...children)
.
Этот JSX-код:
…конвертируется в:return <Component />
…и результатом будет объект:return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")
За правильный парсинг и дальнейшую обработку отвечает babel. Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, например,{ type: SomeComponent, props: {a: 42, b: "testing"}, children: ["Text Here"] }
<div>
или <span>
, что в результате приведет к тому, что в React.createElement
будет передана строка 'div'
или 'span'
. Типы, начинающиеся с заглавной буквы, такие как <SomeComponent />
, компилируются в React.createElement(SomeComponent)
и соответствуют компоненту, который был объявлен или импортирован в JavaScript-файле.
React можно использовать без JSX. Это особенно удобно, когда нет необходимости настраивать транспиляцию в процессе сборки.
В чем разница memo
и useMemo
?
memo
— это компонент высшего порядка.
Он нужен для повышения производительности и подходит для случаев, когда компонент рендерит одинаковый результат при одних и тех же значениях пропсов. В этом случае результат будет мемоизирован. Это значит, что React будет использовать результат последнего рендера, избегая повторного рендеринга.
При использовании memo
пропсы по умолчанию сравниваются поверхностно. Можно передать свою функцию сравнения в качестве второго аргумента (если нужно контролировать сравнение).
useMemo
- это хук, который возвращает мемоизированное значение функции, которая делает долгие вычисления. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. useMemo
будет повторно вычислять мемоизированное значение только тогда, когда значение какой-либо из зависимостей изменилось.
Pure Components (Чистые компоненты)
Компонент является чистым, если он гарантированно возвращает один и тот же результат при одинаковых пропсах и состоянии. Для чего нужны чистые компоненты и чем они лучше? Чистые компоненты имеют улучшенную производительность за счет поверхностного сравнения пропсов и состояния.Для классовых компонентов
shouldComponentUpdate
- необязательный метод жизненного цикла. Если этот метод возвращает false
, React пропустит рендеринг компонента. Он может содержать любую логику сравнения пропосв и состояния с их предыдущими значениями.
React.PureComponent
может быть использован вместо Component
+ shouldComponentUpdate
.
Для функциональных и для классовых компонентов
React.memo()
- компонент высшего порядка. В качестве первого аргумента получает компонент и возвращает новый компонент. По умолчанию сравнение происходит поверхностное. Однако, вторым аргументом можно передать свой кастомный компаратор - функцию сравнения (arePropsEqual()
)
Поверхностное сравнение происходит при помощи оператора ===
.
Вопросы о стэйт менеджерах
Отличия mobx и react
- Redux использует JS-объект в качестве структуры данных для хранения данных состояния. И отслеживание изменений происходит явно вручную. MobX использует observables, и чтобы следить за изменениями используются неявные подписки.
- Redux использует чистые функции - очевидные изменения состояния. В MobX сложнее отследить изменения и сложнее дебажить.
- В Mobx меньше бойлерплейт кода.
- В Mobx может быть больше одного стора, в Redux один большой стор.
- и т.д.
Особенности использования Context API + useReducer
вместо Redux
Безусловно, useReducer()
позволяет обрабатывать обновления состояния с помощью редьюсеров без необходимости использования хранилища Redux, а useContext()
позволяет передавать значения через дерево React без необходимости передавать их вниз через каждый уровень компонентов в качестве пропсов.
Однако, как и в случае с самим Context API, хук useReducer()
не имеет дополнительных возможностей, которые предоставляет Redux. Нет ни отладки с перемещением во времени, ни middleware, ни специальных DevTools Extension, позволяющего увидеть, как состояние менялось с течением времени.
Что такое Компонент высшего порядка (Higher-Order Component, HOC)?
Функция, которая получает компонент в качестве аргумента и возвращают модифицированный компонент - называется компонентом высшего порядка. Она применяется для повторного использования логики (помогает следовать принципу DRY). Хорошо подходит для инжектирования зависимостей. HOC - работает как фабрика компонентов. HOC может принимать конфигурации в качестве аргументов и возвращать компонент или семейство компонентов. Через HOC можно скрыть источник данных для компонентов, которые выглядят одинаково, однако обращаются к разным источникам данных.Когда бы вы использовали классовый компонент вместо функционального?
Можно сформулировать этот вопрос иначе: "Что можно сделать с помощью хуков, а что нельзя?" Основные методы жизненного цикла можно имплементировать при помощи хуков. Однако пока есть функциональность, которую можно имплементировать только с помощью классовых компонентов, в будущем конечно это может измениться. Но пока не существует хуков, реализующих методы жизненного циклаgetSnapshotBeforeUpdate
, getDerivedStateFromError
и componentDidCatch
.
В документации сказано, что разработчики планируют их добавить.
getSnapshotBeforeUpdate
вызывается прямо перед добавлением в DOM. На этом этапе некоторая информация из DOM уже доступна (например, положение прокрутки)
getDerivedStateFromError
вызывается после возникновения ошибки у компонента-потомка. Он получает ошибку в качестве параметра и возвращает значение для обновления состояния. Вызывается во время этапа рендера, поэтому здесь запрещены любые побочные эффекты. Можно использовать для рендеринга запасного UI в случае отлова ошибки.
componentDidCatch
вызывается после возникновения ошибки у компонента-потомка. Вызывается во время этапа фиксации, поэтому здесь можно использовать побочные эффекты. Можно использовать для логирования информации об отловленной ошибке.
Lazy loading, code splitting
Lazy loading - ленивая загрузка, для того чтобы загружать очередной бандл по требованию. Эта оптимизация полезна т.к. не все части приложения могут пригодится сразу же. Таким образом мы можем ускорить загрузку сайта за счет меньшего размера бандла. Бандлы - это результат работы работы сборщиков проекта (Webpack, Rollup). Сама сборка - это процесс выявления импортированных файлов и объединения их в один файл (часто называемый "bundle" или "бандл"). Этот бандл после подключения на веб-страницу загружает приложение. Однако нужно следить за размером бандла - любая подключенная библиотека добавляет лишний килобайты. И загрузка может занять слишком много времени. При помощи сборщиков проекта можно создавать несколько бандлов и загружать их по мере необходимости. Общий размер кода не уменьшится (он будет разделен на несколько частей) - однако начальная загрузка будет быстрее.- React.lazy
Она автоматически загрузит бандл, содержащий OtherComponent, когда этот компонент будет впервые отрендерен. React.lazy принимает функцию, которая должна вызвать динамический import(). Результатом возвращённого Promise является модуль, который экспортирует по умолчанию React-компонент (export default).const OtherComponent = React.lazy(() => import('./OtherComponent'))
- Suspense
- Предохранители (error boundary)
Как работает браузер?
Это один из самых популярных вопросов на собседовании на роль middle/senior разработчика. Обо всех шагах, которые совершает браузер при переходе на страницу вы можете найти в этом посте. Также по теме собеседований рекомендую прочитать:Разделение ответственности в React. Как использовать контейнерные и презентационные компоненты.
2 года назад·6 мин. на чтение
Многие новички в React объединяют логику и представление в одном и том же компоненте. И они могут не знать, почему важно разделять эти две вещи.
В таком случае может обнаружиться, что нужно внести большие изменения в файл. Затем придется вносить много переделок, чтобы разделить логику и представление.
Это происходит из-за того, что разработчик может не знать о разделении ответственности и таком шаблоне как презентационные и контейнерные компоненты (presentational and container components). В этой статье рассмотрим этот паттерн, чтобы смягчить эту проблему на ранних этапах жизненного цикла разработки проекта.
Чтобы решить эту проблему и придерживаться разделения ответственности, мы должны разделить эти две части — то есть запрос данных и их представление в пользовательском интерфейсе — на два разных компонента.
Шаблон контейнеры и презентационные компоненты (smart/dummy components) поможет нам решить эту проблему.
Вот что делает этот компонент:
Ниже приведены некоторые причины, по которым нам требуются контейнерные и презентационные компоненты:
Компонент
Файл с типами.
Компонент
Компонент
Теперь мы можем просто удалить компонент-контейнер
Что такое разделение ответственности?
Разделение ответственности — это концепция, которая широко используется в программировании. В нем говорится, что логика, выполняющая разные действия, не должна группироваться или объединяться вместе. Например, то, что мы обсуждали во вводной части, нарушает разделение задач, потому что мы поместили логику выборки данных и представления данных в один и тот же компонент.Что такое контейнерные и презентационные компоненты?
Контейнерные компоненты
Это компоненты, которые предоставляют, создают или хранят данные для дочерних компонентов. Единственная работа компонента-контейнера — обработка данных. Он не состоит из собственного пользовательского интерфейса. Скорее, он состоит из презентационных компонентов в качестве своих дочерних элементов, которые используют эти данные. Простым примером может быть компонент с именемFetchUserContainer
, который состоит из некоторой логики, которая извлекает данные всех пользователей.
Презентационные компоненты
Это компоненты, основной обязанностью которых является представление данных в пользовательском интерфейсе. Они принимают данные из компонентов контейнера. Эти компоненты не имеют состояния, если только им не требуется собственное состояние для отображения пользовательского интерфейса. Они не изменяют данные, которые они получают. Примером этого может быть компонентUserList
, который просто отображает всех пользователей.
Зачем нам нужны эти компоненты?
Чтобы понять это, возьмем простой пример. Мы хотим отобразить список сообщений, которые мы получаем из JSON placeholder API.// DisplayPosts.tsx import { useEffect, useState } from "react"; interface ISinglePost { userId: number; id: number; title: string; body: string; } /* Пример того как НЕ нужно объединять логику и отображение */ export default function DisplayPosts() { const [posts, setPosts] = useState<ISinglePost[] | null>(null); const [isLoading, setIsLoading] = useState<Boolean>(false); const [error, setError] = useState<unknown>(); // Логика useEffect(() => { (async () => { try { setIsLoading(true); const resp = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await resp.json(); setPosts(data); setIsLoading(false); } catch (err) { setError(err); setIsLoading(false); } })(); }, []); // Представление return isLoading ? ( <span>Loading... </span> ) : posts ? ( <ul> {posts.map((post: ISinglePost) => ( <li key={`item-${post.id}`}> <span>{post.title}</span> </li> ))} </ul> ) : ( <span>{JSON.stringify(error)}</span> ); }
- Он имеет 3 переменные состояния:
posts
,isLoading
иerror
. - У нас есть хук
useEffect
, который состоит из бизнес-логики. Здесь мы извлекаем данные из jsonplaceholder API с помощьюfetch
. - Когда данные извлекаются, мы сохраняем их в переменной состояния
posts
, используяsetPosts
. - Мы также гарантируем, что переключаем значения
isLoading
иerror
во время соответствующих сценариев. - Мы поместили всю эту логику в асинхронную функцию.
- Возвращаем посты в виде списка и отображаем их.
- Они помогают нам создавать слабосвязанные компоненты.
- Они помогают нам поддерживать разделение ответственности.
- Рефакторинг кода становится намного проще.
- Код становится более организованным и удобным в сопровождении
- Это значительно упрощает тестирование.
Пример компонента-представления и контейнера
Для примера будем использовать тот же пример, что и выше — получение данных из JSON placeholder API. Разберемся со структурой файлов. Нашим контейнерным компонентом будетPostContainer
. У нас будет два презентационных компонента:
Posts
: компонент с неупорядоченным списком.SinglePost
: компонент, отображающий элемент списка.
components
. Теперь, когда мы знаем, что куда помещать, давайте начнем с компонента-контейнера: PostContainer
.
Компонент PostContainer
// components/PostContainer.tsx import { useEffect, useState } from "react"; import { ISinglePost } from "../Definitions"; import Posts from "./Posts"; export default function PostContainer() { const [posts, setPosts] = useState<ISinglePost[] | null>(null); const [isLoading, setIsLoading] = useState<Boolean>(false); const [error, setError] = useState<unknown>(); useEffect(() => { (async () => { try { setIsLoading(true); const resp = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await resp.json(); setPosts(data.filter((post: ISinglePost) => post.userId === 1)); setIsLoading(false); } catch (err) { setError(err); setIsLoading(false); } })(); }, []); return isLoading ? ( <span>Loading... </span> ) : posts ? ( <Posts posts={posts} /> ) : ( <span>{JSON.stringify(error)}</span> ); }
Приведенный выше код просто содержит логику выборки данных. Эта логика присутствует в хукеcomponents/Definitions.ts export interface SinglePost { userId: number; id: number; title: string; body: string; }
useEffect
. Этот компонент-контейнер передает эти данные презентационному компоненту Posts
.
Давайте взглянем на презентационный компонент Posts
.
Компонент Posts
Как видите, это простой файл, состоящий из тега// components/Posts.tsx import { ISinglePost } from "../Definitions"; import SinglePost from "./SinglePost"; export default function Posts(props: { posts: ISinglePost[] }) { return ( <ul style={{ display: "flex", flexDirection: "column", alignItems: "center" }} > {props.posts.map((post: ISinglePost) => ( <SinglePost {...post} /> ))} </ul> ); }
ul
— неупорядоченного списка. Затем этот компонент отображает посты, которые передаются в качестве пропса. Мы передаем каждый объект поста в компонент SinglePost
.
Существует еще один презентационный компонент, который отображает элемент списка, это тег li
. Он отображает заголовок и тело сообщения.
Компонент SinglePost
Эти презентационные компоненты просто отображают данные на экране. Вот и все. Они не делают ничего другого. Поскольку здесь они просто отображают данные, они также будут иметь собственные стили. Теперь, когда мы настроили компоненты, давайте посмотрим, что удалось достичь:// components/SinglePost.tsx import { ISinglePost } from "../Definitions"; export default function SinglePost(props: ISinglePost) { const { userId, id, title, body } = props; return ( <li key={`item-${userId}-${id}`} style={{ width: 400 }}> <h4> <strong>{title}</strong> </h4> <span>{body}</span> </li> ); }
- Концепция разделения ответственности в этом примере не нарушается.
- Написание модульных тестов для каждого компонента становится проще.
- Сопровождаемость и читабельность кода намного лучше. Таким образом, наша кодовая база стала намного более организованной.
Как заменить контейнерные компоненты на React хуки
Начиная с React 16.8 стало намного проще создавать и разрабатывать компоненты с помощью функциональных компонентов и хуков. Здесь мы воспользуемся этими возможностями и заменим компонент-контейнер хуком.Что дает это улучшение:// hooks/usePosts.ts import { useEffect, useState } from "react"; import { ISinglePost } from "../Definitions"; export default function usePosts() { const [posts, setPosts] = useState<ISinglePost[] | null>(null); const [isLoading, setIsLoading] = useState<Boolean>(false); const [error, setError] = useState<unknown>(); useEffect(() => { (async () => { try { setIsLoading(true); const resp = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await resp.json(); setPosts(data.filter((post: ISinglePost) => post.userId === 1)); setIsLoading(false); } catch (err) { setError(err); setIsLoading(false); } })(); }, []); return { isLoading, posts, error }; }
- Извлечена логика, которая присутствовала в компоненте
PostContainer
, в хук. - Этот хук вернет объект, содержащий значения
isLoading
,posts
иerror
.
PostContainer
. Затем, вместо того, чтобы передавать данные контейнера презентационным компонентам в качестве пропса, мы можем напрямую использовать этот хук внутри презентационного компонента Posts
.
Внесем следующие изменения в компонент Posts
.
Используя хуки, мы устранили дополнительный слой компонента, который присутствовал поверх этих презентационных компонентов. С хуками мы достигли тех же результатов, что и с шаблоном контейнерные/презентационные компоненты.// components/Posts.tsx import { ISinglePost } from "../Definitions"; import usePosts from "../hooks/usePosts"; import SinglePost from "./SinglePost"; export default function Posts(props: { posts: ISinglePost[] }) { const { isLoading, posts, error } = usePosts(); return ( <ul style={{ display: "flex", flexDirection: "column", alignItems: "center" }} > {isLoading ? ( <span>Loading...</span> ) : posts ? ( posts.map((post: ISinglePost) => <SinglePost {...post} />) ) : ( <span>{JSON.stringify(error)}</span> )} </ul> ); }
Итоги
Итак, в этой статье мы рассмотрели:- Разделение ответственности.
- Контейнерные и презентационные компоненты
- Зачем нам нужны эти компоненты
- Как хуки могут заменить компоненты-контейнеры