Вопросы и ответы с собеседований по React.js
Вопросы и ответы по React.js для собеседования фронтенд-разработчика. Что такое виртуальный DOM, в чём разница между useEffect и useLayoutEffect, что такое батчинг ререндеров, конкуретный режим, React Context, Suspense и многое другое.
Что такое React?
React - JavaScript библиотека, разработанная Facebook в 2011. В основе лежит компонентный подход, позволяющий создавать переиспользуемые UI-компоненты. Служит для создания сложных интерактивных интерфейсов для веб-сайтов и мобильных приложений.
Что такое виртуальный DOM?
Виртуальный DOM (VDOM) - это копия Document Object Model, которую в своем ядре выстраивает фреймворк (в данном случае React). Вместо того, чтобы при каждом изменении данных заставлять браузер переформировывать DOM, внутри фреймворка происходит перерасчёт Virtual DOM. Дальше по результатам сравнения построенного Virtual DOM и DOM фреймворк вносит точечные изменения в реальный DOM. Этот механизм существенно повышает производительность React-приложения, так как позволяет избежать ненужных перерисовок и вычислений браузеру.
Что такое JSX?
JSX - это дополнение к синтаксису JS, которое позволяет писать HTML в React компонентах. JSX - синтаксический сахар для функции React.createElement(component, props, ...children). За правильный парсинг и дальнейшую обработку отвечает babel.
Что такое useEffect?
useEffect(() => {
console.log('side effect')
}, [])
useEffect - это хук, принимающий функцию, которая будет выполнена после каждой перерисовки компонента.
Однако, вторым параметром в useEffect передается массив зависимостей (переменные состояния) - при его наличии функция, переданная в useEffect, будет выполняться не при каждой перерисовке, а только в случае изменения элемента из массива зависимостей.
useEffect вызывается асинхронно после перерисовки компонента.
Что такое useLayoutEffect?
useLayoutEffect(() => {
console.log('side effect')
}, [])
useLayoutEffect - это аналог useEffect, отличающийся тем, что выполняется синхронно до перерисовки компонента, что бывает крайне полезным при взаимодействии в функции-коллбеке с DOM.
Как сбросить эффект?
useEffect(() => {
let mounted = true;
setTimeout(() => {
if (mounted) {
setUsername('hello world');
}
}, 4000);
return () => mounted = false;
}, []);
Функция, переданная в useEffect и useLayoutEffect, может при необходимости возвращать другую функцию, которая будет вызвана в момент размонтирования компонента, а также перед каждым своим исполнением, чтобы сбросить эффект предыдущего рендера).
Что такое батчинг ререндеров?
Батчингом в React называют процесс группировки нескольких вызовов обновления состояния в один этап ререндера. Это положительно сказывается на производительности.
До React 18 батчинг автоматически работал только для обработчиков DOM событий:
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // Не вызывает ререндер
setFlag(f => !f); // Не вызывает ререндер
// React вызовет ререндер только один раз, в конце
}
/*
function handleClick() {
fetchSomething().then(() => {
// До React 17 следующие вызовы не батчились
// Установка состояния происходит “после” события, в колбэке асинхронного вызова
setCount(c => c + 1); // Спровоцирует ререндер
setFlag(f => !f); // Спровоцирует ререндер
});
}
*/
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
В React 18 все обновления состояния внутри Promise, таймаутов, fetch-запросов будут батчиться также, как для обработчиков DOM-событий.
Код ниже:
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React будет вызывать ререндер только один раз, в конце
}
//работает так же, как и этот код:
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React будет вызывать ререндер только один раз, в конце
}, 1000);