Вопросы с собеседований по React.js

React - JavaScript библиотека, разработанная Facebook в 2011. В основе лежит компонентный подход, позволяющий создавать переиспользуемые UI-компоненты. Служит для создания сложных интерактивных интерфейсов для веб-сайтов и мобильных приложений.

Виртуальный DOM (VDOM) - это копия Document Object Model, которую в своем ядре выстраивает фреймворк (в данном случае React). Вместо того, чтобы при каждом изменении данных заставлять браузер переформировывать DOM, внутри фреймворка происходит перерасчёт Virtual DOM. Дальше по результатам сравнения построенного Virtual DOM и DOM фреймворк вносит точечные изменения в реальный DOM. Этот механизм существенно повышает производительность React-приложения, так как позволяет избежать ненужных перерисовок и вычислений браузеру.

JSX - это дополнение к синтаксису JS, которое позволяет писать HTML в React компонентах. JSX - синтаксический сахар для функции React.createElement(component, props, ...children). За правильный парсинг и дальнейшую обработку отвечает babel.

useEffect(() => { console.log('side effect') }, []) useEffect - это хук, принимающий функцию, которая будет выполнена после каждой перерисовки компонента. Однако, вторым параметром в useEffect передается массив зависимостей (переменные состояния) - при его наличии функция, переданная в useEffect, будет выполняться не при каждой перерисовке, а только в случае изменения элемента из массива зависимостей. useEffect вызывается асинхронно после перерисовки компонента.

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);