Co to jest „montowanie” w React js?

Zbyt wiele razy słyszę termin „montowanie” podczas nauki ReactJS. Wydaje się, że w odniesieniu do tego terminu występują metody cyklu życia i błędy. Co dokładnie oznacza React przez montowanie?

Przykłady: componentDidMount() and componentWillMount()

Głównym zadaniem Reacta jest wymyślenie, jak zmodyfikować DOM, aby dopasować komponenty, które mają być renderowane na ekranie.

React robi to przez "montowanie" (dodawanie węzłów do DOM), "odmontowywanie" (usuwanie ich z DOM) i "aktualizowanie" (wprowadzanie zmian do węzłów już w DOM).

To, jak węzeł React jest reprezentowany jako węzeł DOM oraz gdzie i kiedy pojawia się w drzewie DOM, jest zarządzane przez API najwyższego poziomu . Aby lepiej zrozumieć, co się dzieje, spójrz na najprostszy możliwy przykład:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Więc co to jest fooi co możesz z tym zrobić? foow tej chwili jest zwykłym obiektem JavaScript, który wygląda mniej więcej tak (uproszczony):

{
  type: FooComponent,
  props: {}
}

Obecnie nie ma go nigdzie na stronie, tj. Nie jest elementem DOM, nie istnieje nigdzie w drzewie DOM i poza tym, że jest węzłem elementu React, nie ma innej znaczącej reprezentacji w dokumencie. Po prostu mówi Reactowi, co musi być na ekranie, jeśli ten element React zostanie renderowany. Nie jest jeszcze „zamontowany”.

Możesz nakazać Reactowi „zamontowanie” go w kontenerze DOM, wywołując:

ReactDOM.render(foo, domContainer);

To mówi Reactowi, że czas pokazać foosię na stronie. React utworzy instancję FooComponentklasy i wywoła jej rendermetodę. Powiedzmy, że renderuje a <div />, w takim przypadku React utworzy divdla niego węzeł DOM i wstawi go do kontenera DOM.

Ten proces tworzenia instancji i węzłów DOM odpowiadających komponentom React i wstawiania ich do DOM nazywa się montowaniem.

Zauważ, że normalnie wywołujesz tylko w ReactDOM.render()celu zamontowania komponentów root. Nie ma potrzeby ręcznego „montowania” komponentów podrzędnych. Za każdym razem, gdy wywoływany jest komponent nadrzędny setState(), a jego rendermetoda mówi, że określone dziecko powinno zostać wyrenderowane po raz pierwszy, React automatycznie „zamontuje” to dziecko w jego rodzicu.

React to izomorficzna / uniwersalna struktura. Oznacza to, że istnieje wirtualna reprezentacja drzewa składników interfejsu użytkownika, która jest niezależna od rzeczywistego renderowania, które generuje w przeglądarce. Z dokumentacji:

React jest tak szybki, ponieważ nigdy nie komunikuje się bezpośrednio z DOM. React utrzymuje szybką reprezentację modelu DOM w pamięci.

Jednak ta reprezentacja w pamięci nie jest bezpośrednio powiązana z DOM w przeglądarce (mimo że nazywa się Virtual DOM, co jest niefortunną i mylącą nazwą dla uniwersalnej struktury aplikacji), a jest to po prostu dane przypominające DOM struktura, która reprezentuje wszystkie hierarchie składników interfejsu użytkownika i dodatkowe metadane. Wirtualny DOM to tylko szczegół implementacji.

„Uważamy, że prawdziwymi fundamentami Reacta są po prostu pomysły komponentów i elementów: możliwość opisania tego, co chcesz renderować w sposób deklaratywny. Są to elementy wspólne dla wszystkich tych różnych pakietów. Części Reacta specyficzne dla określonego renderowania cele zwykle nie są tym, o czym myślimy, gdy myślimy o Reakcie ”. - Blog React js

Zatem wniosek jest taki, że React jest agnostykiem renderowania , co oznacza, że ​​nie dba o to, jaki będzie wynik końcowy. Może to być drzewo DOM w przeglądarce, może to być XML, komponenty natywne lub JSON.

„Kiedy patrzymy na takie pakiety, jak responsywność, reakcja sztuki, reagowanie na płótno i reagowanie na trzy, staje się jasne, że piękno i istota Reacta nie ma nic wspólnego z przeglądarkami ani DOM”. - Blog React js

Skoro już wiesz, jak działa React, łatwo odpowiedzieć na Twoje pytanie :)

Montowanie to proces wyprowadzania wirtualnej reprezentacji komponentu do ostatecznej reprezentacji UI (np. DOM lub Komponenty natywne).

W przeglądarce oznaczałoby to umieszczenie elementu React w rzeczywistym elemencie DOM (np. HTML div lub li ) w drzewie DOM. W aplikacji natywnej oznaczałoby to wyprowadzenie elementu React do komponentu natywnego. Możesz także napisać własny renderer i wyprowadzić komponenty React w JSON lub XML, a nawet XAML, jeśli masz odwagę.

Tak więc, moduły obsługi montowania / odmontowywania są krytyczne dla aplikacji React, ponieważ możesz mieć pewność, że komponent zostanie wyprowadzony / wyrenderowany po zamontowaniu . JednakżecomponentDidMount moduł obsługi jest wywoływany tylko podczas renderowania do rzeczywistej reprezentacji interfejsu użytkownika (DOM lub Native Components), ale nie w przypadku renderowania do ciągu HTML na serwerze przy użyciu renderToString, co ma sens, ponieważ komponent nie jest faktycznie montowany, dopóki nie osiągnie przeglądarka i uruchamia się w niej.

I tak, montaż to również niefortunna / myląca nazwa, jeśli o mnie chodzi. IMHO componentDidRenderi componentWillRenderbyłoby znacznie lepszymi nazwami.

Montowanie odnosi się do komponentu w React (utworzone węzły DOM) dołączanego do jakiejś części dokumentu. Otóż ​​to!

Ignorując Reacta możesz myśleć o tych dwóch natywnych funkcjach jako o montowaniu:

replaceChild

appendChild

Które są prawdopodobnie najbardziej powszechnymi funkcjami używanymi przez React do montowania wewnętrznego.

Myśleć o:

componentWillMount === przed zamontowaniem

I:

componentDidMount === po zamontowaniu

https://facebook.github.io/react/docs/tutorial.html

Tutaj componentDidMount jest metodą wywoływaną automatycznie przez Reacta, gdy komponent jest renderowany.

Chodzi o to, że mówisz ReactJS: „weź to, proszę, to pole komentarza, obracający się obrazek, czy cokolwiek chcę na stronie przeglądarki, i umieść to na stronie przeglądarki. Kiedy to zrobisz, zadzwoń moja funkcja, do której się zobowiązałem, componentDidMountwięc mogę kontynuować ”.

componentWillMountjest odwrotnie. Zapali się natychmiast PRZED renderowaniem komponentu.

Zobacz także tutaj https://facebook.github.io/react/docs/component-specs.html

Wreszcie, termin „montowanie” wydaje się być unikatowy w przypadku respond.js. Nie sądzę, że jest to ogólna koncepcja javascript, czy nawet ogólna koncepcja przeglądarki.

Montowanie odnosi się do początkowego wczytywania strony, kiedy komponent React jest po raz pierwszy renderowany. Z dokumentacji React do montażu: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

Możesz to porównać z funkcją componentDidUpdate, która jest wywoływana za każdym razem, gdy React renderuje (z wyjątkiem początkowego montowania).

Głównym celem React js jest tworzenie komponentów wielokrotnego użytku. W tym przypadku komponenty to poszczególne części strony internetowej. Na przykład na stronie internetowej nagłówek jest komponentem, stopka jest komponentem, wyskakujące powiadomienie jest komponentem itd. Termin „mount” mówi nam, że te komponenty są ładowane lub renderowane w DOM. Oto wiele API i metod najwyższego poziomu, które sobie z tym radzą.

Upraszczając, zamontowanie oznacza, że ​​komponent został załadowany do DOM, a odmontowany oznacza, że ​​komponenty zostały usunięte z DOM.