Virtual DOM — це вбудована в браузер можливість ізоляції стилів, а Shadow DOM — JavaScript-об'єкт для рендерингу.

Virtual DOM — це внутрішнє представлення DOM у JavaScript, а Shadow DOM — нативний браузерний механізм для створення ізольованого DOM-піддокументу.

Virtual DOM забезпечує лише стилі, а Shadow DOM відповідає тільки за події.

Virtual DOM автоматично інкапсулює CSS, а Shadow DOM відповідає за оптимізацію пам'яті.

У чому ключова різниця між Virtual DOM та Shadow DOM?

Короткий тест, що перевіряє базові знання React: концепції Virtual DOM, компоненти, хуки, життєвий цикл, refs та Redux.

Щоб автоматично застосовувати стилі до елементів списку.

Щоб уникнути необхідності вказувати унікальні id на сервері.

Щоб React міг відстежувати, які елементи були змінені, додані або видалені, зіставляючи елементи по унікальному ключу.

Щоб виконувати перевірку типів пропс перед рендером.

Навіщо в списках React використовують атрибут key?

Щоб зберігати легке представлення UI в пам'яті і застосовувати згруповані зміни до реального DOM для підвищення продуктивності.

Щоб створювати ізольований піддокумент у браузері з інкапсульованими стилями.

Щоб виконувати серверний рендеринг HTML перед доставкою на клієнт.

Щоб автоматично кешувати ресурси та зменшувати мережеві запити.

Для чого використовується Virtual DOM у React?

props — це локальний стан компонента, а state передається з батьківського компонента.

props можна змінювати лише всередині компонента за допомогою setState, а state — передається ззовні.

props — це дані, які передаються в компонент ззовні, а state — внутрішній, локальний стан компонента.

props використовуються тільки в класових компонентах, а state — тільки в функціональних.

Яка основна відмінність між props та state у React?

Класові компоненти не підтримують state, а функціональні мають вбудований життєвий цикл.

Функціональні компоненти завжди працюють швидше, ніж класові, і не мають доступу до пропс.

Класові компоненти не можуть використовувати хуки для логіки, а функціональні — можуть.

Класові компоненти традиційно мали state і методи життєвого циклу, тоді як функціональні отримують еквіваленти через хуки (наприклад, useState і useEffect).

Яка відмінність між класовими та функціональними компонентами в контексті стану та життєвого циклу?

Монтування, оновлення і розмонтування.

Ініціалізація, синхронізація і фіналізація.

Рендеринг, мемоізація і відправка подій.

Створення, деплой і архівація.

Які основні фази життєвого циклу React-компонента?

Тому що він виконується на сервері, а не в браузері.

Щоб React міг згрупувати кілька викликів setState в одне оновлення та уникнути зайвих ререндерів.

Тому що setState повертає проміс, який вирішується пізніше.

Тому що setState автоматично блокує доступ до DOM-подій.

Чому метод setState у класових компонентах вважається асинхронним?

Створювати ізольований DOM-піддокумент з власними стилями.

Кешувати результат рендерингу між оновленнями.

Автоматично застосовувати ключі до масивів елементів.

Дозволяти компоненту повертати кілька дочірніх елементів без створення додаткового вузла в реальному DOM.

Яка основна функція React Fragment (<> </>)?

Щоб виконувати рендеринг компонентів на сервері замість клієнта.

Щоб автоматично синхронізувати state між компонентами.

Щоб замінювати фрагменти на реальні DOM-елементи.

Щоб рендерити дочірні елементи у вказаний DOM-вузол, який знаходиться поза ієрархією батьківського компонента.

Для чого використовуються портали в React?

Механізм для передачі props глибоко в дерево компонентів без проміжних рівнів.

Механізм для отримання прямого доступу до DOM-вузлів або інстансів React-елементів, створених у render.

Спеціальний тип state, що зберігається між перезавантаженнями сторінки.

Стандартний спосіб стилізації компонентів у React.

Що таке refs у React і для чого їх застосовують?

Хуки можна викликати де завгодно в коді, включаючи умовні блоки та цикли.

Імена всіх хуків мають починатися з 'hook' і вони повинні повертати проміси.

Не викликати хуки всередині циклів, умов чи вкладених функцій; використовувати їх тільки на верхньому рівні функціонального компонента або власного хука, а імена кастомних хуків мають починатися з 'use'.

Хуки обов'язково повинні бути оголошені як асинхронні функції (async).

Які базові правила використання React-хуків?

Відміняє обробку екшену і повертає його без змін.

Негайно викликає reducers поза будь-якими іншими middleware.

Автоматично логікує дію та записує її в локальне сховище.

Передає дію наступному middleware в ланцюжку, а після цього — у редюсери, дозволяючи продовжити обробку екшену.

У контексті Redux middleware, що робить виклик next(action)?

Питання 3 з 12