Wann wird `componentDidMount` ausgelöst?

Question

Dies ist ein wiederkehrendes Problem, das ich mit React habe. Die Methode componentDidMount wird garantiert ausgelöst, wenn die Komponente zum ersten Mal gerendert wird, so dass es ein natürlicher Ort zu sein scheint, DOM-Messungen wie Höhen und Offsets zu machen. Oft erhalte ich jedoch zu diesem Zeitpunkt des Lebenszyklus der Komponente falsche Lesarten. Die Komponente ist im DOM, wenn ich mit dem Debugger breche, aber es ist noch nicht auf dem Bildschirm gemalt. Ich bekomme dieses Problem mit Elementen, deren Breite/Höhe meistens auf 100% gesetzt ist. Wenn ich nehme Messungen in componentDidUpdate - alles funktioniert gut, aber diese Methode nicht bei den anfänglichen Feuer der Komponente machen.

Also meine Frage ist - wann genau ist componentDidMount gefeuert, weil es offensichtlich nicht gefeuert wird, nachdem alle Browserfarben fertig sind.

EDIT: This Stackoverflow issue beschäftigt sich mit dem gleichen Thema:

Es verweist auch this github conversation die erklärt, was

Answer 1

Innerhalb eines Komponentenbaum reagieren wird componentDidMount() Komponenten wurden auch montiert worden, nachdem alle Kinder gefeuert. Das bedeutet, dass jede componentDidMount() der Komponente gefeuert wird, bevor seine Eltern hat montiert.

Also, wenn Sie wollen, etc DOM Position und Größen messen, mit componentDidMount() einer untergeordneten Komponente ist eine unsichere Ort/Zeit, dies zu tun.

In Ihrem Fall: genaue Ablesung von 100% Breite/Höhe Komponenten zu bekommen, an einem sicheren Ort solche Messungen zu nehmen wäre innerhalb der componentDidMount() der oben Komponente reagieren.
100% ist eine Breite/Höhe relativ zum übergeordneten/Container.Messungen können also erst nach der Montage des Elternteils vorgenommen werden.

Answer 2

geschieht Wie Sie vielleicht wissen, ist componentDidMount ausgelöst nur einmal unmittelbar nach dem ersten Rendering.

Da Sie Messungen durchführen, scheint es, dass Sie auch Ihre Messung auslösen möchten, wenn sich Ihre Messungen bei der Aktualisierung Ihrer Komponente ändern.

Bitte beachten Sie, dass componentDidUpdate nicht für das anfängliche Rendern auftritt, so dass Sie wahrscheinlich beide Lebenszyklusereignisse benötigen, um Ihre Messungsbehandlung auszulösen. Sehen Sie, ob dieses zweite Ereignis für Sie ausgelöst wird und ob es andere Messungen hat.

Meiner Meinung nach sollten Sie die Verwendung setTimeout oder requestAnimationFrame wenn möglich vermeiden.

React Lifecycle Reference.

Answer 3

können Sie versuchen, Logik in componentDidMount() mit requestAnimationFrame() verzögern. Die Logik sollte nach der nächsten Farbe auftreten.

jedoch würden wir mehr über Ihren Code wissen müssen, um zu sehen, warum die Knoten nicht gemalt worden. Ich habe dieses Problem nie erreicht. componentDidMount() wird direkt nach dem Hinzufügen der Dom-Knoten zur Seite ausgelöst, aber nicht unbedingt, nachdem sie gemalt wurden.

Answer 4

Wenn Sie auf etwas antworten möchten, das im DOM gemountet wird, ist der zuverlässigste Weg das zu tun mit einem ref callback. Zum Beispiel:

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