Zbyt często słyszę termin "góra", ucząc się ReactJS. Wydaje się, że istnieją metody i błędy cyklu życia w odniesieniu do tego terminu. Co dokładnie oznacza React przez zamontowanie?Co to jest "Montowanie" w React js?
Przykłady: componentDidMount() and componentWillMount()
W React, komponenty, z którymi pracujesz, mogą być reprezentowane jako węzły React i węzły DOM.
Sposób, w jaki węzeł React jest reprezentowany jako węzeł DOM i gdzie i kiedy pojawia się w drzewie DOM zarządzany jest przez top-level API. Aby uzyskać lepsze wyobrażenie o tym, co się dzieje, spojrzeć na najbardziej prosty przykład możliwego:
let foo = React.createElement(FooComponent);
Więc co jest foo i co można z nim zrobić? foo, w tej chwili jest instancją typu reakcji typu FooComponent. Obecnie nie ma go nigdzie na stronie, tzn. Nie jest elementem DOM, nie istnieje nigdzie w drzewie DOM, a oprócz tego, że jest węzłem elementu React, nie ma innej znaczącej reprezentacji w dokumencie.
Jeśli miałbyś zadzwonić pod numer React.findDOMNode(foo), otrzymasz z powrotem przedmiot falsyfikacji. Czemu? foo nie ma reprezentacji DOM, ponieważ obecnie nie musi istnieć w drzewie DOM.
Ale raz spróbujesz zamontować React węzeł elementu w dokumencie, można wywołać cykl części, które stworzy odpowiedni udało DOM węzła:
React.render(foo, container);
Od tego momentu foo nie jest już tylko węzeł odpowiedzi. Ma powiązany węzeł DOM i jest obecnie obywatelem pierwszej klasy w dokumencie.Teraz możesz go znaleźć jako rzeczywisty węzeł DOM gdzieś w drzewie i współdziałać z nim tak, jak z innymi elementami DOM: obliczyć jego wysokość, szerokość, zastosować inne style, przekazać je do jQuery, itp.
https://facebook.github.io/react/docs/tutorial.html
Tutaj componentDidMount jest metoda zwana automatycznie React gdy składnik renderowane.
Koncepcja jest, że mówisz ReactJS, „proszę wziąć to coś, to pole komentarz lub przędzenie obraz czy cokolwiek to jest, że chcesz na stronie przeglądarki i iść do przodu i rzeczywiście umieścić go na stronie przeglądarki Gdy to zrobisz, zadzwoń do mojej funkcji, którą związałem z componentDidMount, abym mógł kontynuować. "
componentWillMount jest odwrotnie. Natychmiast wystrzeli ZANIM komponent wyrenderuje.
Zobacz również tutaj https://facebook.github.io/react/docs/component-specs.html
Wreszcie "mount" termin wydaje się być unikalna dla react.js. Nie sądzę, że jest to ogólna koncepcja javascript, a nawet ogólna koncepcja przeglądarki.
więc zamontować można nazwać "umieszczona" ? – gates
Powiedziałbym tak, tak. –
Powiedziałbym, że cytat jest nieco mylący, ponieważ jest wywoływany tylko po renderowaniu _initial_, a nie na ponownym renderowaniu spowodowanym przez aktualizacje. Zamiast tego wywoływane jest 'componentDidUpdate'. –
Proces montażu odnosi się do początkowego ładowania strony po pierwszym renderowaniu komponentu React. Od React dokumentacji 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żna to kontrastować z funkcją componentDidUpdate, który jest nazywany spędzaj że React renderuje (z wyjątkiem początkowej górze).
React to izomorphic/universal framework. Oznacza to, że istnieje wirtualna reprezentacja drzewa komponentów interfejsu użytkownika, która jest oddzielna od rzeczywistego renderowania, które generuje w przeglądarce. Z dokumentacji:
Reaguj jest tak szybki, ponieważ nie komunikuje się bezpośrednio z DOM. React utrzymuje szybką reprezentację DOM w pamięci.
jednak, że w pamięci reprezentacja nie jest związana bezpośrednio z DOM w przeglądarce (chociaż nazywa wirtualnej DOM, który jest niefortunne i mylące nazwy dla uniwersalnego apps ram), i jest strukturą danych podobną do DOM, która reprezentuje wszystkie hierarchie składników interfejsu użytkownika i dodatkowe metadane. Wirtualny DOM to tylko szczegół implementacji.
„Uważamy, że prawdziwe fundamenty React to po prostu idee podzespołów i elementów: będąc w stanie opisać tego, co chcesz uczynić w sposób deklaratywny sposób Są to elementy wspólne dla wszystkich tych różnych opakowaniach części.. React specyficzne dla niektórych celów renderowania nie są zazwyczaj tym, o czym myślimy, gdy myślimy o React. " - React js Blog
Zatem konkluzja jest taka, że React jest świadczenie agnostycznego, co oznacza, że nie dba o to, co jest ostateczne wyjście. Może to być drzewo DOM w przeglądarce, może to być XML, składniki natywne lub JSON.
„Gdy patrzymy na opakowaniach, jak reagować, rodzimy, reagują techniki, reagują-płótno i reagują trzy, to staje się jasne, że piękno i istotę React ma nic wspólnego z przeglądarek lub DOM. " - React js Blog
teraz, że wiesz, jak reagować dzieła, nie jest łatwo odpowiedzieć na pytanie :)
montażu jest proces wyprowadzania wirtualną reprezentację komponentu do ostatecznego UI reprezentacja (np. DOM lub składniki natywne).
W przeglądarce Oznaczałoby to wyprowadzanie React element do rzeczywistego elementu DOM (np HTML div lub li element) w drzewie DOM. W natywnej aplikacji oznaczającej wyprowadzanie elementu React do komponentu natywnego. Możesz również napisać własny renderer i wypisać składniki w JSON lub XML, a nawet XAML, jeśli masz odwagę.
Tak więc, montowanie/odmontowywanie procedur obsługi ma kluczowe znaczenie dla aplikacji React, ponieważ można tylko upewnić się, że komponent jest wyprowadzany/renderowany, gdy jest on zamontowany. Jednak procedura obsługi componentDidMount jest wywoływana tylko podczas renderowania do rzeczywistej reprezentacji UI (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 zostanie dociera do przeglądarki i wykonuje w niej.
I tak, Montaż jest również niefortunnym/mylącym nazwiskiem, jeśli mnie o to poprosisz.IMHO componentDidRender i componentWillRender byłyby znacznie lepszymi nazwami.
http://www.ministryofprogramming.com/react-js-the-king-of-universal-apps/
Ktoś właśnie wskazał mi tę odpowiedź z innego forum. Nie sądzę, że 'componentDidRender' jest substytutem' componentDidMount', ponieważ komponent może renderować wiele razy, gdy rekwizyty zmieniają się po zamontowaniu go raz. – Gaurav
@TheMinister Nazywano ją biblioteką "wirtualnego DOM", ponieważ nie rozpoczęła się ona jako izomorficzna, ale od samego początku była związana z DOM. To było po myśli, aby uczynić go izomorficznym. –
Zatem, * mount * jest wymienny z * render *? W takim przypadku, czy to prawda, że komponent jest * montowany/renderowany * dla każdego z następujących hipotetycznych ?: '(id === that.id)?
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 składnikiem, stopka jest składnikiem, powiadomienie toastem jest komponentem itd. Termin "mount" mówi nam, że te składniki są ładowane lub renderowane w DOM. Jest to wiele interfejsów API i metod najwyższego poziomu.
W celu uproszczenia montaż oznacza, że komponent został załadowany do DOM, a odmontowany oznacza, że komponenty zostały usunięte z DOM.
Montaż odnosi się do komponentu w React (utworzone węzły DOM) dołączanego do jakiejś części dokumentu. To jest to!
ignorując React można myśleć o tych dwóch funkcji natywnych jak montaż:
które prawdopodobnie najczęstsze funkcje React zastosowań zamontować wewnętrznie.
Pomyśl:
componentWillMount === przed mocowaniem
I:
componentDidMount === po montażu
Chciałbym wskazać że gdy wywołasz 'React.createElement (FooComponent)' nie tworzysz instancji 'FooComponent'. 'foo' jest wirtualną reprezentacją DOM' FooComponent', znaną również jako element React. Ale może to właśnie miałeś na myśli przez '' FooComponent' React type_. Bez względu na to, że nie montujesz komponentów w React, wywołujesz render, który z kolei _might_ montuje komponent, jeśli potrzebny jest prawdziwy węzeł DOM, który reprezentuje komponent w drzewie DOM. Rzeczywisty montaż to zdarzenie, w którym dzieje się to po raz pierwszy. –
Montowanie odnosi się do dołączenia instancji składnika React do węzła DOM, co jest niezbędne do aktualizowania renderowania drzewa/przyrostowego podczas kolejnych wywołań renderowania. –