Решайте задачи на JavaScript0 из 169 задач решено
Перейти к задачам
2195 просмотров
От 4 июня

Ответы на вопросы для собеседования по React.js

1

Что такое React?

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

2

Что такое виртуальный DOM?

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

3

Что такое JSX?

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

4

Что такое useEffect?

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

5

Что такое useLayoutEffect?

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

6

Как сбросить эффект?

useEffect(() => { let mounted = true; setTimeout(() => { if (mounted) { setUsername('hello world'); } }, 4000); return () => mounted = false; }, []); Функция, переданная в useEffect и useLayoutEffect, может при необходимости возвращать другую функцию, которая будет вызвана в момент размонтирования компонента, а также перед каждым своим исполнением, чтобы сбросить эффект предыдущего рендера).

7

Что такое батчинг ререндеров?

Батчингом в 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);

Логотип ДевстанцииАвторизуйтесь, чтобы просматривать следующий контент
9

Как отменить батчинг?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
10

Что такое React.Suspense?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
11

Что такое SuspenseList?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
12

Что такое React.StrictMode?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
13

Что такое конкурентный режим?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
14

Что такое порталы в React?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
15

Что такое React.Fragment?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
16

Что такое React Context?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
17

Что такое refs в React?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
18

setState синхронный или асинхронный?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
19

В чем разница memo и useMemo?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
20

Зачем нужен атрибут key?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
21

Что такое prop drilling?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
22

Как оптимизировать React-приложение?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
23

Как тестировать React-приложение?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
24

Что такое ErrorBoundary?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
25

Почему этот код нестабилен?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
26

Что такое reducer?

Логотип ДевстанцииАвторизуйтесь, чтобы получить доступ
Хотите стать частью сообщества Девстанции?
Вступайте в наш чат в Telegram

Также в этой категории

Вопросник
  24 вопроса

Полезные хуки на React.js

Сборник пользовательских хуков на React.js

1510 просмотров
От 17 февраля

Вам может быть интересно

Вопросник
  19 вопросов

Вопросы с собеседований по CSS

Ответы на вопросы про CSS на собеседовании

1430 просмотров
От 4 июня
Вопросник
  58 вопросов

60 вопросов с собеседований JavaScript

Вопросы для собеседования JavaScript-разработчика

3987 просмотров
От 4 июня
Викторина
  33 вопроса

Подковыристые основы JavaScript

Типичные и не очень вопросы с собеседования по JavaScript

755 просмотров
От 7 февраля
Викторина
  32 вопроса

Большая викторина на знание CSS

Большая викторина по вопросам о CSS

218 просмотров
От 2 июня 2023
Задачник
  102 задачи

100 алгоритмических задач по JavaScript

Подборка решений для задач с собеседований по JavaScript

15240 просмотров
От 27 июня
Викторина
  21 вопрос

Промисы, async/await и Event Loop

Вопросы про Promise API, async/await и цикл событий

970 просмотров
От 7 февраля

Топ тредов

Gravatar for 1847arsen
Arsen
: Задача в Python под названием "Кратчайший путь в матрице"

Последнее сообщение:
Gravatar for 1847arsen
Arsen
: Ошибка на 3 тесте # Ожидаемый результат: 2 а должен быть 1
1 сообщение
31 просмотр

Gravatar for 1233freddypopa
freddypopa
: Добавить чекбокс, который отвечает за показ ранее тронутых задач (черновик)

Последнее сообщение:
: Отличная идея! Возьмём её на заметку!
1 сообщение
127 просмотров

: Предложите идею и получите спонсорский доступ на месяц

Последнее сообщение:
Gravatar for 1236borisops
Borisops
: Добавить темную тему) что бы можно было посмотреть сложность алгоритма и добавить тэги.
10 сообщений
342 просмотра

Все категории