Front-end Flashcards
Які є фази евентів?
- Фаза захоплення (Capturing phase): подія спускається до елемента.
- Фаза цільового об’єкта (Target phase): подія досягла цільового елемента.
-
Фаза спливання (Bubbling phase): подія “спливає” від елемента вгору.
- Що таке DOM?
Що таке DOM?
Document Object Model - придставляє html елементи як об’єкти
Browser Object Model - придставляє додаткові об’єкти браузера
Порівняйте атрибути підключення скрипту async і defer в HTML-документі.
- async: Виконується асинхроно, як тільки завантажиться.
- defer: Завантажує асинхронно, але виконується після завантаження і парсингу HTML.
Яка різниця між властивостями HTML-елементів innerHTML і innerText?
В innerHTML можна вставити теги
Як зупинити спливання (bubbling) події? Як зупинити дефолтну обробку події?
stopPropagation, preventDefault
Опишіть процес спливання (bubbling) подій у DOM.
Події обробляються від найглибшого елемента до кореня документа.
Що таке LocalStorage і SessionStorage? Який максимальний розмір
Зберігає дані в форматі key/value. Local storage зберігає дані після закриття вкладки, session - ні. 5mb
Як отримати висоту блоку? Його положення щодо меж документа?
Висота: element.clientHeight або element.offsetHeight
Положення: element.getBoundingClientRect()
Що таке webpack?
Інструмент для збірки (bundle) JavaScript, CSS, та зображення.
Чим відрізняється dev-збірка від prod?
Prod - має мінімізований та оптимізований код
Що таке блокова модель CSS?
Визначає, як padding, margin і border впливають на кінцевий розмір
Які способи центрування блокового контенту по горизонталі та вертикалі знаєте?
Абсолютне центрування, margin, flex, grid
Як зробити додаток responsive?
Використовувати media queries, flex box, grid, для розмірів можна використовувани відсотки
Які є принципи семантичної верстки?
Використовувати теги за призначенням
Навіщо потрібні префікси для деяких CSS-властивостей (-webkit-, -moz- тощо)?
Забезпечити сумісність з різними браузерами
Як спростити написання кросбраузерних стилів?
Використовувати autoprfixer, скидувати дефалт стилі
Що таке CSS-препроцесори? З якими працювали? Що нового вони приносять у стандартний CSS?
Інструмен, який дозволяє використовувати змінні, міксини та інші функції, що полегшують написання, підтримку коду, повторно використування
Чи працювали з класовими компонентами? У чому їхня особливість?
Класові компоненти наслідують від базового класу React.Component. В конструкторі призначаєтсья state та передаються пропси. Класи мають доступ до методів жит циклу (componentDidMount, componentDidUpdate, і componentWillUnmount)
Що таке хуки? Переліч хучки і для чого вони слугують.
Функції які дозволяють ізолювати частину коду яка перевикористовується в функціональних компонентах.
Хуки:
useState - використовується для менеджменту стейту. Асинхроний. Викликає ререндерінг компонента. Немутабельний, треба використовувати state updater ф-цію.
useEffect і useLayoutEffect - використовуються для виконання стороніх подій, перший виконується після рендерінгу, другий до рендерінгу. перший асінхроний, другий сінхроний тобто блокує рендерінг, що впливає на швидкодійність. useLayoutEffect може використовуватися для розрахунку розміра елемента, чи для анімацій
useContext - використовується для отримування даних з контексту
useRef - з берігає значення або посилання на DOM елемент, який викликається з ref.current. Зберігає інформацію між рендерами, не викликає ререндерінгу.
useReducer - використовується для обробки більш складних стейтів. Аналог Redux
useMemo - використовується для оптимізації обчислень. Мемоізує результат, і повертає при наступних рендерах, якщо агументи не змінились.
useCallback - використовується для мемоізації функцій. Найчастіше використовується коли треба передвати ф-ції в props, або в “useEffect”, чи “useMemo”
Чи доводилося писати кастомні хуки та з якою метою?
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timeoutId = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timeoutId);
}; }, [value, delay]);
return debouncedValue;
};
import { useEffect } from ‘react’;
const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
useEffect(() => {
const handler = (event: MouseEvent | TouchEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};</HTMLElement>
document.addEventListener('mousedown', handler);
document.addEventListener('touchstart', handler);
return () => {
// Cleanup the event listener
document.removeEventListener('mousedown', handler);
document.removeEventListener('touchstart', handler);
};
}, [ref, callback]); };
export default useClickOutside;
import { useState } from ‘react’;
const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = (value) => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
Чи ознайомлені з фрагментами та порталами? Навіщо вони потрібні?
Фрагменти обгортають елементи не створюючи зайвого DOM-контейнера <></>
Портали дозволяють переміщати дочірні елементи за межі їхнього батьківського компонента та монтувати їх в інший DOM-контейнер поза ієрархією компонентів.
Які ви знаєте методи життєвого циклу компонента?
-
componentDidMount():Викликається після того, як компонент вперше відображається на екрані. Це часто використовується для виконання запитів до сервера або для підписки на події. -
componentDidUpdate(prevProps, prevState):Викликається після оновлення компонента, якщо він отримує нові властивості (props) або стан. Використовується для виконання дій після оновлення компонента. -
componentWillUnmount():Викликається перед тим, як компонент буде видалений з DOM. Використовується для відписки від подій або очищення ресурсів. -
shouldComponentUpdate(nextProps, nextState):Визначає, чи потрібно виконувати оновлення компонента. Повертаєtrue, якщо оновлення потрібне, іfalseв іншому випадку. Це може покращити продуктивність, уникаючи непотрібних оновлень.
З хуками, що вводяться у React 16.3, можна використовувати такі методи життєвого циклу:
-
useEffect(() => {}, []):- Хук, еквівалентний
componentDidMountтаcomponentDidUpdateв класових компонентах. Викликається після першого рендерингу та після кожного оновлення.
- Хук, еквівалентний
-
useEffect(() => { return () => {} }, []):- Хук, еквівалентний
componentWillUnmountв класових компонентах. Викликається перед тим, як компонент буде видалений.
- Хук, еквівалентний
Чи був досвід роботи з контекстом? Коли його варто використовувати?
Слугує для передачі даних глибоко вниз по дереву компонентів.
Використовується для передачі тем, локалізації, глобального стану
У чому бачите переваги бібліотеки React?
- Віртуальний дом
- Компонентна архітектура
- SPA додатки
- Популярність, та доступу до інформації
- Зрозумілий JSX синтаксис
- Може використовувати також для моб додатків
Чому бібліотека React швидка? Що таке Virtual DOM і Shadow DOM?
Virual DOM - власний DOM реакту. Замість змінювання реального DOM, реакт. React спочатку вносить зміни в віртуальний DOM. Потім порівнює віртуальний DOM з реальним DOM і визначає оптимальний спосіб оновлення. Це дозволяє зменшити кількість операцій.
Навіщо в списках ключі? Чи можна робити ключами індекси елементів масиву? Коли це виправдано?
Ключі допомагають React визначити, які елементи додали, видалили або змінили своє місце у списку. Це дозволяє React оптимізувати оновлення DOM і уникати зайвого перерендерингу елементів.
Бажано застосовувати унікальні ключі для стабільность якщл це можливо. Але індексні ключі можна застосовувати в випадках, коли знаємо що порядок елементів не буде змінюватися
В чому основна ідея Redux?
Глобальний store стану до якого можна отримати доступ з будь якого компоненту
React - це бібліотека чи фреймворк? Яка різниця між цими двома поняттями.
Реакт - бібліотека
Білбліотека - набір ф-цій та інструментів без правил
Фреймвор - набір правил, стандартів, та інструментів
Що таке codemod?
Модифікація коду - автоматичне оновлення програми за допомогою скриптів. Наприклад оновлення коду до нового стандарту
Чи доводилося налаштовувати проєкт React з нуля? За допомогою яких інструментів ви це робили?
Використовув create-react-app та vite
