ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Вопросы и ответы React собеседования 2023 - Часть 2
год назад·6 мин. на чтение
Актуальный список вопросов и ответов по ReactJS на интервью 2023 - Часть 2
- Вопросы и ответы ReactJS собеседования 2023 - Часть 1
- Вопросы и ответы ReactJS собеседования 2023 - Часть 2 (эта статья)
- Вопросы и ответы ReactJS собеседования 2023 - Часть 3
1. Что такое JSX?
- JSX — это расширение синтаксиса для JavaScript, обладающее всеми возможностями JavaScript.
- Вы можете внедрить любое выражение JavaScript в JSX, заключив его в фигурные скобки. После компиляции выражения JSX становятся обычными объектами JavaScript.
- Это означает, что вы можете использовать JSX внутри операторов
if
и цикловfor
, назначать его переменным, принимать в качестве аргументов и возвращать из функций.
2. Каков эквивалент следующего кода с использованием React.createElement
?
Эквивалент с использованиемconst element = <h1 className="greeting">Hello, world!</h1>;
React.createElement
будет выглядеть следующим образом:
const element = React.createElement( "h1", { className: "greeting" }, "Hello, world!" );
3. Что такое Redux?
- Основная идея redux заключается в том, что все состояние приложения хранится в одном хранилище. Store (хранилище) - это просто JavaScript объект.
- Единственный способ изменить состояние — отправить действие (action) из вашего приложения, а затем написать редьюсеры для этих действий, которые изменяют состояние.
- Весь переход состояния хранится внутри редьюсеров и не должен иметь никаких побочных эффектов.
4. Что такое store в Redux?
Store — это JavaScript объект, который содержит состояние приложения. Наряду с этим он также имеет следующие обязанности:- Разрешает доступ к состоянию через
getState()
. - Позволяет обновлять состояние с помощью отправки действия
dispatch(action)
. - Регистрирует слушателей через
subscribe(listener)
. - Обрабатывает отмену регистрации слушателей с помощью функции, возвращаемой из
subscribe(listener)
.
5. Разница между action и reducer.
- Action (действие) — это простые JavaScript объекты.
- Они должны иметь тип, указывающий тип выполняемого действия.
- По сути, действия — это некоторые данные, которые отправляются из вашего приложения в хранилище.
- Редьюсер — это просто чистая функция, которая принимает предыдущее состояние и действие и возвращает обновленное состояние.
6. Для чего используется Redux Thunk?
- Redux Thunk — это промежуточное программное обеспечение (middleware), которое позволяет вам писать создателей действий (action creator), которые возвращают функцию вместо действия (action). Что такое action creators?
- Затем thunk можно использовать для задержки отправки действия, если выполняется определенное условие. Это позволяет вам обрабатывать асинхронную диспетчеризацию действий.
- Подробнее о Redux Thunk можно узнать в полном видео-курсе о Redux Thunk.
7. Напишите кастомный хук, который можно использовать для debounce’а ввода.
// Хук useDebounce const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timeout = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(timeout); }; }, [value]); return debouncedValue; }; // Использование const Counter = () => { const [value, setValue] = useState(0); const lastValue = useDebounce(value, 1000); return ( <div> <p> Current Value: {value} | Debounced Value: {lastValue} </p> <button onClick={() => setValue(value + 1)}>Increment</button> </div> ); };
8. Напишите кастомный хук для копирования текста в буфер обмена.
// Хук useCopyToClipboard function useCopyToClipboard(content) { const [isCopied, setIsCopied] = useState(false); const copy = useCallback(() => { navigator.clipboard .writeText(content) .then(() => setIsCopied(true)) .then(() => setTimeout(() => setIsCopied(false), 1250)) .catch((err) => alert(err)); }, [content]); return [isCopied, copy]; }
// Использование export default function App() { const [isCopied, copy] = useCopyToClipboard("Text to copy!"); return <button onClick={copy}>{isCopied ? "Copied!" : "Copy"}</button>; }
9. Как использовать хук useId
для создания уникальных идентификаторов?
useId
не принимает никаких параметров.useId
возвращает уникальную строку идентификатора, связанную с этим конкретным вызовомuseId
в этом конкретном компоненте.
Подробности можно найти в статье Что за хук useId в React?.// Использование import { useId } from "react"; const App = () => { const id = useId(); return ( <form> <label htmlFor={`email-${id}`}>Email</label> <input type="text" id={`email-${id}`} name="email" /> <label htmlFor={`password-${id}`}>Password</label> <input type="password" id={`password-${id}`} name="password" /> </form> ); }; // Плохая практика - не стоит использовать в качестве key const id = useId(); return posts.map((post) => <article key={id}>...</article>);
10. Как проверить/валидировать пропсы в React?
Мы можем использовать пакетprop-types
Раньше, до React v15.5, это было частью самого React.
Еще один вариант - это добавить к проекту TypeScript.import PropTypes from "prop-types"; function MyComponent({ name }) { return <div>Hello, {name}</div>; } MyComponent.propTypes = { name: PropTypes.string, }; export default MyComponent;
11. Приведите практический пример компонента высшего порядка в React.
- Напишем компонент высшего порядка (HOC) для отображения загрузки, пока компонент ожидает данные.
- Больше о компонентах высшего порядка можно узнать в видео Как использовать Компоненты высшего порядка React и Паттерн Render Props в ReactJS.
// Компонент высшего порядка function WithLoading(Component) { return function WihLoadingComponent({ isLoading, ...props }) { if (!isLoading) return <Component {...props} />; return <p>Please wait, fetching your data in no time...</p>; }; } export default WithLoading;
// Использование import UserListComponent from "./UserListComponent.js"; // импорт компонента import WithLoading from "./withLoading.js"; // импорт HOC const ListWithLoading = WithLoading(UserListComponent); // обернем компонент в HOC const App = () => { const [loading, setLoading] = useState(true); const [users, setUsers] = useState([]); useEffect(() => { // запрос данных const dataFromApi = ["this is coming from API call", "don't show loader"]; // в это время загрузчик будет показан в HOC // данные получены setUsers([...dataFromApi]); setLoading(false); }, []); return <ListWithLoading isLoading={loading} users={users} />; };
12. Чем полезен хук useDeferredValue
?
useDeferredValue
— это React хук, который позволяет вам отложить обновление части пользовательского интерфейса.- По сути, это позволяет вам выполнять технику debounce с меньшим количеством кода.
- Подробный разбор хука
useDeferredValue
можно прочитать в статье Хуки useTransition и useDeferredValue в ReactJS 18.
// Использование import { useState, useDeferredValue } from "react"; // Компонент userList получает searchText для запроса списка пользователей import UserList from "./UserList.js"; export default function App() { const [searchText, setSearchText] = useState(""); // отправить searchText по умолчанию const deferredQuery = useDeferredValue(searchText); return ( <> <label> Search user: <input value={searchText} onChange={(e) => setSearchText(e.target.value)} /> </label> <div> <UserList searchText={deferredQuery} /> </div> </> ); }
13. Как отследить клик за пределами компонента React?
export default function OutsideAlerter() { const clickMeDivRef = useRef(null); useEffect(() => { const handleClickOutside = (event) => { if (!ref?.current?.contains(event.target)) { alert("You clicked outside of me!"); } }; // Добавим прослушивание событий document.addEventListener("mousedown", handleClickOutside); return () => { // Удалим прослушивание событий document.removeEventListener("mousedown", handleClickOutside); }; }, [clickMeDivRef]); return <div ref={clickMeDivRef}>Clicked me?</div>; }
14. Почему имена компонентов React должны начинаться с заглавных букв?
В JSX имена тегов нижнего регистра считаются тегами HTML. Однако имена тегов в нижнем регистре с точкой (аксессор свойства) не являются таковыми.<person />
компилируется в React.createElement('person') (тег html)компилируется в React.createElement(Person)
<obj.person />
компилируется вReact.createElement(obj.person)
// Ошибка! Это компонент и должен начинаться с заглавной буквы function person(props) { // Верно! Это использование <div> верно, т.к. div это валидный элемент return <div>{props.isLearning ? "Great!" : "Hello!"}</div>; } function App() { // Ошибка! React считает <person /> тэгом HTML, т.к. Не с заглавной буквы return <person isLearning={true} />; } // Верно! Это компонент и должен начинаться с заглавной буквы function Person(props) { // Верно! Это использование <div> верно, т.к. div это валидный элемент return <div>{props.isLearning ? "Great!" : "Hello!"}</div>; } function App() { // Верно! React знает, что <Person /> - это компонент, с заглавной буквы return <Person isLearning={true} />; }
15. В чем разница между npx и npm?
- npm — это менеджер пакетов, который можно использовать для установки пакетов node.js. npM - Manager.
- npx— это инструмент для выполнения пакетов node.js. npX - Execute.
package.json
.
Поэтому, если вы хотите быстро проверить/запустить пакет без его установки - используйте npx.
create-react-app
— это npm пакет, который должен запускаться только один раз в жизненном цикле проекта. Следовательно, предпочтительнее использовать npx для установки и запуска за один шаг.
> npx create-react-app my-app
16. Как установить фокус на поле ввода после монтирования компонента в UI?
Еще больше вопросов с собеседованийimport React, { useEffect, useRef } from "react"; const SearchPage = () => { const textInput = useRef(null); useEffect(() => { textInput.current.focus(); }, []); return ( <div> <input ref={textInput} type="text" /> </div> ); };
CSI, SSI, ESI в композиции микрофронтендов
год назад·1 мин. на чтение
Что такое Client Side Include, Server Side Include и Edge Side Include?
Client Side Include - CSI (Включение на стороне клиента)
Client Side Include (CSI) является довольно знакомой для фронтенд-разработчиков возможностью, в основном это вызов Ajax. Что выделяет его, так это контент, который возвращает запрос. Тип контента -html/text
, похожий на обычный HTML, который мы используем. В этом контексте мы не запрашиваем фрагмент данных, вместо этого мы ожидаем фрагмент HTML.
Реализация CSI не нова, CSI используется еще с 2000 года. Проблема CSI заключается в том, что если вы используете этот подход слишком интенсивно, пользователь сайта может ждать контента во время загрузки сайта. Это означает, что поисковая система может быть не в состоянии проиндексировать нужный контент при первой загрузке. По этой причине рекомендуется использовать этот подход только для определенных элементов, таких как счетчик, футер или что-либо, что не привлекает основное внимание пользователя и не находится в верхней части экрана.<body> Hello World <footer> <h-include src="a server address"></h-include> </footer> </body>
Server Side Include - SSI (Включение на стороне сервера)
Как видно из названия, включение на стороне сервера (SSI) не происходит на компьютере клиента.Вместо этого, когда сервер анализирует HTML-файл, он проверяет определенные строки, помеченные<body> Hello World <!--#include virtual="/..." --> </body>
#include
. Для любых найденных включений он извлечет содержимое и вставит его в это место, прежде чем вернуть окончательный документ.
Преимущество SSI заключается в том, что, как правило, серверы работают быстрее по сравнению с клиентским компьютером. Не говоря уже о том, что количество запросов между клиентами и серверами сокращается до 1. Таким образом, обычно мы можем получить время отклика около 1 мс по сравнению с временем отклика 50 мс при вызове API.
При этом не стоит злоупотреблять использованием большого количества включений на одной страницу. Для каждого включения серверу необходимо выполнить несколько вызовов и дождаться завершения всех вызовов, прежде чем он сможет агрегировать файл. Это может занять больше времени, чем вы ожидаете, не говоря уже о том, что один из вызовов может завершиться сбоем. Таким образом время отклика может вырасти до 500 мс и больше. Любое время, выходящее за рамки 1 сек, может стать критичным для продакшен сервера.
Поэтому разумно использовать SSI только для основного содержимого страницы, а не для каждого декоративного элемента (например счетчик или футер и т.д.). Также можно попробовать комбинировать CSI и SSI.
SSI также не новая технология. Во времена, когда существовали только бэкенд-разработчики, каждый фрагмент HTML-шаблона, собранный на сервере, можно было назвать SSI.
Edge Side Include - ESI
Идея включения на Edge Side (на стороне CDN), была предложена еще в 2001 году, но с тех пор она так и не стала общепринятой. Тем не менее, она может решить проблемы SSI. Имейте в виду, что ESI происходит и на сервере.С точки зрения использования, это не слишком отличается от включения SSI. Считается, что в некоторых реализациях ESI это улучшает время до первого байта (TTFB). Потому что он может сначала вернуть доступный документ, прежде чем все включения будут скачаны и возвращены. Это похоже на комбинацию CSI и SSI, за исключением того, что все обрабатывается на сервере.<body> Hello World <esi:include src="a server address" /> </body>