Fullstack-розробник Максим Головко поділився переліком питань, які зібрав сам під час технічних співбесід на позицію Frontend Developer. Він також підготував відповіді на них.
Fullstack-розробник Максим Головко поділився переліком питань, які зібрав сам під час технічних співбесід на позицію Frontend Developer. Він також підготував відповіді на них.
«Сподіваюся, це стане у пригоді під час пошуку роботи вашої мрії», — пише Максим Головко.
Ось гайд від нього для Frontend Developer, який допоможе підготуватись до співбесіди.
DOCTYPE вказує тип поточного документа. Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує у кількох версіях. Браузер спробує відобразити сторінку в режимі сумісності (quirks mode). Це може призвести до того, що в різних браузерах сторінка відображатиметься по-різному.
Мета-теги — це теги, які надають пошуковим системам додаткову інформацію про сторінку сайту. Наприклад, механізми пошукових систем звертаються до мета-тегів для отримання опису сайту, ключових слів та інших даних. Мета-теги для сайту розміщуються всередині <head>.
Блокові елементи є основою, яка використовується для верстки сторінок. Такий елемент є прямокутником, який за замовчуванням займає всю доступну ширину сторінки, а висота елемента залежить від його вмісту. Такий елемент завжди починається з нового рядка. Блоковий елемент може містити в собі інші блокові та рядкові елементи.
Приклади блокових елементів: <div>, <p>, <ul>, <ol>, <h1>
На відміну від блокового, рядковий елемент не переноситься на новий рядок, а розташовується у тому ж рядку, що й попередній елемент. Ширина рядкового елемента залежить від його вмісту. Блокові елементи не можна вкладати в рядкові.
Приклади рядкових елементів: <a>, <span>, <strong>, <em>, <img>
Це може виникати через те, що деякі браузери можуть не підтримувати певні символи операційної системи. Також може відрізнятися кодування. Або не підключено потрібний шрифт з іконками.
Це верстка орієнтована на структурування html-документів. У ній використовуються теги, які поділяють код на логічні блоки, що явно показують їх роль і зміст у структурі сторінки. Семантична верстка відрізняється від блокової лише елементами, що використовуються при структуризації сторінки. У блоковій верстці використовують в основному тільки елемент div, а в семантичній використовуються крім div ще безліч інших тегів, таких як: header, main, section, footer, nav, aside. Вона підіймає сайт вищче у результатах пошуку та допомагає скрін рідерам правильно читати сайт і робить його більш доступним для людей с обмежиними можлиіостями
HTML підтримує шість різних типів заголовків. Ці заголовки відрізняються за розміром шрифту, починаючи з найбільшого.
h1 — найбільший заголовок. h6 — найменший заголовок.
h1 має бути лише 1 на сторінці.
Потоком документа HTML називається порядок виведення елементів на сторінку. У звичайному вигляді всі блоки виводяться у порядку, у якому записані всередині HTML-документа. Так потік можна змінювати за допомогою css правил, наприклад, за допомогою position: absolute.
Перший спосіб — вставити скрипт у блок script. Другий спосіб — підключити скрипт за допомогою додавання посилання на файл JavaScript async defer. Бажано всі скрипти підключати наприкінці блоку body.
Перший спосіб — описати селектори та їх значення всередині тегу style.
Другий спосіб — підключити стилі за допомогою додавання посилання на зовнішній файл css, використовують тег link, що розташовується всередині блоку head. Третій спосіб — додати інлайнові стилі для кожного окремого елемента, використовуючи атрибут style.
Але це не рекомендовано бо вони додаються лише до одного елемета, мають найвищчу специфічність і погану читабельність
reset.css — скидає всі стилі в нуль для того, щоб можна було розпочати стилізацію сайту з чистого аркуша.
normalize.css — приводить вихідні стилі до єдиного стану, у всіх браузерах.
стилі, які необхідні для відтворення першої видимої частини сторінки. Для моментального відтворення критичний CSS вбудовують в HTML, всі інші стилі завантажуються окремим файлом асинхронно.
Це спосіб, за допомогою якого браузери визначають, які значення властивостей CSS найбільше відповідають елементу і, отже, будуть застосовані. Специфічність є вагою, що надається конкретному правилу CSS. Найбільшу вагу мають inline стилі. Потім стилі селектора за ID. Найменшу вагу мають селектори по тегу і також селектор зірочки.
Щоб підвищчити специфічність селектори можна комбінувати. Також вона підвишчується після додавання псевдокласів
Псевдокласи описують особливий стан елементу. Наприклад, стан натиснутої кнопки. Псевдоелементи відповідають віртуальним елементам. Наприклад, потрібно виділити першу літеру в рядку. Їх немає у дом. дереві і до них неможна звернутися через JS
Кожен блок має прямокутну область вмісту в центрі, поля навколо вмісту (padding), рамку навколо полів (border) та відступ за межами рамки (margin).
Властивість box-sizing визначає як обчислюється загальна ширина та висота елемента. Має дві поведінки:
— content-box це стандартна поведінка. Якщо встановити елементу ширину 100 пікселів, то ширина його контенту буде 100 пікселів, а ширина меж і внутрішніх відступів під час рендеру буде додана до фінальної ширини, що зробить елемент ширше ста пікселів.
— border-box каже браузеру враховувати будь-які межі та внутрішні відступи у значеннях, які вказані у ширині та висоті елемента. Якщо виставити елементу ширину 100 пікселів, то ці 100 пікселів будуть містити межі та внутрішні відступи, а контент стискається, щоб виділити для них місце. Зазвичай це полегшує роботу з розмірами елементів.
Є п’ять видів позиціювання:
Fixed relative виймають елемент із потоку.
Ця властивість визначає положення елемента або елементів, розташованих по осі z. У загальному випадку елементи з більшим z-index перекривають елементи з меншим. Ця властивість працює тільки для елементів, у яких значення position встановлено як absolute, fixed або relative.
У гумовій верстці блоки змінюють ширину залежно від розміру вікна браузера і вони часто задаються у відсотках.
Адаптивна верстка реалізується за допомогою медіа правил. Це дає змогу для кожного окремого розміру екрана відображати різну верстку. Будь-яка зміна розміру вікна відбувається ривками, після досягнення однієї із зазначених точок перелому. За допомогою медіа правил можна визначити як буде виглядати верстка на мобільних пристроях
Респонсивна верстка — це поєднання гумової та адаптивної верстки.Блоки змінюють свою ширину в залежності від ширини вікна браузера, а також вона змінюється коли досягає точок перелому медіаправил. У реалізації найскладніша. Але результат виходить найбільш прийнятним.
Під час завантаження сторінки, якщо вона не порожня, завжди виконується щонайменше по одному reflow та repaint. Далі ці події виникають у таких випадках:
Підія ревлоу завжди більш ресурсозатратна за подію репеинт.
Абсолютні адреси повинні починатися із зазначення протоколу (зазвичай http://) та містити ім’я сайту.
Відносні посилання ведуть відлік від кореня сайту чи поточного документа. (/path)
Теги використовують для позначення початку та кінця вмісту HTML елемента.
Елемент складається з тегів та вмісту.
type визначає тип кнопки, який встановлює її поведінку у формі. На вигляд кнопки різного типу ніяк не відрізняються, але у кожної такої кнопки свої функції. Існує 3 типи: button, reset і submit. За замовчуванням встановлено значення submit.
Коли вказується стиль елемента, частина властивостей може бути успадкована його дочірніми елементами та нащадками. Наприклад, якщо задати колір тексту для body, то всі дочірні елементи та нащадки його успадкують.
Каскадність — це особливість CSS, за допомогою якої браузер визначає значення яких властивостей буде застосовано до елемента, коли виникає конфлікт властивостей. Конфлікт властивостей виникає, коли для елемента визначено кілька правил, селектори яких мають однакову специфічність і містять однакові властивості, але з різними значеннями.
За допомогою контентних зображень до користувачів доноситься корисна інформація. Щоб додати контентне зображення на сторінку, в розмітці використовується тег <img>. Для таких зображень необхідно заповнювати атрибут alt, який описує те, що зображено на картинці.
Декоративні зображення використовуються виключно для оформлення. Такі зображення не несуть для користувача корисну інформацію. Декоративні зображення слід реалізовувати за допомогою CSS наприклад background css.
Псевдоелементи:before та:after дають результат тільки для тих елементів, які мають вміст. А у <img> та <input> вмісту немає.
Flex-контейнер встановлює новий гнучкий контекст форматування для його вмісту. Flex-контейнером є той елемент, у якого задано властивість display: flex або display: inline-flex.
Flex-елементом є кожен дочірній елемент flex-контейнера. Текст що міститься у флекс контейнері огортається анонімним флекс елементом
Flexbox визначає поняття головної та допоміжної осі. Елементи flex завжди розміщуються вздовж головної осі. При цьому головна вісь може бути розташована горизонтально чи вертикально. Спочатку головна вісь розташована горизонтально з напрямком елементів справа наліво. Головна вісь завжди перпиндикулярна допоміжній. Напрямок головної осі можна змінити за допомогою властивості flex-direction.
Існує 8 типів даних. 7 примітивних та 1 складний тип даних.
Примітивні типи: number, string, boolean, symbol, bigInt, null, undefined.
Складний тип — object. Він використовується для колекцій даних та для оголошення більш складних сутностей. Також він передається за посиланням, а прості типи даних за значенням.
NaN (not a number) — це значення, що отримується в результаті виконання числової операції над не числовим значенням. Наприклад множення або ділення рядка, приведення рядка який не містить число до number. NaN має тип даних number. NaN не дорівнює самому собі. Перевірку на NaN можна зробити за допомогою Number.isNaN
undefined (невизначеність) являє собою значення за замовчуванням:
null — це значення «відсутності значення».
Присвоюється змінній явно. TypeOf null поверне тип object, тому щоб перевірити на null треба використовувати оператор строгої рівності
Строга рівність порівнює значення за типом даних та значенням. Нестрогa приводить значення до одного типу, а потім ці значення порівнює.
use strict — це директива, яка вмикає суворий режим у JavaScript. Її зазвичай ставлять на початку скрипту або функції. Ось чому це важливо:
Використовуючи цю директиву, ми можемо писати більш якісний і зрозумілий код.
Тому що об'єкти — це типи даних, що передаються за посиланням. 2 однакові на вигляд об'єкта мають різні посилання, і тому операція порівняння повертатиме false.
Є два способи:
Існує поняття глибокого та поверхневого копіювання. Глибоке — це копіювання об'єкта та всіх його рівнів вкладеності. Поверхневе — це копіювання лише першого рівня вкладеності, а для решти копіюється посилання.
Для цього можна використати метод isArray ().
Існує 6 методів:
Є декілька способів:
Є декілька способів
Цикл for…in можна використовувати для масивів, але це не рекомендується. Основні недоліки:
Краще використовувати for…of або forEach для масивів.
Це механізм у JavaScript, в якому змінні типу var та оголошення функцій, пересуваються вгору своєї області видимості перед тим, як код буде виконаний. Так змінні типу var та function declaration вважаються оголошеними з самого початку виконання функції не залежно від того в якому місці фунції реально знаходиться їх оголошення за умови що вони не знаходяться у вкладеній функції.
Оскільки на змінні типу var розповсюджується hoisting такі змінні вважаються оголошеними з самого початку виконання функції не залежно від того у якому місці функції реально знаходиться їх оголошення тому значенням такої змінної буде undefined так само як і в оголошеній але не ініціалізованій змінній.
Буде помилка типу ReferenceError бо на ці змінні не розповсюджується hoisting бо змінної ще не існує.
Це місце, де ми маємо доступ до змінних або функцій. JS має 4 типи областей видимості: глобальна, функціональна, блокова (ES6) та область видимості eval. На змінні типу var не розповсюджується блокова область видимості для такого типу існує лише глобальна функціональна та область видимості eval.
Function Expression — це змінна у яку записали функцію і на неї не розповсюджується hoisting, а на Function Declaration hoisting розповсюджується. Тому Function Expression створюється, коли виконання доходить до нього, а потім вже може використовуватися. Function Declaration можна використовувати у всьому скрипті (або блоці коду, якщо функцію оголошено в блоці).
Callback-функції — це функції, які передаються як аргументи в інші функції та викликаються після завершення певних операцій, зокрема асинхронних. Вони дозволяють виконувати код після виконання запиту або обробки події. Наприклад, при завантаженні даних з сервера callback може використовуватися для обробки результатів запиту.
Це важливо для управління асинхронністю в JavaScript, оскільки дозволяє уникнути блокування потоку виконання програми. Однак, надмірне використання callback-функцій може призвести до так званого «callback hell», що ускладнює читання і підтримку коду. У таких випадках зазвичай рекомендується використовувати проміси або async/await для спрощення роботи з асинхронним кодом.
Стрілочна функція не має власного this. Вона бере його за місцем створення. У звичайній функції this визначається під час виклику. Стрілочна функція не має arguments. Стрілочна функція не має prototype. Стрілочна функція має короткий синтаксис неявного повернення значення.
Аналога немає. Але можна використовувати rest оператор (…) для того, щоб зібрати всі параметри з якими викликана функція в масив. Такий підхід можна вважати кращим оскільки він дає можливість зібрати залишкову частину параметрів з якими викликана функція, arguments завжди міститиме усі параметри також за допомогою rest усі параметри міститимуться в масиві, а з ним працювати зручніше ніж з псевдомасивом.
Щоб викликати функцію із затримкою в 5 секунд, у JavaScript можна використовувати функцію setTimeout. Ось як це робиться:
Це властивості внутрішнього об'єкта функції, які створюються під час її виклику. Прямого доступу до цього об’єкта ми не маємо. Туди записуються аргументи, функції та змінні створені в середині цієї функції. Також там знаходиться посилання на зовнішнє лексичне оточення. Якщо ми хочемо звернутися до змінної її пошук починається з локального лексичного оточення.
У несуворому режимі це window. У суворому — undefined.
Це здатність функції під час створення запам’ятовувати посилання на змінні, функції та параметри, що знаходяться в поточному лексичному оточенні, а також у лексичному оточенні батьківської функції й так до глобального лексичного оточення. Замикання передбачає саме зовнішні змінні, а не саму функцію.
Замикання корисні тим що дозволяють пов’язувати дані що знаходяться у лексичному оточенні з функцією яка працює з цими даними JS не дозволяє створювати приватні властивості або методи в класі але це можна емулювати також на основі замикання базується техніка каррування та інкапсуляції
Immediately Invoked Function Expression — це функція, яка викликається або виконується одразу після створення або оголошення. Все що знаходиться всередині цієї функції не доступне з зовні її часто використовують для виконання функції ініціалізації певних налаштувань одразу після завантаження сторінки.
Це посилання на контекст виклику функції. Контекстом є об'єкт, який в цей момент виконує або викликає функцію. Для стрілочної функції — це об'єкт у якому вона створена, а у звичайній функції — яким вона викликана.
Контекстом може бути:
this в об'єкті — вказує на сам об'єкт
this в класі — вказує на екземпляр класу
глобальним контекстом є window (або undefined в режимі use strict)
Існує 3 методи: call, apply, bind.
Ні, bind прив’язує контекст назавжди. Але можна використати початкову функцію і викликати на ній call, apply, або bind для підміни контексту
Ні. Стрілочна функція не має методів call, apply, bind і своїх аналогів. Також вона використовує контекст у якому її створили, а не контекст у якому її викликали. Це означає що підмінити контекст виклику стрілочної функції не можна
Це шаблон об'єкта. Він використовується як запасний варіант для властивостей та методів, що існують у цьому об'єкті.
Наприклад ми звертаємося до властивості об’єкта якщо ця властивість не буде знайдена у самому об’єкті JS шукатиме її у прототипі цього об’єкта. Це також один зі способів обміну властивостями та функціональністю між об'єктами. Наприклад ми маємо декілька об’єктів які мають містити однакові методи чи властивості їх можна розмістити в прототипі такий варіант є більш вигідним з точки зору використання пам’яті аніж варіант де ці ж методи чи властивості будуть зберігатися окремо в кожному з об’єктів. Це основна концепція прототипного наслідування в JS.
Коли ми хочемо прочитати властивість з об'єкта, а вона відсутня — JavaScript спробує прочитати його з прототипу об'єкта. Якщо властивості немає в прототипі, JavaScript намагатиметься його прочитати з прототипу прототипу, і т. д. доки властивість не буде знайдено або ланцюжок прототипів не закінчиться. У такому разі JavaScript поверне undefined. У JS глобальний прототип це object, а у самого object прототипом буде null
Використати Object.create (). Цей метод приймає першим аргументом об'єкт, який буде прототипом об'єкта, який він поверне. Якщо ми викличемо Object.create () з аргументом null, буде створено об'єкт без прототипу. А також ми можемо створити об’єкт, а потім замінити йому прототип за допомогою Object.setPrototypeOf (), але цей спосіб є менш зручним.
Можна використовувати метод hasOwnProperty, який повертає true або false, в залежності від того, чи містить об'єкт зазначену властивість, як власну властивість, чи ні.
Є метод Object.freeze (), який «заморожує» об'єкт від змін. Цей метод працює тільки в один бік. Скасувати дію цього методу вже неможливо.
Є метод Object.seal (), який забороняє додавати нові властивості, але вже наявні властивості можна змінювати.
Також є метод Object.preventExtensions (), який забороняє додавати нові властивості в об'єкт.
Клас — це синтаксичний цукор над функцією конструктора. Під час створення екземпляра класу, методи описані в ньому потрапляють у прототип, а методи описані всередині функції конструктора потраплять у сам екземпляр. Для того, щоб методи, описані всередині функції конструктора, потрапили в прототип, їх потрібно окремо туди додати. Також клас має більш звичний синтаксис для ООП.
Усі методи описані у класі під час створення екземпляру цього классу потрапляють в його прототип але якщо ми хочемо щоб цей прототип і метод був в середині екземпляра такий метод слід описати в середині конструктора.
LocalStorage та SessionStorage — це два типи веб-сховищ, які використовуються для зберігання даних у браузері.
LocalStorage зберігає дані безстроково. Це означає, що інформація залишиться навіть після закриття браузера. Видалити її можна лише за допомогою JavaScript або якщо користувач сам очистить кеш браузера. Обсяг зберігання зазвичай становить до 5 МБ. Важливо зазначити, що старі браузери, такі як Internet Explorer 7 і нижче, не підтримують цю функцію. Також дані в LocalStorage прив’язані до домену, тобто вони недоступні для інших сайтів.
SessionStorage, зберігає дані тільки під час поточної сесії вкладки. Це означає, що як тільки вкладка буде закрита, усі дані в ній буде втрачено. Кожна вкладка браузера має своє власне SessionStorage, тож дані не діляться між вкладками. Обсяг зберігання також складає до 5 МБ, і, як і у випадку з LocalStorage, старі браузери, такі як IE 7 і нижче, не підтримують цю функцію.
Це об'єкт, який використовують для відкладених та асинхронних обчислень. Обгортка для значення невідомого на момент створення проміса він дозволяє обробляти результати асинхроних операцій так ніби вони були б синхронними, замість кінцевого результату асинхронного методу повертається обіцянка отримати цей результат у певний момент у майбутньому.
Promise має 3 стани:
Під час створення проміс перебуває в очікуванні, а далі вже може стати виконаним і повернути результат
Очікує виконання всіх промісів або відхилення будь-якого з них. Повертає проміс, який виконається після виконання всіх промісів. Результатом успішного виконання цього промісу буде масив з результатами виконання очікуваних промісів. У випадку, якщо будь-який з промісів буде відхилено, Promise.all також буде відхилено з помилкою. У нього є аналог Promise.allSetled, який виконується як тільки всі отримані проміси завершені (виконані або відхилені), що містить масив результатів виконання отриманих промісів.
Очікує виконання або відхилення будь-якого з отриманих промісів. Повертає проміс, який буде виконано або відхилено з результатом виконання першого виконаного або відхиленого промісу.
Ключове слово async робить створену функцію асинхронною. Функція async може містити вираз await, який призупиняє виконання функції async і чекає відповіді від переданого Promise, потім відновлює виконання функції async і повертає отримане значення. Вона дозволяє обробляти результати асинхронних операцій так якби вони були синхронними, також це функція заавжди повертає проміс.
Існує два способи:
Це механізм, який відповідає за виконання коду, збору та обробки подій та виконання підзадач із черги.
У концепції event loop є кілька блоків:
Ці функції завжди будуть викликатися по черзі після того як повністю звільниться call стек.
CRUD — це абревіатура, що означає чотири основні операції для роботи з даними: Create (Створити), Read (Читати), Update (Оновити) та Delete (Видалити). Ці операції дозволяють додавати нові записи, переглядати існуючі, редагувати їх та видаляти. CRUD є основою для побудови багатьох додатків, особливо в контексті роботи з базами даних, веб-додатками та API.
Віртуальний DOM — це концепція програмування, в якій «віртуальне» представлення інтерфейсу користувача зберігається в пам’яті та синхронізується з «справжнім» DOM за допомогою бібліотеки, такої як ReactDOM. Ця техніка дозволяє покращити продуктивність на клієнтській стороні, уникаючи прямої роботи з DOM шляхом роботи з легким JavaScript-об'єктом, що імітує DOM-дерево.
Спочатку React вносить усі зміни у віртуальний DOM потім застосовує їх на справжньому DOM.
Virtual DOM — повне представлення реального DOM-дерева у вигляді JavaScript-об'єкта. Його найважливішою особливістю є групування змін та виконання одиночного рендерингу замість безлічі дрібних. Звичайна JS бібліотека
Shadow DOM — це нативна реалізація в браузері, яка дозволяє створити свій, ізольований, DOM. Всередині Shadow DOM створюється окремий «піддокумент», до якого можна застосовувати свої стилі, інкапсульвані від впливу зовнішнього середовища. Прикладами елементів з Shadow DOM є елементи input select option.
Обидві концепції використовуються для оптимізації і підвищення продуктивності роботи программи
У класових компонентів є state, а у функціональних його немає. Але стан для функціонального компонента можна додати за допомогою хука useState. У класових компонентів є методи життєвого циклу, а у функціональних його немає. Але деякі методи життєвого циклу для функціонального компонента можна реалізувати за допомогою хука useEffect.
Після появи хуків можливості функціональних компонентів стали майже такими самими як і у класових.
В React є 3 фази: монтування, оновлення та розмонтування. У кожній із цих фаз є свої методи життєвого циклу.
Монтування ці методи викликаються у наступному порядку коли екземпляр компонента створюється і додається в DOM:
Оновлення може бути викликана через зміни у властивостях або стані ці методи викликаються у наступному порядку коли компонент повторно рендериться:
Розмонтування викликається коли компонент видаляється з DOM
Також є методи життевого циклу для обробки помилок ці методи викликаються у разі помилки під час рендеру у методі життевого циклу або у конструкторі будь якого дочірнього компонента
Для того, щоб оновити стан у класовому компоненті, можна використовувати метод setState. Цей метод є асинхронним і React може згрупувати кілька викликів setState () в одне оновлення для поліпшення продуктивності. Метод setState може приймати функцію для того, щоб оновити стейт на основі вже наявного state. Виклик методу setState завжди призводить до оновлення компонента.
Це потрібно для того, щоб React зміг згрупувати кілька викликів setState () в одне оновлення для покращення продуктивності. Виклик setState призводить до оновлення компонента, тому setState зробили асинхронною, щоб «дочекатися» поки всі компоненти викличуть setState () у своїх обробниках подій, перш ніж почати повторний рендер. Це позбавляє непотрібних повторних рендерів.
Для того, щоб оновився компонент потрібно. Змінити state, шляхом виклику метода setState або щоб змінився props також оновити компонент можна завдяки виклику метода forceUpdate.
Існує кілька способів:
PureComponent схожий на React Component відмінність полягає в тому що React Component не реалізує метод життевого циклу shouldComponentUpdate
В більшості випадків PureComponent можна використовувати замість написання власного shouldComponentUpdate. Але він робить лише поверхневе порівняння пропс і станів. Якщо вони містять складні структури даних еффекта від реакт PureComponent може не бути. Якщо метод render реакт компонента завжди рендерить однаковий результат за одних і тих самих пропс і станів для покращення продуктивності у деяких випадках можна використовувати PureComponent.
key — це спеціальний рядковий атрибут, який потрібно вказувати під час створення списку елементів. Ключі допомагають React визначати, які елементи були змінені, додані чи видалені. Їх необхідно вказувати, щоб React міг зіставляти елементи масиву з плином часу. Значеннями key мають бути унікальні значення що не змінюються, не рекомендовано використовувати індекс елементів масиву як ключ оскільки це погано впливає на продуктивність.
React компонент завжди повинен повертати тільки один елемент. Але іноді бувають завдання коли треба повернути кілька елементів. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів в DOM. Фрагментів немає в реальному DOM але вони є у віртуальному DOM також фрагменти не приймають ніякі пропс за винятком key щоб їх можна було відрендирити у списку.
Портали дозволяють рендерити дочірні елементи в DOM-вузол, що знаходиться поза DOM-ієрархією батьківського компонента. При цьому у віртуальному DOM вони розташовані саме в тому місці де їх викликали.
Рефи дають можливість отримати доступ до DOM-вузлів або React-елементів, створених у рендер-методі. Також рефи можуть зберігати в собі будь-яку іншу інформацію, окрім DOM-вузла. У атрибут компонента або елемента реф можна передати функцію яка викличиться з цим елементом або компонентом один раз під час монтування компонента.
У React-додатку дані передаються зверху вниз від батьківського до дочірнього елемента за допомогою props. Однак, подібний спосіб використання може бути надто громіздким для деяких типів props, які необхідно передавати до багатьох компонентів у додатку. Контекст надає спосіб ділитися такими даними між компонентами без необхідності явно передавати пропси через кожен рівень дерева.
Render props — це патерн у React, який дозволяє компонентам ділитися логікою, передаючи функцію в якості пропса. Компонент з render prop приймає функцію, яка повертає React-елемент, і викликає її замість свого власного методу рендерингу. Важно відзначити, що render prop може бути будь-яким пропсом, який використовується в компоненті, і є функцією, що відповідає за рендеринг. Також слід пам’ятати, що використання render props може знизити переваги PureComponent, оскільки вони можуть викликати зайві перерисовки.
Компонент вищого порядку — це функція, яка приймає компонент та повертає новий компонент. Це потрібно для того, щоб винести певну бізнес-логіку в одне місце та знову використовувати її шляхом композиції компонентів. Прикладом хук є функція connect з бібліотеки редакс.
Запобіжники — це компоненти React, які виловлюють помилки JavaScript в будь-якому місці дерев їх дочірніх компонентів, зберігають їх у журналі помилок і виводять запасний UI замість дерева компонентів, що впало. Класовий компонент є запобіжником, якщо він реалізує хоча б один із методів життєвого циклу: static getDerivedStateFromError () або componentDidCatch (). Запобіжники відловлюють помилки під час рендирингу в методах життевого циклу і конструкторів дерев компонентів які розташовані під ними але запобіжники не зловлять помилку у слухачів подій асинхронному коді серверному рендерингу і в самому запобіжнику.
Хуки дозволяють використовувати стан та інші можливості React без написання класів. Хуки дозволяють повторно використовувати логіку стану, не зачіпаючи дерева компонентів. Так за допомогою хуків можна вирішувати велику кількість проблем які раніше вирішувались завдяки HOCs. Хуки дозволяють розбити один компонент на маленькі функції згідно їх призначення, а не на основі методів життевого циклу завдяки цьому хуки легко використовувати в різних компонентах.
Хуки — звичайні JavaScript-функції, але є два правила, яких потрібно дотримуватися. Не викликайте хуки всередині циклів, умовних операторів чи вкладених функцій. Натомість завжди використовуйте хуки тільки всередині React-функцій або всередині власного хука, до повернення будь-якого значення з них. Також, при створенні власного хука, його ім’я має починатися з «use».
Хук useEffect дає можливість виконувати побічні ефекти у функціональному компоненті.
Вони дуже схожі:
Коли початковий стан є результатом виклику якоїсь функції, його можна ініціалізувати «ліниво» для того, щоб при кожному оновленні компонента ця функція не викликалася оскільки результат її виклику буде проігноровано. Для цього в useState або useReducer потрібно передати функцію, яка поверне початковий стан, і буде викликана лише один раз, під час першого рендеру.
Різниця в тому, що коли потрібно створити ref всередині функціонального компонента, використовуючи createRef, він буде створюватися щоразу, при монтуванні або коли оновлюється компонент. А використовуючи useRef, він створюється 1 раз під час монтування.
Redux — це бібліотека для керування станом програми. У звичайному додатку React компоненти мають свій state і можуть передавати його в якості props для дочірніх компонентів. У React-redux програмах є один глобальний state, на який підписуються компоненти, яким потрібно з нього читати дані.
Redux middleware надають сторонню точку розширення між відправкою екшену і моментом, коли цей екшен досягає редюсера. Redux middleware часто використовують для логування, повідомлення про помилки, спілкування з асинхронним API, роутингу тощо. Найпопулярнішими редакс миделварами є редакс санк и редакс сага.
Redux натхненний функціональним програмуванням і з коробки виконання побічних ефектів у ньому немає місця. Зокрема функції редюсера завжди повинні бути чистими функціями типу (state, action) => newState. Однак, мідлвари Redux-а дозволяють перехоплювати екшени та додавати до них складну поведінку, що включає побічні ефекти.
Виклик next (action) в middleware призведе до того, що дія буде передана наступному middleware, а потім в редюсер. Це потрібно, щоб дотримуватися ланцюжка викликів middleware і action потрапив в редьюсер.
Селектори — це гетери для стану redux. Як і гетери, селектори інкапсулюють структуру стану та можуть використовуватися повторно. Якщо раптом змінюється структура state то зміни потрібно буде внести тільки у селекторі, а не у всьому додатку. Селектори також можуть обчислювати похідні властивості та кешуватися якщо при цьому використовувати бібліотеку reSelect.
