Jaka jest różnica między componentWillMount i componentDidMount w ReactJS?

Przejrzałem dokumentację Facebooka pod adresem ( React.Component ) i wspomina, jak componentWillMountjest wywoływana na kliencie / serwerze, podczas gdy componentDidMountjest wywoływana tylko na kliencie. Co robi componentWillMountz serwerem?

componentWillMount jest zasadniczo konstruktorem. Możesz ustawić właściwości instancji, które nie mają wpływu na renderowanie, synchronicznie pobierać dane ze sklepu i ustawiać z nim stan, a także inny prosty kod bez efektu ubocznego, który musisz uruchomić podczas konfigurowania komponentu.

Jest to rzadko potrzebne i wcale nie jest potrzebne w przypadku klas ES6.

constructormetoda nie jest taki sam, jak componentWillMount.

Zdaniem autora Reduxa wysyłanie akcji od konstruktora jest ryzykowne, ponieważ może skutkować mutacją stanu podczas renderowania.

Jednak wysyłka z componentWillMountjest w porządku.

z wydania github :

Dzieje się tak, gdy metoda dispatch () wewnątrz konstruktora jednego składnika powoduje wywołanie setState () wewnątrz innego składnika. React śledzi „aktualnego właściciela” dla takich ostrzeżeń - i myśli, że wywołujemy metodę setState () wewnątrz konstruktora, gdy technicznie konstruktor powoduje wywołanie setState () w innej części aplikacji. Myślę, że nie powinniśmy się tym zajmować - po prostu React stara się jak najlepiej wykonać swoją pracę. Rozwiązaniem jest, jak słusznie zauważyłeś, zamiast tego metoda dispatch () wewnątrz componentWillMount ().

Aby dodać do tego, co powiedział FakeRainBrigand, componentWillMountjest wywoływany podczas renderowania React na serwerze i kliencie, ale componentDidMountjest wywoływany tylko na kliencie.

componentWillMountjest wykonywana przed INITIALEM renderkomponentu i jest używana do oceny właściwości i wykonywania na ich podstawie dodatkowej logiki (zwykle również do aktualizacji stanu) i jako taka może być wykonana na serwerze w celu uzyskania pierwszego renderowanego znacznika po stronie serwera .

componentDidMountjest wykonywana PO pierwszej renderaktualizacji, gdy DOM został zaktualizowany (ale przede wszystkim PRZED aktualizacją DOM jest namalowana w przeglądarce, co pozwala na wykonywanie wszelkiego rodzaju zaawansowanych interakcji z samym DOM). To oczywiście może się zdarzyć tylko w samej przeglądarce i nie występuje w ramach SSR, ponieważ serwer może generować tylko znaczniki, a nie sam DOM, dzieje się to po wysłaniu go do przeglądarki, jeśli używa SSR

Zaawansowane interakcje z DOM, o którym mówisz? Whaaaat ?? ... Tak - w tym momencie, ponieważ DOM został zaktualizowany (ale użytkownik nie widział jeszcze aktualizacji w przeglądarce) możliwe jest przechwycenie rzeczywistego malowania na ekranie za pomocą, window.requestAnimationFramea następnie wykonanie takich rzeczy, jak zmierzenie rzeczywistego Elementy DOM, które zostaną wyprowadzone, do których możesz dokonać dalszych zmian stanu, super przydatne na przykład do animacji do wysokości elementu, który ma nieznaną zawartość zmiennej długości (ponieważ możesz teraz zmierzyć zawartość i przypisać wysokość do animacji), lub aby uniknąć flashowania scenariuszy treści podczas pewnych zmian stanu.

Bądź jednak bardzo ostrożny, aby strzec zmian stanu w jakikolwiek componentDid...inny sposób, ponieważ w przeciwnym razie może to spowodować nieskończoną pętlę, ponieważ zmiana stanu spowoduje również ponowne renderowanie, a zatem kolejne componentDid...i ciągle i dalej i dalej

Zgodnie z dokumentacją ( https://facebook.github.io/react/docs/react-component.html )

Metody z prefiksem will są wywoływane tuż przed wystąpieniem zdarzenia i

Metody poprzedzone było nazywane są r rawo po coś się dzieje.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Jest jednak pewien problem: asynchroniczne wywołanie pobierania danych nie powróci przed renderowaniem. Oznacza to, że komponent przynajmniej raz wyrenderuje się z pustymi danymi.

Nie ma możliwości „wstrzymania” renderowania i czekania na nadejście danych. Nie możesz w jakiś sposób zwrócić obietnicy z componentWillMount ani zmagać się z setTimeout.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

nasz komponent nie będzie miał dostępu do natywnego interfejsu użytkownika (DOM itp.). Nie będziemy też mieli dostępu do referencji dla dzieci, ponieważ nie zostały one jeszcze utworzone. KomponentWillMount () to dla nas szansa na obsługę konfiguracji, aktualizację stanu i generalnie przygotowanie do pierwszego renderowania. Oznacza to, że możemy rozpocząć obliczenia lub procesy w oparciu o wartości rekwizytów.

Przypadek użycia dla componentWillMount ()

Na przykład, jeśli chcesz zachować datę utworzenia komponentu w stanie komponentu, możesz to ustawić w tej metodzie. Pamiętaj, że ustawienie stanu w tej metodzie nie spowoduje ponownego renderowania modelu DOM. Należy o tym pamiętać, ponieważ w większości przypadków za każdym razem, gdy zmieniamy stan komponentu, wyzwalane jest ponowne renderowanie.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Przykład zastosowania dla componentDidMount ()

Na przykład, jeśli tworzysz aplikację z wiadomościami, która pobiera dane dotyczące aktualnych wiadomości i wyświetla je użytkownikowi, i możesz chcieć, aby te dane były aktualizowane co godzinę bez konieczności odświeżania strony przez użytkownika.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Metoda zmienia tylko bieżącą stronę w komponentach klasy, ale ComponentWillMount()zmienia wszystkie strony, na które wpłynąłsetStates()