Przegląd reakcji
React jest jedną z bibliotek JavaScript typu open source. Służy do budowania interaktywnych interfejsów użytkownika. Jest to wydajna, deklaratywna i elastyczna biblioteka. Zajmuje się V, tj. Komponentem View Model-View-Controller (MVC). To nie jest cały framework, ale tylko biblioteka frontendowa. Umożliwia tworzenie lub tworzenie złożonych interfejsów użytkownika przy użyciu izolowanych i małych fragmentów kodu zwanych komponentami. Główną zaletą komponentów jest to, że zmiana dokonana w jednym elemencie nie wpływa na całą aplikację.
Zostało to opracowane przez inżyniera oprogramowania, Jordana Walke'a pracującego na Facebooku. Facebook umieścił go w swoim kanale wiadomości i wykorzystał do ulepszenia interfejsu użytkownika. Został opublikowany w maju 2013 r.
Jest on szczególnie wykorzystywany w aplikacjach jednostronicowych. Ma on być skalowalny, prosty i szybki. Można tego użyć w połączeniu z różnymi strukturami JavaScript lub bibliotekami, takimi jak Angular JS.
Funkcje React
Przyjrzyjmy się podstawowym i najbardziej wymagającym funkcjom React:
1. JSX
JSX oznacza JavaScript XML. Jest to rozszerzenie składni języka JS. Zapewnia sposób renderowania komponentów przy użyciu składni podobnej do HTML. React używa JSX do pisania swoich komponentów. Może również używać czystego JavaScript, ale preferuje JSX. Jest używany przez Babel, preprocesor do konwersji tekstu podobnego do HTML znajdującego się w plikach JavaScript na standardowe obiekty JS. Kod HTML można osadzić w JavaScript, aby uczynić kod HTML bardziej zrozumiałym, a także poprawić wydajność JavaScript i uczynić aplikację solidną.
2. Model obiektu dokumentu wirtualnego
React utwórz pamięć podręczną struktury danych w pamięci, następnie oblicza różnicę między poprzednim DOM a nowym, a następnie aktualizuje wprowadzone zmiany lub mutacje. Aktualizuje tylko zmiany, a nie całą aplikację. Pomaga to zwiększyć szybkość i wydajność oraz zmniejsza straty pamięci.
3. Testowalność
Widoki React są używane jako funkcje stanu, w którym stan determinuje zachowanie komponentu. Dlatego możemy wprowadzić zmiany w stanie, a następnie przekazać go do widoku ReactJS, a następnie określić dane wyjściowe oraz działania, funkcje i zdarzenia. Ułatwia to testowanie i debugowanie.
4. SSR
Oznacza renderowanie po stronie serwera. Pozwala wstępnie renderować stan początkowy komponentów po stronie serwera. Przeglądarka może renderować bez czekania na wykonanie lub załadowanie całego JavaScript. Dzięki temu strony internetowe ładują się szybciej. Pomaga użytkownikowi przeglądać strony internetowe, nawet jeśli React nadal pobiera JavaScript, łączy zdarzenia lub tworzy wirtualny DOM na backendie.
5. Powiązanie danych w jedną stronę
Umożliwia jednokierunkowy przepływ danych, tj. Jednokierunkowe wiązanie danych. Dzięki tej funkcji jest lepsza kontrola nad aplikacją. Sprawia, że stan aplikacji jest zawarty w określonych sklepach, dlatego wszystkie pozostałe komponenty pozostają luźno powiązane. Zwiększa to elastyczność i wydajność aplikacji.
6. Prostota
Pliki JSX sprawiają, że aplikacja jest prosta i zrozumiała. Do kodowania można użyć standardowego JavaScript, ale użycie JSX ułatwia. Kilka metod cyklu życia i podejście oparte na komponentach ułatwiają naukę i wykonywanie.
7. Krzywa uczenia się
W porównaniu do innych ram, krzywa uczenia się React jest niska. Początkujący posiadający podstawowy język programowania mogą również nauczyć się łatwo reagować.
Jak to działa?
Gdy zespół programistów Facebooka budował aplikacje po stronie klienta, stwierdził, że model Object Object Model (DOM) działa wolno. Aby przyspieszyć, w React zaimplementowano wirtualny DOM, który jest drzewną reprezentacją DOM w JavaScript.
React działa na wirtualnym DOM. Po wprowadzeniu zmian nie manipuluje dokumentem w przeglądarce, wprowadza zmiany w wirtualnym DOM. Gdy wirtualny DOM jest całkowicie zaktualizowany, aktualizuje DOM przeglądarki w najbardziej efektywny sposób. Wirtualny DOM React znajduje się całkowicie w pamięci. Reprezentuje DOM przeglądarki internetowej, więc po napisaniu komponentu React powstaje komponent wirtualny, którego tworzenie jest tanie, a React zamienia go w DOM. React został stworzony do użycia w przeglądarce, ale w Node.js można go również używać z serwerem.
Jak tego używamy?
Korzystanie z React jest proste, ponieważ zawiera plik JS w HTML. Zobaczmy użycie React na prostym przykładzie:
Kod:
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')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
Wydaje się to trochę trudne, ale jest łatwe do wdrożenia i nauki.
Kto używa React?
React staje się popularny na dzisiejszym rynku, a jego funkcje pomagają dużym firmom w poprawianiu ich doświadczenia i interfejsów.
Internetowi giganci, tacy jak Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, Vivaldi Browser, Codecademy i Dropbox używają React w taki czy inny sposób. Sbierbank Rosji również wykorzystał React do opracowania strony internetowej swojego banku.
Wiele witryn, takich jak github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com i wiele innych, również korzysta z React.
Zalety React
- Przyjazny dla SEO
- Łatwo jest tworzyć przypadki testowe dla interfejsu użytkownika.
- Komponenty React można łatwo ponownie wykorzystać.
- Zapewnia szybsze renderowanie.
- Debugowanie jest łatwe.
- Łatwość migracji.
- Zwiększa produktywność.
- Pisanie komponentów jest łatwe.
- Stabilny kod.
- Ma pomocny zestaw narzędzi dla programistów.
- React native jest dostępny do tworzenia aplikacji mobilnych
- Łatwe do nauki.
- Zwiększa wydajność.
Wady React
- Wysokie tempo rozwoju.
- Słaba dokumentacja.
- Dodatkowy problem z SEO.
- Tylko zorientowane na widok.
- Duża biblioteka React.
- Krzywa uczenia się dla początkujących.
- Wymaga ręcznego przetwarzania zmian danych.
- W niektórych przypadkach potrzebujesz więcej kodu.
Polecany artykuł
To był przewodnik po tym, co jest React. Omówiliśmy tutaj pojęcia, definicję i zrozumienie z zaletami i wadami React. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Co to jest programowanie zwinne?
- Co to jest wielowątkowość w Javie?
- Zastosowania Raspberry Pi
- Co to jest JMS? | Definicja | Wyjaśnienie
- React Native vs React
- Tworzenie przycisków stylów w React Native