TechCodeview

DOM rzeczywisty/przeglądowy:

DOM oznacza „Model obiektowy dokumentu”. Jest to uporządkowana reprezentacja kodu HTML na stronie internetowej lub w aplikacji. Reprezentuje cały interfejs użytkownika (Interfejs użytkownika) z aplikacja internetowa jako drzewiasta struktura danych.

To jest strukturalna reprezentacja elementów HTML aplikacji internetowej w prostych słowach.

Ilekroć nastąpi jakakolwiek zmiana w stan interfejsu aplikacji, DOM jest aktualizowany i reprezentuje zmianę. DOM jest renderowany i manipulowany przy każdej zmianie związanej z aktualizacją interfejsu użytkownika aplikacji, co wpływa na wydajność i spowalnia ją.

Dlatego przy wielu komponentach interfejsu użytkownika i złożonej strukturze DOM, Aktualizacja będzie droższa, ponieważ przy każdej zmianie będzie wymagać ponownego renderowania.

DOM ma postać drzewiastej struktury danych. Składa się z węzła dla każdego Element interfejsu użytkownika obecny w dokumencie internetowym.

tablica sortująca w Javie

Aktualizacja DOM:

Jeśli wiemy trochę o JavaScript, możesz zobaczyć osoby używające „getElementById()” Lub „getElementByClass()” metoda modyfikowania zawartości DOM.

Za każdym razem, gdy nastąpi jakakolwiek zmiana w stanie aplikacji, DOM jest aktualizowany, aby odzwierciedlić zmianę w interfejsie użytkownika.

Jak wirtualny DOM przyspiesza działanie:

Po dodaniu nowych rzeczy do aplikacji tworzony jest wirtualny DOM, reprezentowany w postaci drzewa. Każdy element aplikacji jest węzłem w drzewie.

Dlatego za każdym razem, gdy następuje zmiana położenia elementu, tworzony jest nowy wirtualny DOM. Nowsze wirtualne drzewo DOM porównuje się z najnowszym, gdzie odnotowuje się zmiany.

Znajduje możliwy sposób wprowadzenia tych zmian poprzez rzeczywisty DOM. Następnie zaktualizowane elementy zostaną ponownie wyrenderowane na stronie.

Jak wirtualny DOM pomaga w reagowaniu:

Wszystko w React jest postrzegane jako komponent, komponent funkcjonalny i komponent klasowy. Komponent ma stan. Ilekroć zmieniamy coś w pliku JSX, mówiąc prościej, ilekroć zmienia się stan komponentu, reakcja aktualizuje swoje wirtualne drzewo DOM.

React za każdym razem utrzymuje dwa wirtualne DOM. Pierwsza zawiera zaktualizowany wirtualny DOM, a druga to wstępnie zaktualizowana wersja zaktualizowanego wirtualnego DOM. Porównuje wstępnie zaktualizowaną wersję zaktualizowanego wirtualnego DOM i znajduje, co zostało zmienione w DOM, na przykład, które komponenty zostaną zmienione.

Chociaż może się to wydawać nieefektywne, koszty nie są już większe, ponieważ aktualizacja wirtualnego DOM nie może zająć dużo czasu.

Porównując bieżące wirtualne drzewo DOM z poprzednim, nazywa się to „sprzeczanie się”. Kiedy React wie, co się zmieniło, aktualizuje obiekty w rzeczywistym DOM. React używa aktualizacji wsadowych do aktualizacji rzeczywistego modelu DOM. Zmiany w rzeczywistym DOM są wysyłane partiami, zamiast wysyłać aktualizacje dotyczące pojedynczej zmiany stanu komponentu.

Ponowne renderowanie interfejsu użytkownika jest najdroższą częścią, a React radzi sobie z tym najskuteczniej, zapewniając prawdziwy DOM, który otrzymuje aktualizacje wsadowe w celu ponownego wyrenderowania interfejsu użytkownika. Nazywa się proces konwersji zmian do rzeczywistego modelu DOM pojednanie.

Poprawia wydajność i jest głównym powodem, dla którego programiści uwielbiają reagować i jego wirtualny DOM.

Co to jest wirtualny DOM Reacta?

Koncepcja wirtualnego DOM ma na celu lepsze i szybsze działanie Real DOM. Wirtualny DOM jest wirtualnym symbolem DOM.

Ale główna różnica polega na tym, że za każdym razem i przy każdej zmianie aktualizowany jest wirtualny DOM, a nie rzeczywisty DOM.

Na przykład prawdziwy I wirtualny DOM jest reprezentowany jako a struktura drzewa. Każdy element drzewa jest węzłem. A węzeł jest dodawany do drzewa po dodaniu nowego elementu do interfejsu użytkownika aplikacji.

Jeżeli położenie któregokolwiek elementu ulegnie zmianie, a nowy tworzone jest wirtualne drzewo DOM. Wirtualny DOM oblicza minimalną liczbę operacji na prawdziwym DOM, aby wprowadzić zmiany w prawdziwym DOM. Jest wydajny i działa lepiej, zmniejszając koszty i działanie ponownego renderowania całego prawdziwego DOM.

Teraz mamy normalne zrozumienie prawdziwego i wirtualnego DOM.

Spójrzmy jak Reagować działa za pomocą Wirtualny DOM.

• Każdy interfejs użytkownika jest indywidualny część, i każdy komponent ma swój stan.
• Reakcja następuje obserwowalne wzorce i obserwuje zmiany stanów.
• Za każdym razem, gdy zostanie dokonana jakakolwiek zmiana stanu komponentu, React aktualizuje wirtualne drzewo DOM ale nie zmienia rzeczywiste drzewo DOM.
• Reagować porównuje the obecna wersja z wirtualny DOM z Poprzednia wersja Po aktualizacja.
• React wie, które obiekty zostały zmienione w pliku wirtualny DOM. Zastępuje obiekty w rzeczywisty DOM , prowadzący do minimalna manipulacja operacje.
• Proces ten jest znany jako 'różnicowanie'. To zdjęcie wyjaśni koncepcję.

Na obrazku, ciemny niebieski koła są węzły które zostały zmienione. The państwo tych elementów uległo zmianie. React oblicza różnicę pomiędzy poprzednią i obecną wersją pliku wirtualne drzewo DOM, a całe nadrzędne drzewo podrzędne jest ponownie renderowane, aby pokazać zmieniony interfejs użytkownika.

Zaktualizowane drzewo to partia zaktualizowana (że aktualizacje prawdziwego DOM są wysyłane partiami zamiast wysyłać aktualizacje przy każdej zmianie stanu.) do prawdziwego DOM.

Aby głębiej się w to zagłębić, musimy wiedzieć o Reaguj na renderowanie () funkcjonować.

Musimy zatem dowiedzieć się o kilku ważnych kwestiach cechy z Reagowania.

JSX

JSX oznacza XML JavaScriptu. To jest rozszerzenie składni z JS. Używając JSX, możemy pisać Struktury HTML w pliku, który zawiera Kod JavaScript.

składniki

Komponenty są niezależny I wielokrotnego użytku kodu. Każdy interfejs użytkownika w aplikacji React jest komponentem. Jedna aplikacja ma ich wiele składniki.

Komponenty są dwojakiego rodzaju, komponenty klasowe I elementy funkcjonalne.

Komponenty klas są stanowe, ponieważ używają swojego „stanu” do zmiany interfejsu użytkownika. Komponenty funkcjonalne są komponentami bezstanowymi. Działają jak funkcja JavaScript, która pobiera dowolny parametr zwany „props”.

Reaguj na haki zostały wprowadzone stany dostępu z komponentami funkcjonalnymi.

instrukcja Java if

Metody cyklu życia

Metody cyklu życia są ważnymi metodami wbudowany reagować, które działają na komponentach przez cały czas ich przebywania w DOM. Każdy komponent Reacta przeszedł cykl życia wydarzeń.

Metoda render() jest maksymalną używaną metodą metoda cyklu życia .

Jest to jedyna metoda wewnątrz Komponenty klasy Reaguj . Zatem w każdej klasie wywoływana jest funkcja render().

Metoda render(). obsługuje renderowanie komponentu przez interfejs użytkownika. Render () zawiera całą logikę wyświetlaną na ekranie. Może mieć również zero wartość, jeśli nie chcemy niczego pokazywać na wyświetlaczu.

Przykład pokazano poniżej:

 class Header extends React.Component{ render(){ return React Introduction } } 

Przykład pokaże JSX zapisane w render().

Kiedy państwo Lub rekwizyt jest aktualizowany w komponencie, renderowanie() zwróci inne drzewo elementów React.

Podczas pisania kodu w konsoli lub pliku JavaScript nastąpią następujące zdarzenia:

• Przeglądarka analizuje kod HTML, aby znaleźć węzeł o identyfikatorze.
• Usuwa element podrzędny elementu.
• Aktualizuje element (DOM) z „zaktualizowana wartość”.
• To przelicza CSS dla węzłów nadrzędnych i podrzędnych.
• Następnie zaktualizuj układ.

Na koniec przejdź przez drzewo widoczne na ekranie.

Jak wiemy, aktualizacja DOM wiąże się ze zmianą treści. Jest do niego bardziej przywiązany.

Złożone algorytmy biorą udział w ponownym obliczaniu CSS i zmianie układów, co wpływa na wydajność.

Dlatego React może sobie z tym poradzić na wiele sposobów, ponieważ używa czegoś, co nazywa się wirtualnym DOM.

Dom reakcji

Pakiet React-dom zapewnia metody specyficzne dla DOM na najwyższym poziomie aplikacji, aby w razie potrzeby wyjść z modelu React.

 import * as ReactDOM from 'react-dom'; 

Jeśli używasz ES5 z npm, powinieneś także napisać:

 var ReactDOM = require('react-dom'); 

The reakcja-dom pakiet udostępnia również moduły specyficzne dla aplikacji klienckich i serwerowych:

• reagują-dom/klient
• reagują-dom/serwer

Pakiet React-dom eksportuje te metody:

• utwórzPortal()
• spłukiwanieSync()

Eksportowane są również metody React-dom:

• renderowanie ()
• nawilżać ()
• znajdźDOMNode()
• odmontujKomponentAtNode ()

Uwaga: Zarówno hydrat, jak i render zostały zastąpione nowszymi metodami klienta.

Obsługa przeglądarki

React obsługuje wszystkie nowoczesne przeglądarki, a w starszych wersjach wymagane są pewne wypełnienia.

Uwaga: nie możemy obsługiwać starszych przeglądarek, które nie obsługują metod ES5, takich jak Internet Explorer. Możesz przekonać się, że aplikacje działają w najnowszych przeglądarkach, jeśli na stronie znajdują się takie elementy jak es5-shim i es5-sham, ale jeśli wybierzesz właściwą ścieżkę, będziesz zdany na siebie.

Odniesienie

utwórzPortal()

Tworzy Portal () Portal umożliwia wczytywanie dzieci do węzła DOM, który istnieje poza rankingiem komponentu DOM.

spłukiwanieSync()

Aktualizacje Force React jednocześnie w dostarczonym wywołaniu zwrotnym. Zapewnia natychmiastową aktualizację DOM.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Notatka:

• Używaj oszczędnie. Flush Sync znacząco pogarsza wydajność.
• FlushSync wymusi pokazanie stanu rezerwowego oczekujących granic.
• Uruchamia oczekujące efekty i jednocześnie stosuje aktualizacje przed ich zwróceniem.
• FlushSync opróżnia aktualizacje poza wywołaniem zwrotnym, aby opróżnić aktualizacje wywołania zwrotnego. Na przykład, jeśli po kliknięciu są jakieś oczekujące aktualizacje, React może je opróżnić przed opróżnieniem aktualizacji podczas wywołania zwrotnego.

Odniesienie do starszej wersji

renderowanie()

 render(element, container[, callback]) 

Uwaga: Renderowanie zostaje zastąpione utworzeniem roota w React. Wyrenderuj element React do DOM w dostarczonym kontenerze i zwróć referencję do komponentu.

Jeśli element React został wcześniej wyrenderowany do dowolnego kontenera, przeprowadziłby na nim aktualizację i konieczne jest odzwierciedlenie najnowszego elementu React.

Jest wykonywany podczas renderowania komponentu, jeśli zapewnione jest opcjonalne wywołanie zwrotne.

Notatka:

Metoda Render() kontroluje zawartość węzła kontenera podczas jego mijania. Każdy istniejący element DOM zostaje zastąpiony.

Render() nie zmienia węzła kontenera (może jedynie modyfikować elementy podrzędne kontenera). Możliwe może być wstawienie komponentu do istniejącego węzła DOM bez nadpisywania elementów potomnych.

Render() obecnie odsyła do głównej instancji ReactComponent.

Jednak zwracana przez niego wartość jest dziedziczona i można jej uniknąć, ponieważ w niektórych przypadkach przyszłe wersje Reacta mogą generować komponenty asynchronicznie.

Jeśli potrzebujesz odniesienia do prototypu ReactComponent, najlepszym rozwiązaniem jest dołączenie odwołania do elementu.

Render () służy do nawadniania renderowanego kontenera na serwerze jest przestarzały. Używać uwodnićKorzeń() zamiast tego.

hydrat()

hydrat zostaje zastąpiony hydratem Korzenia.

Działa dokładnie tak samo jak render(), ale jest używana w przypadku kontenera, którego zawartość HTML jest renderowana przez ReactDOMServer. React spróbuje połączyć detektory zdarzeń z bieżącym znacznikiem.

 hydrate(element, container[, callback]) 

Notatka:

React oczekuje, że renderowana treść będzie identyczna pomiędzy serwerem i klientem. Treść tekstu możemy poprawić, ale niespójności musimy potraktować jako błędy i je skorygować. W trybie deweloperskim React ostrzega o niespójności podczas nawodnienia.

Nie ma pewności, że określone różnice zostaną skorygowane pod kątem rozbieżności.

Jest to ważne ze względu na wydajność w większości aplikacji, a sprawdzanie poprawności wszystkich flag będzie zbyt kosztowne.

Załóżmy, że atrybut elementu lub treść tekstowa nieuchronnie różnią się między serwerem a klientem (na przykład znacznik czasu ). W takim przypadku możemy wyciszyć alert dodając supresHydrationWarning = {true} do elementu.

Jeśli nie jest to element tekstowy, nie może próbować go załatać, aby pozostał niespójny do czasu przyszłych aktualizacji.

Możesz wykonać renderowanie dwuprzebiegowe, jeśli chcemy celowo zapewnić inny render na serwerze i kliencie. Komponenty pozostawione na kliencie mogą czytać zmienne stanu, takie jak this.state.isClient, gdzie zostaną ustawione na true komponentDidMount().

kiedy kończy się q1

Początkowy przebieg renderowania zrobi to samo, co serwer, unikając niespójności, ale dodatkowy przebieg zostanie wykonany synchronicznie po nawodnieniu.

Uwaga: takie podejście spowoduje spowolnienie komponentów, ponieważ robią to dwukrotnie, więc używaj go ostrożnie.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Notatka:

odmontujKomponentAtNode został zastąpiony przez root.unmount() w Reagowaniu. Usuwa zamontowany komponent React z DOM i czyści jego procedury obsługi zdarzeń i stan.

Jeżeli do kontenera nie został zamontowany żaden komponent, to nie jest on w stanie nic zrobić. Zwraca wartość true, jeśli żaden komponent nie jest zamontowany, i false, jeśli nie ma komponentu do odmontowania.

znajdźDOMNode()

Uwaga: findDOMNode to klapa ratunkowa używana do uzyskania dostępu do bazowego węzła DOM. W większości przypadków odradza się stosowanie tego luku ratunkowego, ponieważ zakłóca on abstrakcję komponentów. Zostało przestarzałe w StrictMode.

findDOMNode(komponent)

Jeśli ten komponent został zamontowany w DOM, zwracany jest odpowiedni element DOM natywnej przeglądarki. Ta metoda jest przydatna do odczytywania wartości z DOM, takich jak wartości pól formularza, i wykonywania pomiarów DOM. W większości przypadków możesz dołączyć odwołanie do węzła DOM i uniknąć używania findDOMNode.

Gdy komponent zwraca wartość null lub false, findDOMNode zwraca wartość null. Gdy komponent jest renderowany w postaci łańcucha, findDOMNode zwraca tekstowy węzeł DOM zawierający tę wartość. Komponent może zwrócić fragment z wieloma dziećmi w przypadku, gdy findDOMNode zwrócił węzeł DOM odpowiadający pierwszemu niepustemu dziecku.

Notatka:

findDOMNode działa tylko na zamontowanych komponentach (to znaczy komponentach, które zostały umieszczone w DOM). Jeśli spróbujesz wywołać tę funkcję na komponencie, który nie został jeszcze zamontowany (np. wywołanie metody findDOMNode() na render() na komponencie, który nie został jeszcze utworzony), zostanie zgłoszony wyjątek.

findDOMNode nie może być używany w komponentach funkcji.

Elementy DOM

React implementuje niezależny od przeglądarki system DOM, zapewniający wydajność i kompatybilność z różnymi przeglądarkami. Korzystamy z okazji, aby oczyścić niektóre niedociągnięcia w implementacji DOM przeglądarki.

W React wszystkie właściwości i atrybuty DOM (w tym procedury obsługi zdarzeń) muszą być zapisane wielkimi literami. Na przykład atrybut tabindex HTML odpowiada atrybutowi tabindex w React.

Wyjątkiem są atrybuty aria-* i data-*, które muszą być pisane małymi literami. Na przykład możesz mieć etykietę obszaru jako etykietę obszaru.

Różnice w atrybutach

Kilka atrybutów będzie działać inaczej w React i HTML:

sprawdzony

Zaznaczony atrybut jest obsługiwany przez komponenty typu checkbox lub radio. Jest to przydatne do produkcji kontrolowanych komponentów. Możesz użyć tego, aby określić, czy komponent jest sprawdzany, czy nie.

DefaultChecked to niezaznaczony odpowiednik, który określa, że ​​komponent jest sprawdzany przy pierwszym zamontowaniu.

Nazwa klasy

Aby określić klasę CSS, użyj atrybutu className. Dotyczy wszystkich zwykłych elementów DOM i SVG, takich jak: itp.

Jeśli używasz React with Web Components (niezbyt często), użyj zamiast tego atrybutu class.

niebezpiecznieSetInnerHTML

Dangerously SetInnerHTML jest zamiennikiem Reacta umożliwiającym używanie internalHTML w przeglądarce DOM. Konfigurowanie kodu HTML jest ryzykowne, ponieważ łatwo jest narazić użytkowników na atak typu cross-site scripting (XSS).

Możemy więc ustawić HTML bezpośrednio z Reacta, ale trzeba niebezpiecznie wpisać SetInnerHTML i przekazać obiekt kluczem __html, aby pamiętać, że jest to niebezpieczne.

Na przykład:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

Elementy React używają zamiast tego htmlFor, ponieważ for jest słowem zastrzeżonym w JavaScript.

naZmień

Zdarzenie onChange zachowuje się zgodnie z oczekiwaniami; zdarzenie jest uruchamiane za każdym razem, gdy zmieniane jest pole formularza.

Celowo nie używamy istniejącego zachowania przeglądarki, ponieważ zmiana jest wspaniała ze względu na jej zachowanie, a React opiera się na zdarzeniu, aby obsługiwać dane wprowadzane przez użytkownika w czasie rzeczywistym.

wybrany

Jeśli chcesz oznaczyć opcję jako wybraną, zamiast tego odwołaj się do wartości tej opcji w wartości „. Szczegółowe instrukcje znajdziesz w sekcji „Wybierz tag”.

Notatka:

W maksymalnych przypadkach nazwy klas odnoszą się do klas zdefiniowanych w zewnętrznym arkuszu stylów CSS. Style są używane w aplikacjach React w celu dodawania obliczonych stylów w czasie renderowania. Atrybut style akceptuje obiekt JavaScript z właściwościami camel zamiast ciągu CSS.

Jest zgodny W stylu DOM Właściwości JavaScript, jest bardziej wydajny i pozwala uniknąć XSS luki w zabezpieczeniach.

Na przykład:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Pamiętaj, że: style nie mają automatycznego prefiksu. Aby obsługiwać starsze przeglądarki, musimy podać właściwości stylu:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Klucze stylu są wielbłądami i odpowiadają dostępowi do właściwości węzłów DOM z poziomu JS. Przedrostki dostawcy MS zaczynają się od dużej litery.

Verilog zawsze

React automatycznie doda przyrostek „px” do niektórych wbudowanych właściwości stylu liczb. Jeśli chcemy używać jednostek innych niż „px”, określ wartość jako ciąg znaków z żądaną jednostką.

Na przykład:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Jednak nie wszystkie właściwości stylu są konwertowane na ciągi pikseli.

Pomiń alert o treści edytowalnej

Jeśli element przeznaczony dla dzieci zostanie oznaczony jako nadający się do edycji, pojawi się ostrzeżenie, ponieważ nie będzie działać. Atrybut pomija ostrzeżenie.

Ostrzeżenie o tłumieniu

Jeśli używamy renderowania React po stronie serwera, jest to ostrzeżenie, gdy serwer i klient renderują z różną zawartością. Jednak w rzadkich przypadkach trudno jest zagwarantować dokładne dopasowanie. Na przykład oczekuje się, że znaczniki czasu będą się różnić na serwerze lub na kliencie.

Jeśli ustawisz ostrzeżenie o pomijaniu na wartość true, nie będzie ono ostrzegać o niezgodnościach między atrybutami i zawartością elementu.

Działało tylko na głębokości jednego poziomu i miało służyć jako ucieczka.

wartość

Atrybut value jest projektowany przez komponenty i . Można go użyć do ustawienia wartości komponentu.

Jest to przydatne do produkcji kontrolowanych komponentów. defaultValue i równe niezaznaczone ustawiają wartość komponentu podczas montażu szeregowego.

Wszystkie obsługiwane atrybuty HTML

Obsługiwane są dowolne niestandardowe i standardowe atrybuty DOM.

React udostępnił API zorientowane na JavaScript w DOM. Komponenty Reacta często zawierają niestandardowe i związane z DOM rekwizyty, a React używa tych samych konwencji CamelCase, co API DOM:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API