ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Собеседование ReactJS - вопросы и ответы
2 года назад·6 мин. на чтение
В этой статье рассмотрим 10 вопросов, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика.
Подписывайтесь на наш Boosty и задавайте ваши вопросы через форму. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы. Если вы начинающий фронтенд-разработчик, это лучшая возможность получить ответ на вопрос, который вы стеснялись задать коллегам.
А еще на Boosty вас уже ожидают эксклюзивные статьи и видео на актуальные темы.
Итак, теперь рассмотрим вопросы с собеседований:
Что такое
Key - это специальный строковый атрибут, который нужно указывать при создании списка элементов.
Если мы хотим показать компоненты в списке то нужно указать эти ключи явно, чтобы помочь React определять, какие элементы были изменены, добавлены или удалены.
Далее React сопоставляет элементы массива с течением времени.
Если у элемента есть id то лучше всего использовать именно это значение в качестве ключа. В крайнем случае можно использовать индекс элемента как ключ.
Если порядок элементов может поменяться, использовать индексы в качестве ключей крайне не рекомендуется. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента.
Еще один сценарий использования
Управляемые и неуправляемые компоненты
Элемент называется управляемым, если его значение контролирует 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-библиотекам;
- и др.
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 19
5 месяцев назад·9 мин. на чтение
Обзор и анализ ключевых обновлений и функциональности новых клиентских хуков в React 19
Вопреки распространенному мнению, основная команда React сосредоточена не только на компонентах React Server и Next.js. Новые хуки на стороне клиента появятся в следующей основной версии React, React 19. Они сосредоточены на двух основных точках React: получение данных и формы. Эти хуки повысят производительность разработчиков React, включая тех, кто работает с SPA.
Новые хуки:
Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по
Тот же
Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.
Эта новый хук позволяет оптимистично обновлять пользовательский интерфейс во время отправки действия.
use(Promise)
use(Context)
- Form Actions
useFormState
useFormStatus
useOptimistic
- Async transitions (Асинхронные переходы)
use(Promise)
Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по use
React, выглядит следующим образом:
Хорошая новость заключается в том, что этот хук можно использовать для получения данных. Вот конкретный пример с выборкой данных при монтировании и при нажатии на кнопку. В коде не используется ни одинimport { use } from 'react'; function MessageComponent({ messagePromise }) { const message = use(messagePromise); // ... }
useEffect
:
В ранних версиях было бы получено предупреждение, связанное сimport { useState, use, Suspense } from 'react'; let news = ['news1', 'news2']; const fetchNews = () => { return new Promise<string[]>((resolve) => // имитация запроса данных setTimeout(() => { news = [...news, `news${news.length + 1}`]; resolve(news); }, 500) ); } const News = ({ newsPromise }) => { const news = use<string[]>(newsPromise); return ( <ul> {news.map((title, index) => ( <li key={index}>{title}</li> ))} </ul> ); }; export const App = () => { const [newsPromise, setNewsPromise] = useState( () => fetchNews() ); const handleUpdate = () => { fetchNews().then((news) => { setNewsPromise(Promise.resolve(news)); }); }; return ( <> <button onClick={handleUpdate}>Обновить</button> <Suspense fallback={<p>Запрос данных...</p>}> <News newsPromise={newsPromise} /> </Suspense> </> ); };
<Suspense>
, т.к. требовалось чтобы компонент был lazy-loaded:
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported.
Что ж, это уже не относится к React 19.
Этот новый хук use
имеет скрытую силу: в отличие от всех других хуков React, use
может быть вызван в циклах и условных операторах, таких как if
.
Означает ли это, что нам больше не нужно использовать стороннюю библиотеку, такую как TanStack Query, для получения данных на стороне клиента? Что ж, это еще предстоит выяснить, поскольку Tanstack Query делает больше, чем просто разрешает Promise
.
Но это большой шаг в правильном направлении, и он упростит создание одностраничных приложений на основе REST API или GraphQL.
Подробнее о хуке use(Promise)
.
use(Context)
Тот же use
может быть использован для чтения React Context. Он точно такой же, как useContext
, за исключением того, что его можно вызывать в циклах и условных операторах, таких как if
.
Это упростит иерархию компонентов для некоторых случаев, так как единственным способом чтения контекста в цикле или условном выражении было разделение компонента на две части. Это также большая эволюция с точки зрения производительности, так как теперь вы можете условно пропустить повторный рендеринг компонента, даже если контекст изменился. Подробнее о use(Context).import { use } from 'react'; function HorizontalRule({ show }) { if (show) { const theme = use(ThemeContext); return <hr className={theme} />; } return false; }
Form Actions
Эта новая функциональность позволяет передавать пропaction
в <form>
. React вызовет эту функцию, когда форма будет отправлена:
Помните, что если вы добавите<form action="{handleSubmit}" />
<form action>
в React 18, вы получите следующее предупреждение:
Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.
Это больше не касается React 19, где вы можете написать форму следующим образом:
Функцияimport { useState } from 'react'; const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> </form> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Корзина: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={cart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
addToCart
не является серверным действием. Она вызывается на стороне клиента и может быть асинхронной функцией.
Это значительно упростит обработку AJAX-форм в React - например, в форме поиска. Но опять же, этого может быть недостаточно, чтобы избавиться от сторонних библиотек, таких как React Hook Form, которые делают гораздо больше, чем просто обрабатывают отправку форм (проверка, побочные эффекты и т.д.).
В приведенном выше примере вы можете найти некоторые проблемы с юзабилити (кнопка отправки не отключена при отправке, отсутствует сообщение с подтверждением, позднее обновление корзины). К счастью, в этом случае появляется все больше хуков.
Подробнее о <form action>
.
useFormState
Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.
Например, это позволяет отобразить подтверждение или сообщение об ошибке, возвращаемое действием формы:import { useFormState } from 'react-dom'; import { action } from './action'; function MyComponent() { const [state, formAction] = useFormState(action, null); // ... return <form action={formAction}>{/* ... */}</form>; }
Примечание:import { useState } from 'react'; import { useFormState } from 'react-dom'; const AddToCartForm = ({ id, title, addToCart }) => { const addToCartAction = async (prevState, formData) => { try { await addToCart(formData, title); return 'Добавлено в корзину'; } catch (e) { return "Невозможно добавить в корзину: товар распродан."; } }; const [message, formAction] = useFormState(addToCartAction, null); return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> {message} </form> ); }; type Item = { id: string; title: string; }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); if (id === '1') { setCart((cart: Item[]) => [...cart, { id, title }]); } else { throw new Error('Unavailable'); } return { id }; }; return ( <> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
useFormState
должен быть импортирован из react-dom
, а не react
.
Подробнее о useFormState
.
useFormStatus
useFormStatus
позволяет узнать, отправляет ли родительский элемент <form>
в настоящее время или успешно выполнил отправку. Он может быть вызван из дочерних элементов формы, и он возвращает объект со следующими свойствами:
Свойствоconst { pending, data, method, action } = useFormStatus();
data
можно использовать для отображения данных, отправляемых пользователем. Вы также можете отобразить состояние ожидания (pending
), как в следующем примере, где кнопка отключена во время отправки формы:
Примечание:import { useState } from 'react'; import { useFormStatus } from 'react-dom'; const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <SubmitButton /> </form> ); }; const SubmitButton = () => { const { pending } = useFormStatus(); return ( <button disabled={pending} type="submit"> Добавить в корзину </button> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Cart content: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={cart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
useFormState
должен быть импортирован из react-dom
, а не react
. Кроме того, он работает только тогда, когда родительская форма использует свойство action
, описанное выше.
Вместе с useFormState
этот хук улучшит пользовательский опыт клиентских форм, не загромождая ваши компоненты бесполезными эффектами. Подробнее о useFormStatus
.
useOptimistic
Эта новый хук позволяет оптимистично обновлять пользовательский интерфейс во время отправки действия.
В приведенном выше примере c корзиной мы могли бы использовать этот хук для отображения корзины с новым элементом, добавленным до завершения AJAX вызова:import { useOptimistic } from 'react'; function AppContainer() { const [optimisticState, addOptimistic] = useOptimisti( state, // updateFn (currentState, optimisticValue) => { // merge and return new state // with optimistic value } ); }
Оптимистичное обновление пользовательского интерфейса — отличный способ улучшить взаимодействие с пользователем веб-приложения. В таком случае эти хуки очень помогают. Подробнее оimport { useState, useOptimistic } from 'react'; const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => { const formAction = async (formData) => { optimisticAddToCart({ id, title }); try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> </form> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Cart content: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>( cart, (state, item) => [...state, item] ); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise((resolve) => setTimeout(resolve, 1000)); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={optimisticCart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> </> ); };
useOptimistic
.
Async Transitions (Асинхронные переходы)
React Transition API позволяет обновлять состояние, не блокируя пользовательский интерфейс. Например, он позволяет отменить предыдущее изменение состояния, если пользователь передумал. Идея состоит в том, чтобы обернуть изменение состояния вызовомstartTransition
.
В следующем примере показана навигация по вкладкам с помощью Transition API. Нажмите «Сообщения», а затем сразу нажмите «Контакты». Обратите внимание, что это прерывает медленный рендеринг "Posts". Вкладка «Контакты» отображается сразу. Так как это обновление состояния помечено как переход, медленная повторная отрисовка не привела к зависанию пользовательского интерфейса.function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { // вместо прямого вызова setTab(nextTab), // оберните изменение состояния в transition startTransition(() => { setTab(nextTab); }); } // ... }
import { useState, useTransition } from 'react'; import TabButton from './TabButton'; import AboutTab from './AboutTab'; import PostsTab from './PostsTab'; import ContactTab from './ContactTab'; export function App() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } return ( <> <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}> О нас </TabButton> <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}> Посты (медленное) </TabButton> <TabButton isActive={tab === 'contact'} onClick={() => selectTab('contact')} > Контакты </TabButton> <hr /> {tab === 'about' && <AboutTab />} {tab === 'posts' && <PostsTab />} {tab === 'contact' && <ContactTab />} </> ); }
useTransition
уже доступен в React 18.2. Что нового в React 19, так это то, что теперь вы можете передать асинхронную функцию startTransition
, которую React ожидает для начала перехода.
Это полезно для отправки данных с помощью AJAX вызова и визуализации результата в переходе. Состояние ожидания перехода начинается с асинхронной отправки данных. Он уже используется в описанной выше функции действий с формами. Это означает, что React вызывает обработчик <form action>
обернутый в startTransition
, поэтому он не блокирует текущую страницу.