- Для чого потрібний Virtual DOM у React?
Віртуальний DOM - це концепція програмування, в якій «віртуальне» представлення інтерфейсу користувача зберігається в пам’яті та синхронізується з «справжнім» DOM за допомогою бібліотеки, такої як ReactDOM. Ця техніка дозволяє покращити продуктивність на клієнтській стороні, уникаючи прямої роботи з DOM шляхом роботи з легким JavaScript-об’єктом, що імітує DOM-дерево.
- Яка різниця між virtual DOM та shadow DOM?
Virtual DOM - повне представлення реального DOM-дерева у вигляді JavaScript-об’єкта. Його найважливішою особливістю є групування змін та виконання одиночного рендерингу замість безлічі дрібних.
Shadow DOM - це нативна реалізація в браузері, яка дозволяє створити свій, ізольований, DOM. Всередині Shadow DOM створюється окремий ““піддокумент””, до якого можна застосовувати свої стилі, екрановані від впливу зовнішнього середовища.
- Яка різниця між state та props?
props - передається в компонент ззовні.
state - внутрішній стан компонента.
- Яка різниця між класовим та функціональним компонентом?
У класових компонентів є state, а у функціональних його немає. Але стан для функціонального компонента можна додати за допомогою хука useState. У класових компонентів є методи життєвого циклу, а у функціональних його немає. Але деякі методи життєвого циклу для функціонального компонента можна реалізувати за допомогою хука useEffect.
- Які методи життєвого циклу є в React?
В React є 3 фази: монтування, оновлення та розмонтування. У кожній із цих фаз є свої методи життєвого циклу.
Монтування:
Ці методи викликають у такому порядку, коли екземпляр компонента створюється і додається в DOM:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
Оновлення:
Оновлення може бути викликане змінами у властивостях або стані. Ці методи викликається у такому порядку, коли компонент повторно відмальовується:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Розмонтування:
Цей метод викликається коли компонент видаляється з DOM:
- componentWillUnmount()
Обробка помилок:
Цей метод викликається при виникненні помилки під час рендеру, у методі життєвого циклу або в конструкторі будь-якого дочірнього компонента:
- static getDerivedStateFromError()
- componentDidCatch()
- Як оновити state у класовому компоненті?
Для того, щоб оновити стан у класовому компоненті, можна використовувати метод setState. Цей метод є асинхронним і React може згрупувати кілька викликів setState() в одне оновлення для поліпшення продуктивності. Метод setState може приймати функцію для того, щоб оновити стейт на основі вже наявного state. Виклик методу setState завжди призводить до оновлення компонента.
- Чому setState асинхронна функція?
Це потрібно для того, щоб React зміг згрупувати кілька викликів setState() в одне оновлення для покращення продуктивності. Виклик setState призводить до оновлення компонента, тому setState зробили асинхронною, щоб “дочекатися” поки всі компоненти викличуть setState() у своїх обробниках подій, перш ніж почати повторний рендер. Це позбавляє непотрібних повторних рендерів.
- Що потрібно зробити, щоб компонент оновився?
Для того, щоб оновився компонент потрібно:
- щоб змінився state, шляхом виклику метода setState.
- щоб змінилися props.
- викликати метод forceUpdate.
- Як запобігти зайвому оновленню компонента?
Існує кілька способів:
- реалізувати метод життєвого циклу shouldComponentUpdate, який скасовує рендер, якщо з нього повернути значення false.
- успадкуватися від PureComponent при створенні класового компонента.
- Яка особливість PureComponent?
В більшості випадків PureComponent можна використовувати замість написання власного shouldComponentUpdate. Але він робить лише поверхневе порівняння.
- Для чого потрібні key?
key - це спеціальний рядковий атрибут, який потрібно вказувати під час створення списку елементів. Ключі допомагають React визначати, які елементи були змінені, додані чи видалені. Їх необхідно вказувати, щоб React міг зіставляти елементи масиву з плином часу.
- Для чого потрібний компонент Fragment?
React компонент завжди повинен повертати тільки один елемент. Але іноді бувають завдання коли треба повернути кілька елементів. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів в DOM.
- Для чого потрібні портали?
Портали дозволяють рендерити дочірні елементи в DOM-вузол, що знаходиться поза DOM-ієрархією батьківського компонента.
- Що таке refs?
Рефи дають можливість отримати доступ до DOM-вузлів або React-елементів, створених у рендер-методі. Також рефи можуть зберігати в собі будь-яку іншу інформацію, окрім DOM-вузла.
- Що таке context?
У React-додатку дані передаються зверху вниз за допомогою props. Однак, подібний спосіб використання може бути надто громіздким для деяких типів props, які необхідно передавати до багатьох компонентів у додатку. Контекст надає спосіб ділитися такими даними між компонентами без необхідності явно передавати пропси через кожен рівень дерева.
- Для чого потрібні render props?
Render props - це можливість компонентів React розділяти код між собою за допомогою пропа, значенням якого є функція. Компонент із рендер-пропом бере функцію, яка повертає React-елемент, і викликає її замість реалізації власного рендеру.
- Що таке HOCs?
Компонент вищого порядку – це функція, яка приймає компонент та повертає новий компонент. Це потрібно для того, щоб винести певну бізнес-логіку в одне місце та знову використовувати її шляхом композиції компонентів.
- Як реалізувати компонент запобіжника (Error Boundary)?
Запобіжники — це компоненти React, які виловлюють помилки JavaScript в будь-якому місці дерев їх дочірніх компонентів, зберігають їх у журналі помилок і виводять запасний UI замість дерева компонентів, що звалилося. Класовий компонент є запобіжником, якщо він реалізує хоча б один із методів життєвого циклу: static getDerivedStateFromError() або componentDidCatch().
- Які можливості надають хуки?
Хуки дозволяють використовувати стан та інші можливості React без написання класів. Хуки дозволяють повторно використовувати логіку стану, не зачіпаючи дерева компонентів.
- Які правила використання хуків?
Хуки — звичайні JavaScript-функції, але є два правила, яких потрібно дотримуватися. Не викликайте хуки всередині циклів, умовних операторів чи вкладених функцій. Натомість завжди використовуйте хуки тільки всередині React-функцій або всередині власного хука, до повернення будь-якого значення з них. Також, при створенні власного хука, його ім’я має починатися з «use».
- Для чого потрібний useEffect?
Хук useEffect дає можливість виконувати побічні ефекти у функціональному компоненті.
- Якщо передати функцію в useEffect, вона буде викликатися після кожного рендеру та оновлення.
- Якщо передати функцію та її залежність в useEffect, вона буде викликатися після рендеру і щоразу, коли її залежність змінюється.
- Якщо передати функцію в useEffect, яка повертає іншу функцію, ця функція буде викликана перед розмонтуванням компонента.
- Чим відрізняється useEffect від useLayoutEffect?
- useEffect викликається після рендеру та оновлення компонента.
- useLayoutEffect викликається синхронно перед рендером та оновленням компонента. useLayoutEffect запускається у тій же фазі, що і componentDidMount та componentDidUpdate.
- Що таке лінива ініціалізація стану в useState та useReducer?
Коли початковий стан є результатом виклику якоїсь функції, його можна ініціалізувати “ліниво” для того, щоб при кожному оновленні компонента ця функція не викликалася. Для цього в useState або useReducer потрібно передати функцію, яка поверне початковий стан, і буде викликана лише один раз, під час першого рендеру.
- Чим useRef відрізняється від createRef?
Різниця в тому, що коли потрібно створити ref всередині функціонального компонента, використовуючи createRef, він буде створюватися щоразу, коли оновлюється компонент. Використовуючи useRef, він створюється 1 раз під час монтування.
