|
React
React (старі назви: React.js, ReactJS) — відкрита JavaScript бібліотека для створення інтерфейсів користувача, яка покликана вирішувати проблеми часткового оновлення вмісту вебсторінки, з якими стикаються в розробці односторінкових застосунків. Розробляється Meta (раніше Facebook) і спільнотою індивідуальних розробників.[2][3][4] React дозволяє розробникам створювати великі вебзастосунки, які використовують дані, котрі змінюються з часом, без перезавантаження сторінки. Його мета полягає в тому, щоб бути швидким, простим, масштабованим. React обробляє тільки користувацький інтерфейс у застосунках. Це відповідає видові у шаблоні модель-вид-контролер (MVC), і може бути використане у поєднанні з іншими JavaScript бібліотеками або в великих фреймворках MVC, таких як AngularJS[5]. Він також може бути використаний з React на основі надбудов, щоб піклуватися про частини без користувацького інтерфейсу побудови вебзастосунків. Як бібліотеку інтерфейсу користувача React найчастіше використовують разом з іншими бібліотеками, такими як Redux. В даний час React використовують Khan Academy,[6] Netflix,[7] Yahoo,[8] Airbnb,[9] Sony,[10] Atlassian[11] та інші. ІсторіяБібліотеку створено Джорданом Волком (Jordan Walke), програмістом з Facebook. Автор працював над проектом під впливом XHP, фреймворку HTML для PHP.[12] 2011-го року реліз з'явився у новинах Facebook, за рік — у блозі Instagram.[13] Також фреймворк був представлений як проект з відкритим початковим кодом на конференції розробників JSConf US, що проходила у Сполучених Штатах у травні 2013 року. На конференції React.js Conf, влаштовану Фейсбуком у березні 2015-го, проект було представлено як відкрите програмне забезпечення. ОсобливостіОдностороння передача данихВластивості передаються в рендерер компоненту, як властивості html тегу. Компонент не може напряму змінювати властивості, що йому передані, але може їх змінювати через callback функції. Такий механізм називають «властивості донизу, події нагору». Віртуальний DOMReact підтримує віртуальний DOM, а не покладається виключно на DOM браузера. Це дозволяє бібліотеці визначити, які частини DOM змінилися, порівняно (diff) зі збереженою версією віртуального DOM, і таким чином визначити, як найефективніше оновити DOM браузера.[14][15] Таким чином програміст працює зі сторінкою, вважаючи що вона оновлюється вся, але бібліотека самостійно вирішує які компоненти сторінки треба оновити. JSXКомпоненти React зазвичай написані на JSX.[16] Код написаний на JSX компілюється у виклики методів бібліотеки React. Розробники можуть так само писати на чистому JavaScript. JSX нагадує іншу мову, яку створили у компанії Фейсбук для розширення PHP, XHP. Не лише рендеринг HTML в браузеріReact використовують не лише для рендерингу HTML в браузері. Наприклад, Facebook має динамічні графіки які рендеряться в теги <canvas>,[17] Netflix та PayPal використовують ізоморфне завантаження для рендерингу ідентичного HTML на сервері та клієнті.[18][19] Методи життєвого циклуМетоди життєвого циклу — це різні методи, які вбудовуються за допомогою ReactJS. Вони дозволяють розробнику обробляти дані в різних точках життєвого циклу програми React. Наприклад:
Вкладені елементиКілька елементів на одному рівні повинні бути загорнутими в один елемент контейнера, наприклад елемент <div>, або повернутий як масив. АтрибутиJSX надає ряд атрибутів елементів, призначених для відображення тих, що надаються у форматі HTML. Користувацькі атрибути також можуть бути передані компоненту. Всі атрибути будуть отримані компонентом як реквізит. Вирази JavaScriptВирази JavaScript можна використовувати в JSX з фігурними дужками {}: <h1> {10 + 1} </ h1>
Приклад, наведений вище, відображатиметься так: <h1>11</h1>
Умовні виразиВираз If–else не можуть бути використані всередині JSX, але замість них можуть використовуватися умовні вирази. У прикладі нижче буде показано { i === 1 ? 'true' : 'false' }
як рядок 'true', оскільки i дорівнює 1. class App extends React.Component {
render() {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
}
Функції та JSX можна використовувати в умовних виразах: class App extends React.Component {
render() {
const sections = [1, 2, 3];
return (
<div>
{
sections.length > 0
? sections.map(n => <div>Section {n}</div>)
: null
}
</div>
);
}
}
Код, написаний у JSX, потребує перетворення за допомогою такого інструменту, як Babel, для того, щоб його могли зрозуміти веббраузери. Ця обробка, як правило, виконується під час процесу збірки, перш ніж програма буде запущена. React NativeReact Native представлений компанією Facebook у 2015 році, що застосовує React архітектуру до нативних IOS, Android та UWP додатків. ІсторіяУ 2012 році Марк Цукерберг зазначив: «Найбільша помилка, яку ми зробили як компанія — це надто велика ставка на HTML5, на відміну від нативних додатків». Він пообіцяв, що Facebook незабаром запропонує краще рішення для мобільних платформ. В Facebook Джордан Уоллк знайшов спосіб генерувати елементи інтерфейсу iOS з фонового Javascript потоку. Вони вирішили організувати внутрішній хакатон для вдосконалення цього прототипу, щоб вміти будувати нативні додатки за допомогою цієї технології. Після кількох місяців розробки Facebook випустила першу версію для React.js Conf 2015. Під час технічного обговорення Крістофер Чедо пояснив, що Facebook вже використовував React Native для їхніх Group App та Ads Manager App. 18 квітня 2017 року Facebook представив React Fiber — новий основний алгоритм бібліотеки React для створення користувацьких інтерфейсів. React Fiber стане основою для будь-яких подальших вдосконалень та розвитку функцій системи React. Принципи роботиПринципи роботи React Native в основному такі ж, як ReactJS, за винятком того, що він не маніпулює DOM через VirtualDom. Він працює у фоновому процесі (який інтерпретує Javascript код написаний розробниками) безпосередньо на кінцевому пристрої і спілкується з нативною платформою. Очевидно, що Facebook виправив помилку, про яку Марк Цукерберг згадував 2012 року. React Native взагалі не покладається на HTML, все написано на Javascript і залежить від нативних SDK. Основне використанняНижче наведено початковий приклад реалізації використання React в HTML з JSX та JavaScript. <div id="myReactApp"></div>
<script type="text/babel">
class Greeter extends React.Component {
render() {
return <h1>{this.props.greeting}</h1>
}
}
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>
Клас Greeter — компонент React, який приймає властивість привітання. Метод ReactDOM.render створює екземпляр компонента Greeter, встановлює властивість привітання для «Hello World» та вставляє виражений компонент у вигляді дочірнього елемента до елементу DOM з id = myReactApp. Якщо відобразити в веббраузері, то результат буде: <div id="myReactApp">
<h1>Hello World!</h1>
</div>
Загальні ідіомиReact не намагається надати повну «схему додатків». Він безпосередньо спрямований на побудову користувацьких інтерфейсів, і тому не включає в себе безліч інструментів, які деякі розробники вважають необхідними для створення програми. Це дозволяє вибрати будь-які бібліотеки, які розробник вважає за краще виконувати, щоб виконати певних завдань, таких як здійснення доступу до мережі або локальне зберігання даних. Використання архітектури FluxДля підтримки концепції React щодо одностороннього потоку даних, архітектура Flux являє собою альтернативу популярній архітектурі Model-view-controller. Flux — це дії, які надсилаються через центральний диспетчер до сховища, а зміни з сховища надсилають назад до перегляду. У використанні разом з React, це поширення здійснюється через компоненти властивостей. Компонент React під архітектурою Flux не повинен безпосередньо змінювати будь-які реквізити, передані йому, але повинен передати функції зворотного виклику, що створюють дії, які відправляє диспетчер для модифікації сховища. Сховище (яке можна розглядати як модель) може змінюватися у відповідь на дії, отримані від диспетчера. Цей шаблон іноді виражається як «properties flow down, actions flow up». Багато реалізацій Flux створено з моменту його створення, мабуть, найбільш відомим є Redux, який має одне сховище, яке часто називають single source of truth (це практика структурування інформаційних моделей та пов'язаних схем даних, так що кожен елемент даних зберігається рівно один раз). ЛіцензуванняПочатковий публічний реліз React відбувся в травні 2013 року використовував стандартний Apache License 2.0. У жовтні 2014 року React 0.12.0 замінив його ліцензією BSD на 3 пункти та додав окремий текстовий файл PATENTS, який дозволяє використовувати будь-які патенти Facebook, пов'язані з програмним забезпеченням:
Ця нестандартна пропозиція викликала певні суперечки та дебати в спільноті користувачів React, оскільки вона може бути інтерпретована таким чином, щоб надавати можливість Facebook відкликати ліцензію у багатьох сценаріях, наприклад, якщо Facebook засуджує ліцензіата, змушуючи їх приймати «інші дії», публікуючи дію в блозі або в іншому місці. Багато хто висловив занепокоєння тим, що Facebook може несправедливо користуватися пропозицією про припинення дії, або те, що інтеграція React у продукт може ускладнити майбутнє придбання початкової компанії. Ґрунтуючись на відгуках громадськості, Facebook оновив патентний грант в квітні 2015 року, щоб бути менш двозначним та більш дозвільним:
Фонд Apache Software вважає цю ліцензійну угоду несумісною з її ліцензійною політикою, оскільки вона «передається ризику для споживачів нашого програмного продукту, що не відповідає на користь ліцензіара, а не ліцензіату, тим самим порушуючи нашу юридичну політику Apache як універсального донора», і «не є підмножиною тих, що містяться в [Apache License 2.0], і їх не можна вважати підліцензіями як [Apache License 2.0]». У серпні 2017 року Facebook відмовився від перегляду своїх ліцензій на послуги Apache Foundation та відмовився переглянути свою ліцензію, і наступного місяця WordPress вирішив переключити проекти Gutenberg та Calypso на «React». Зміна ліцензії23 вересня 2017 року Facebook оголосив, що наступного тижня вони будуть перепризначати ліцензії Flow, Jest, React і Immutable.js за стандартною ліцензією MIT; компанія заявила, що React був «основою широкої екосистеми програмного забезпечення з відкритим вихідним кодом для Інтернету», і що вони не хотіли «припиняти прогрес за нетехнічними міркуваннями». 26 вересня 2017 року було випущено React 16.0.0 з ліцензією MIT. Зміна ліцензії MIT також була перенаправлена до лінії випуску 15.x за допомогою React 15.6.2. Посилання
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
