Kiedy dokładnie jest uruchamiane `componentDidMount`?

Question

To jest powtarzający się problem z React. Metoda componentDidMount gwarantuje, że zostanie uruchomiona, gdy komponent zostanie wyrenderowany po raz pierwszy, więc wydaje się naturalnym miejscem do wykonywania pomiarów DOM, takich jak wysokości i przesunięcia. Jednak wiele razy otrzymuję błędne odczyty stylu w tym momencie cyklu życia komponentu. Komponent jest w DOM, kiedy zerwam z debuggerem, ale nie jest jeszcze pomalowany na ekranie. Problem pojawia się w przypadku elementów, których szerokość/wysokość jest ustawiona na 100%. Kiedy wykonuję pomiary w componentDidUpdate - wszystko działa poprawnie, ale ta metoda nie uruchomi się przy początkowym renderowaniu komponentu.

Moje pytanie brzmi - kiedy dokładnie zostanie wyrzucony componentDidMount, ponieważ po uruchomieniu wszystkich przeglądarek nie wyszedł na jaw.

EDIT: This Stackoverflow issue dotyczy tego samego tematu:

odwołuje się również this github conversation który wyjaśnia, co dzieje

Answer 1

Wewnątrz drzewa komponentu reagowania componentDidMount() jest uruchamiane po zamontowaniu wszystkich komponentów podrzędnych. Oznacza to, że każdy komponent o numerze componentDidMount() jest uruchamiany zanim jego jednostka nadrzędna zostanie zamontowana.

Jeśli chcesz zmierzyć pozycję DOM i rozmiary itp., Użycie componentDidMount() elementu potomnego jest niebezpiecznym miejscem/czasem.

W twoim przypadku: aby uzyskać dokładny odczyt w 100% z komponentów szerokość/wysokość, bezpieczne miejsce do podjęcia takich pomiarów będzie wewnątrz componentDidMount() z górnym reagować komponent.
100% to szerokość/wysokość względem rodzica/kontenera.Zatem pomiary mogą być wykonane tylko po zamontowaniu rodzica.

Answer 2

Jak wiadomo, componentDidMount jest wyzwalany tylko raz, natychmiast po początkowym renderingu.

Ponieważ wykonujesz pomiary, wydaje się, że chciałbyś również wywołać pomiar, gdy componentDidUpdate na wypadek, gdyby twoje pomiary uległy zmianie po aktualizacji Twojego składnika.

Należy pamiętać, że componentDidUpdate nie występuje podczas wstępnego renderowania, więc prawdopodobnie będziesz potrzebować obu zdarzeń cyklu życia, aby uruchomić obsługę pomiarów. Sprawdź, czy to drugie zdarzenie zostanie uruchomione i czy ma inne wymiary.

Moim zdaniem powinieneś unikać używania setTimeout lub requestAnimationFrame, gdy to możliwe.

React Lifecycle Reference.

Answer 3

możesz spróbować opóźnić logikę w componentDidMount() z requestAnimationFrame(). logika powinna wystąpić po następnej farbie.

Musimy jednak wiedzieć więcej o kodzie, aby zobaczyć, dlaczego węzły nie zostały pomalowane. Nigdy nie uderzyłem w ten problem. componentDidMount() pożary zaraz po dodaniu do węzłów domen, ale niekoniecznie po ich pomalowaniu.

Answer 4

Jeśli chcesz odpowiedzieć na coś zamontowanego w DOM, najbardziej niezawodny sposób to zrobić z ref callback. Na przykład:

render() { 
    return (
    <div 
     ref={(el) => { 
     if (el) { 
      // el is the <div> in the DOM. Do your calculations here! 
     } 
     }} 
    ></div> 
); 
}