Словник термінів React

Односторінковий додаток

Односторінковий додаток — це додаток, що складається з єдиної HTML-сторінки і всіх ресурсів (таких як JavaScript та CSS), які необхідні додатку для запуску. Будь-яка взаємодія з головною сторінкою та сторінками, що зв’язані з нею, не потребує контакту із сервером, а це означає, що сторінка не перезавантажується.

Хоч React і дозволяє вам створювати односторінкові додатки, ви зовсім не зобов’язані робити це. React також може використовуватись для вдосконалення маленьких частин існуючих веб-сайтів для надання їм додаткової інтерактивності. Код написаний на React може мирно співіснувати з розміткою, що рендериться на сервері з допомогою, наприклад, PHP чи інших бібліотек для клієнтської сторони. По суті, саме так React і використовується у Facebook.

ES6, ES2015, ES2016, etc

Всі ці скорочення посилаються на останні версії стандарту специфікації мови ECMAScript, реалізацією котрого є мова JavaScript. Версія ES6 (також відома як ES2015) доповнює попередні версії такими речами як: стрілкові функції, класи, шаблонні функції, вирази let і const. Більш детально про конкретні версії ви можете дізнатись тут.

Компілятор

Компілятор JavaScript приймає на вхід код JavaScript, перетворює його і повертає в іншому форматі. Найбільш поширений випадок використання — це перетворення синтаксису ES6 у синтаксис, який підтримується старими версіями браузерів. При роботі з React найчастіше використовується компілятор Babel.

Бандлери

Бандлери беруть JavaScript- і CSS- код написаний у вигляді модулів (часто таких модулів — сотні) і об’єднують їх разом у кілька файлів, які краще оптимізовані для браузерів. У React додатках найчастіше використовуються бандлери Webpack і Browserify.

Менеджери пакунків

Менеджер пакунків — це інструмент, що дозволяє керувати залежностями у вашому проекті. npm та Yarn — це менеджери пакунків, котрі найчастіше використовуються в React-додатках. Обидва є клієнтами того ж самого реєстру пакунків — npm.

CDN

CDN або “мережа доправлення контенту” (Content Delivery Network) — це мережева інфраструктура, що доправляє кешований статичний контент через мережу серверів по всьому світу.

JSX

JSX — це розширення синтаксису JavaScript. Він подібний до мови шаблонів, але наділений всіма можливостями JavaScript. JSX компілюється у виклики React.createElement(), котрі повертають прості об’єкти JavaScript, що називаються “React-елементи”. Перегляньте відповідний розділ для ознайомлення з JSX чи знайдіть більш детальну інформацію тут.

React DOM використовує стиль camelCase для найменування властивостей замість звичайних імен HTML-атрибутів. Наприклад, tabindex в JSX перетворюється в tabIndex. Атрибут class записується як className, оскільки в JavaScript слово class є зарезервованим:

<h1 className="hello">Мене звати Василина!</h1>

Елементи

React-елементи — це будівельні блоки React-додатків. Їх легко сплутати з більш загальновідомою концепцією “компонентів”. Елемент описує те, що ви хочете бачити на екрані. React-елементи є незмінними.

const element = <h1>Привіт, світе</h1>;

Зазвичай елементи не використовуються напряму, а повертаються з компонентів.

Компоненти

React-компоненти — це маленькі, придатні для повторного використання частини коду, що повертають React-елемент для його відображення на сторінці. Найпростіший React-компонент — це звичайна функція JavaScript, що повертає React-елемент:

function Welcome(props) {
  return <h1>Привіт, {props.name}</h1>;
}

Також, компоненти можуть бути класами ES6:

class Welcome extends React.Component {
  render() {
    return <h1>Привіт, {this.props.name}</h1>;
  }
}

Компоненти можна розбити на окремі частини залежно від їх функціональності і використовувати всередині інших компонентів. Компоненти можуть повертати інші компоненти, масиви, рядки і числа. Якщо якась частина вашого інтерфейсу використовується у кількох місцях (Button, Panel, Avatar) чи надто складна сама по собі, завжди є сенс винести її в незалежний компонент. Імена компонентів завжди мають починатися з великої літери (<Wrapper/>, а не <wrapper/>). Перегляньте відповідний розділ для більш детальної інформації про рендеринг компонентів.

`props`

props (пропси) — це вхідні дані React-компонента. Вони є даними, що передаються від батьківського компонента до дочірнього.

Запам’ятайте, що props призначені лише для читання. Не варто намагатися змінювати їх:

// Неправильно!
props.number = 42;

Якщо вам потрібно змінити якесь значення у відповідь на ввід користувача чи відповідь сервера, використовуйте state (стан).

`props.children`

props.children доступні у будь-якому компоненті. У них записаний вміст між відкриваючим та закриваючим тегами компонента. Наприклад:

<Welcome>Привіт, світе!</Welcome>

Рядок Привіт, світе! доступний у props.children у компоненті Welcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Для класових компонентів використовуйте this.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

`state`

Компонент потребує state, коли якісь дані в ньому змінюються з часом. Наприклад, компоненту Checkbox може знадобитися isChecked у його стані, а компонент NewsFeed має відслідковувати fetchedPosts у своєму стані.

Найбільша різниця між state і props полягає в тому, що props передаються з батьківського компонента, а state керується самим компонентом. Компонент не може змінювати власні props, але може змінювати state.

Кожна окрема частина змінних даних має бути під керуванням єдиного компоненту, що має її в своєму стані. Не намагайтесь синхронізувати стани між двома різними компонентами. Замість цього підійміть його до найближчого батьківського компонента і передайте його через пропси до кожного дочірнього компоненту.

Методи життєвого циклу

Методи життєвого циклу — це визначена користувачем функціональність, що виконується протягом різних етапів життя компонента. Є методи, котрі доступні коли компонент створюється і вставляється в DOM (монтування), коли компонент оновлюється і коли компонент відмонтовується і видаляється з DOM.

Контрольовані та неконтрольовані компоненти

React має два різних підходи для керування формами.

Елемент форми input, чиє значення контролюється React, називається контрольованим компонентом. Коли користувач вводить дані у контрольований компонент, викликається обробник події зміни і ваш код вирішує чи є ввід допустимим (input повторно рендериться з оновленим значенням). Якщо ви не рендерите елемент форми повторно, то він лишиться без змін.

Неконтрольований компонент працює як звичайний елемент форми поза межами React. Коли користувач вводить дані в поле форми (поле вводу, випадаючий список і т. д.), оновлена інформація відображається без участі React. Однак це також означає, що ви не можете присвоїти полю певні значення.

У більшості випадків використовуйте контрольовані компоненти.

Ключі

“Ключ” — це спеціальний рядковий атрибут, який ви маєте додавати при створенні масивів елементів. Ключі допомагають React визначати які елементи змінились, були додані чи видалені. Ключі мають бути надані елементам всередині масиву для того, щоб вони мали стійку сутність.

Ключі мають бути унікальними у сусідніх елементах одного і того ж масиву. Вони не мають бути унікальними по всьому додатку чи навіть у спільному компоненті.

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

Рефи

React підтримує спецільний атрибут, який ви можете прикріпити до будь-якого компонента. Атрибуть ref може бути об’єктом створеним функцією React.createRef() або функцією зворотнього виклику, або рядком (у застарілому API). Коли атрибут ref є функцією зворотнього виклику, функція отримує у якості аргумента DOM-елемент, що лежить в основі компонента, або екземпляр класу (залежно від типу елемента). Це дозволяє вам мати прямий доступ до елемента DOM чи до екземпляру компонента.

Використовуйте рефи у виключних випадках. Якщо ви помічаєте за собою часте використання рефів у вашому додатку, ознайомтесь з низхідним потоком даних.

Події

Обробка подій у React-елементах має деякі синтаксичні особливості:

У React обробники подій іменуються в стилі camelCase, замість нижнього регістру.
З JSX ви передаєте функцію, а не рядок, як обробник події.

Узгодження

Коли пропси чи стан компонента змінюються, React порівнює тільки що повернутий і попередній відрендерений елемент та вирішує, чи потрібно оновлювати DOM. Якщо вони не рівні, то React здійснює оновлення DOM. Цей процес і називається “узгодження”.

Is this page useful?Редагувати цю сторінку