ReactJs

Question 1

1. Для чого потрібний Virtual DOM у React?

Answer 1

Віртуальний DOM - це концепція програмування, в якій «віртуальне» представлення інтерфейсу користувача зберігається в пам’яті та синхронізується з «справжнім» DOM за допомогою бібліотеки, такої як ReactDOM. Ця техніка дозволяє покращити продуктивність на клієнтській стороні, уникаючи прямої роботи з DOM шляхом роботи з легким JavaScript-об’єктом, що імітує DOM-дерево.

Question 2

2. Яка різниця між virtual DOM та shadow DOM?

Answer 2

Virtual DOM - повне представлення реального DOM-дерева у вигляді JavaScript-об’єкта. Його найважливішою особливістю є групування змін та виконання одиночного рендерингу замість безлічі дрібних.

Shadow DOM - це нативна реалізація в браузері, яка дозволяє створити свій, ізольований, DOM. Всередині Shadow DOM створюється окремий ““піддокумент””, до якого можна застосовувати свої стилі, екрановані від впливу зовнішнього середовища.

Question 3

3. Яка різниця між state та props?

Answer 3

props - передається в компонент ззовні.
state - внутрішній стан компонента.

Question 4

4. Яка різниця між класовим та функціональним компонентом?

Answer 4

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

Question 5

5. Які методи життєвого циклу є в React?

Answer 5

В React є 3 фази: монтування, оновлення та розмонтування. У кожній із цих фаз є свої методи життєвого циклу.

Монтування:
Ці методи викликають у такому порядку, коли екземпляр компонента створюється і додається в DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Оновлення:
Оновлення може бути викликане змінами у властивостях або стані. Ці методи викликається у такому порядку, коли компонент повторно відмальовується:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Розмонтування:
Цей метод викликається коли компонент видаляється з DOM:

• componentWillUnmount()

Обробка помилок:
Цей метод викликається при виникненні помилки під час рендеру, у методі життєвого циклу або в конструкторі будь-якого дочірнього компонента:

• static getDerivedStateFromError()
• componentDidCatch()

Question 6

6. Як оновити state у класовому компоненті?

Answer 6

Для того, щоб оновити стан у класовому компоненті, можна використовувати метод setState. Цей метод є асинхронним і React може згрупувати кілька викликів setState() в одне оновлення для поліпшення продуктивності. Метод setState може приймати функцію для того, щоб оновити стейт на основі вже наявного state. Виклик методу setState завжди призводить до оновлення компонента.

Question 7

7. Чому setState асинхронна функція?

Answer 7

Це потрібно для того, щоб React зміг згрупувати кілька викликів setState() в одне оновлення для покращення продуктивності. Виклик setState призводить до оновлення компонента, тому setState зробили асинхронною, щоб “дочекатися” поки всі компоненти викличуть setState() у своїх обробниках подій, перш ніж почати повторний рендер. Це позбавляє непотрібних повторних рендерів.

Question 8

8. Що потрібно зробити, щоб компонент оновився?

Answer 8

Для того, щоб оновився компонент потрібно:
- щоб змінився state, шляхом виклику метода setState.
- щоб змінилися props.
- викликати метод forceUpdate.

Question 9

9. Як запобігти зайвому оновленню компонента?

Answer 9

Існує кілька способів:
- реалізувати метод життєвого циклу shouldComponentUpdate, який скасовує рендер, якщо з нього повернути значення false.
- успадкуватися від PureComponent при створенні класового компонента.

Question 10

10. Яка особливість PureComponent?

Answer 10

В більшості випадків PureComponent можна використовувати замість написання власного shouldComponentUpdate. Але він робить лише поверхневе порівняння.

Question 11

11. Для чого потрібні key?

Answer 11

key - це спеціальний рядковий атрибут, який потрібно вказувати під час створення списку елементів. Ключі допомагають React визначати, які елементи були змінені, додані чи видалені. Їх необхідно вказувати, щоб React міг зіставляти елементи масиву з плином часу.

Question 12

12. Для чого потрібний компонент Fragment?

Answer 12

React компонент завжди повинен повертати тільки один елемент. Але іноді бувають завдання коли треба повернути кілька елементів. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів в DOM.

Question 13

13. Для чого потрібні портали?

Answer 13

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

Question 14

14. Що таке refs?

Answer 14

Рефи дають можливість отримати доступ до DOM-вузлів або React-елементів, створених у рендер-методі. Також рефи можуть зберігати в собі будь-яку іншу інформацію, окрім DOM-вузла.

Question 15

15. Що таке context?

Answer 15

У React-додатку дані передаються зверху вниз за допомогою props. Однак, подібний спосіб використання може бути надто громіздким для деяких типів props, які необхідно передавати до багатьох компонентів у додатку. Контекст надає спосіб ділитися такими даними між компонентами без необхідності явно передавати пропси через кожен рівень дерева.

Question 16

16. Для чого потрібні render props?

Answer 16

Render props - це можливість компонентів React розділяти код між собою за допомогою пропа, значенням якого є функція. Компонент із рендер-пропом бере функцію, яка повертає React-елемент, і викликає її замість реалізації власного рендеру.

Question 17

17. Що таке HOCs?

Answer 17

Компонент вищого порядку – це функція, яка приймає компонент та повертає новий компонент. Це потрібно для того, щоб винести певну бізнес-логіку в одне місце та знову використовувати її шляхом композиції компонентів.

Question 18

18. Як реалізувати компонент запобіжника (Error Boundary)?

Answer 18

Запобіжники — це компоненти React, які виловлюють помилки JavaScript в будь-якому місці дерев їх дочірніх компонентів, зберігають їх у журналі помилок і виводять запасний UI замість дерева компонентів, що звалилося. Класовий компонент є запобіжником, якщо він реалізує хоча б один із методів життєвого циклу: static getDerivedStateFromError() або componentDidCatch().

Question 19

19. Які можливості надають хуки?

Answer 19

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

Question 20

20. Які правила використання хуків?

Answer 20

Хуки — звичайні JavaScript-функції, але є два правила, яких потрібно дотримуватися. Не викликайте хуки всередині циклів, умовних операторів чи вкладених функцій. Натомість завжди використовуйте хуки тільки всередині React-функцій або всередині власного хука, до повернення будь-якого значення з них. Також, при створенні власного хука, його ім’я має починатися з «use».

Question 21

21. Для чого потрібний useEffect?

Answer 21

Хук useEffect дає можливість виконувати побічні ефекти у функціональному компоненті.

• Якщо передати функцію в useEffect, вона буде викликатися після кожного рендеру та оновлення.
• Якщо передати функцію та її залежність в useEffect, вона буде викликатися після рендеру і щоразу, коли її залежність змінюється.
• Якщо передати функцію в useEffect, яка повертає іншу функцію, ця функція буде викликана перед розмонтуванням компонента.

Question 22

22. Чим відрізняється useEffect від useLayoutEffect?

Answer 22

• useEffect викликається після рендеру та оновлення компонента.
• useLayoutEffect викликається синхронно перед рендером та оновленням компонента. useLayoutEffect запускається у тій же фазі, що і componentDidMount та componentDidUpdate.

Question 23

23. Що таке лінива ініціалізація стану в useState та useReducer?

Answer 23

Коли початковий стан є результатом виклику якоїсь функції, його можна ініціалізувати “ліниво” для того, щоб при кожному оновленні компонента ця функція не викликалася. Для цього в useState або useReducer потрібно передати функцію, яка поверне початковий стан, і буде викликана лише один раз, під час першого рендеру.

Question 24

24. Чим useRef відрізняється від createRef?

Answer 24

Різниця в тому, що коли потрібно створити ref всередині функціонального компонента, використовуючи createRef, він буде створюватися щоразу, коли оновлюється компонент. Використовуючи useRef, він створюється 1 раз під час монтування.

Question 25

25. Для чого потрібні useMemo та useCallback?

Answer 25

• Хук useMemo буде повторно обчислювати мемоізоване значення лише тоді, коли значення якоїсь із залежностей змінилося. Ця оптимізація допомагає уникнути дорогих обчислень під час кожного рендеру.
• Хук useCallback поверне мемоізовану версію колбека, який змінюється лише тоді, коли змінюються значення однієї із залежностей. Це корисно під час передачі колбеків оптимізованим дочірнім компонентам, які покладаються на рівність посилань для запобігання непотрібним рендерам.

Question 26

26. Для чого потрібний redux?

Answer 26

Redux - це бібліотека для керування станом програми. У звичайному додатку React компоненти мають свій state і можуть передавати його в якості props для дочірніх компонентів. У React-redux програмах є один глобальний state, на який підписуються компоненти, яким потрібно з нього читати дані.

Question 27

27. Поясніть redux data flow

Answer 27

Життєвий цикл даних у будь-якій Redux-програмі включає 5 кроків:

1 - викликається dispatch(action). Action - це простий javascript-об’єкт, який описує що трапилося.
2 - action потрапляє в middleware, і якщо це необхідно, запускає якийсь сайд-ефект.
3 - redux-стор викликає функцію-редюсер із двома аргументами: поточне дерево стану (state) та екшен (action).
4 - головний редюсер може комбінувати результат роботи кількох редюсерів у єдине дерево стану програми.
5 - redux-стор зберігає повне дерево стану, яке повертає головний редюсер.

Question 28

28. Що таке redux middleware?

Answer 28

Redux middleware надають сторонню точку розширення між відправкою екшену і моментом, коли цей екшен досягає редюсера. Redux middleware часто використовують для логування, повідомлення про помилки, спілкування з асинхронним API, роутингу тощо.

Question 29

29. Де потрібно робити side effects в redux?

Answer 29

Redux натхненний функціональним програмуванням і з коробки виконання побічних ефектів у ньому немає місця. Зокрема функції редюсера завжди повинні бути чистими функціями типу (state, action) => newState. Однак, мідлвари Redux-а дозволяють перехоплювати екшени та додавати до них складну поведінку, що включає побічні ефекти.

Question 30

30. Що таке next() функція в redux middleware?

Answer 30

Виклик next (action) в middleware призведе до того, що дія буде передана наступному middleware, а потім в редюсер. Це потрібно, щоб дотримуватися ланцюжка викликів middleware.

Question 31

31. Для чого потрібні redux селектори?

Answer 31

Селектори — це гетери для стану redux. Як і гетери, селектори інкапсулюють структуру стану та можуть використовуватися повторно. Селектори також можуть обчислювати похідні властивості.

Question 32

32. Чим відрізняється action від action creator?

Answer 32

action - це об’єкт, який описує, що сталося.
action creator - це функція, яка може приймати якісь параметри та повертає action.