Що таке React? - Як це працює - Як ним користуватися - Використання та переваги

Огляд реагування

React - одна з бібліотек JavaScript з відкритим кодом. Він використовується для побудови інтерактивних інтерфейсів користувача. Це ефективна, декларативна та гнучка бібліотека. Він стосується компонента V, тобто перегляду модельного перегляду-контролера (MVC). Це не цілі рамки, а лише бібліотека прифронтових сторін. Це дозволяє створювати або створювати складні інтерфейси користувача з використанням ізольованих і невеликих фрагментів коду, відомих як компоненти. Основна перевага компонентів полягає в тому, що зміна будь-якого одного компонента не впливає на всю програму.

Це розробив інженер програмного забезпечення Джордан Уолк, працюючи у Facebook. Facebook розгорнув його до своєї стрічки новин і використав його для вдосконалення їх інтерфейсу користувача. Це було оприлюднено у травні 2013 року.

Він спеціально використовується для програм на одній сторінці. Його мета - бути масштабованим, простим і швидким. Це може використовуватися в комбінації з різними рамками JavaScript або бібліотеками, такими як Angular JS.

Особливості React

Давайте розглянемо основні та найвибагливіші особливості React:

1. JSX

JSX означає JavaScript XML. Це розширення до синтаксису мови JS. Він забезпечує спосіб візуалізації компонентів, використовуючи синтаксис, подібний до HTML. React використовує JSX для запису його компонентів. Він також може використовувати чистий JavaScript, але віддає перевагу JSX. Він використовується Babel, попередньою процесором для перетворення тексту, схожого на HTML, знайденого у файлах JavaScript, у стандартні об'єкти JS. HTML-код можна вбудовувати в JavaScript, щоб зробити HTML-код більш зрозумілим і підвищеним, а також підвищить ефективність JavaScript та зробить програму надійною.

2. Модель об'єкта віртуального документа

React робить кеш даних даних пам'яті, а потім обчислює різницю між попереднім DOM і новим, а потім оновлює виконані зміни або мутації. Він оновлює лише зміни, а не всю програму. Це сприяє збільшенню швидкості та продуктивності та зменшенню втрати пам’яті.

3. Заповітність

Реактивні погляди використовуються як функції стану, де стан визначає поведінку компонента. Тому ми можемо внести зміни до стану, а потім передати його перегляду ReactJS, а потім визначити результат та дії, функції та події. Це полегшує тестування та налагодження.

4. ССР

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

5. Одностороння прив'язка даних

Це дозволяє односторонній потік даних, тобто одностороння прив'язка даних. Завдяки цій функції є кращий контроль над додатком. Завдяки цьому стан додатків міститься в конкретних магазинах, тому всі інші компоненти залишаються нещільно зв'язаними. Це підвищує гнучкість та ефективність програми.

6. Простота

Файли JSX роблять додаток простим і зрозумілим. Для кодування можна використовувати стандартний JavaScript, але використання JSX полегшує його. Кілька методів життєвого циклу та його підхід, що базується на компонентах, спрощують навчання та виконання.

7. Крива навчання

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

Як це працює?

Коли команда розробників Facebook будувала додатки на стороні клієнта, вона виявила, що модель об'єкта документа (DOM) повільна. Для того, щоб зробити це швидше, в React реалізується віртуальний DOM, який є деревним представленням DOM в JavaScript.

React працює на Virtual DOM. Він не маніпулює документом у браузері після внесення змін, він вносить зміни у віртуальний DOM. Коли віртуальний DOM повністю оновлений, він оновлює DOM браузера найбільш ефективним способом. Віртуальний DOM React повністю знаходиться в пам'яті. Він представляє DOM веб-браузера, тому коли записано компонент React, робиться дешевий віртуальний компонент, який React перетворюється на DOM. React був використаний для використання в браузері, але з Node.js, він також може бути використаний і з сервером.

Як ми цим користуємося?

Використовувати React дуже просто, як включити JS-файл у HTML. Давайте подивимось на використання React простим прикладом:

Код:
First React Code ReactDOM. render( First Code, document. querySelector ('#application') );

`First React Code ReactDOM. render( First Code, document. querySelector ('#application') );`



First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);

Це здається трохи складним, але його легко реалізувати та навчитися.

Хто використовує реагування?

React стає популярним на сучасному ринку, і його функції допомагають великим компаніям покращити їхній досвід та інтерфейси.

Інтернет-гіганти, такі як Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, браузер Vivaldi, Codecademy та Dropbox, використовують React тим чи іншим способом. Ощадбанк Росії також використав React o для розробки веб-сайту свого банку.

Багато веб-сайтів, таких як github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com та багато інших, також використовують React.

Переваги React

SEO дружні
Створити тестові приклади для інтерфейсу легко.
Реактивні компоненти можна легко використовувати повторно.
Забезпечує швидше надання.
Налагодження легко.
Легкість міграції.
Підвищує продуктивність.
Написати компоненти легко.
Стабільний код.
Має корисний набір інструментів для розробників.
React native доступний для розробки мобільних додатків
Легко вчитися.
Підвищує продуктивність.

Недоліки React

Високі темпи розвитку.
Погана документація.
Додаткові клопоти з SEO.
Тільки орієнтований на перегляд.
Бібліотека великих розмірів React.
Крива навчання для початківців.
Вимагає ручної обробки змін даних.
У деяких випадках потрібно більше коду.

Що таке React? - Як це працює - Як ним користуватися - Використання та переваги

Зміст: