Wird componentDidMount des übergeordneten Elements nach allen componentDidMount der untergeordneten Elemente aufgerufen?

77

Ich habe den folgenden Code in meinem Render des Elternteils

<div>           
{
    this.state.OSMData.map(function(item, index) {
        return <Chart key={index} feature={item} ref="charts" />
    })
}
</div>

Und Code unten in meinem Kinderdiagramm

<div className="all-charts">
    <ChartistGraph data={chartData} type="Line" options={options} />
</div>

Ich dachte, die componentDidMount des Elternteils wird erst aufgerufen, nachdem alle Kinder geladen wurden. Hier wird jedoch die componentDidMount des übergeordneten Elements vor der componentDidMount des untergeordneten Elements aufgerufen.

Funktionieren die Dinge so? Oder mache ich etwas falsch?

Wenn die Dinge so funktionieren, wie würde ich erkennen, wenn alle untergeordneten Komponenten vom übergeordneten geladen werden?

Aakash Sigdel
quelle
12
Die componentDidMount()Methode der untergeordneten Komponenten wird vor der der übergeordneten Komponenten aufgerufen : Link .
Tahir Ahmed
1
Aber wenn ich console.log sowohl in der übergeordneten als auch in der untergeordneten componentDidMount (). Textform Eltern console.log wird zuerst gedruckt
Aakash Sigdel
Es gibt ein korrektes Ergebnis in der Geige. Möglicherweise liegt es daran, dass ich asynchrone Daten in componentDidMount des übergeordneten Elements abrufe und das vom Aufruf zurückgegebene Array verwende, um die untergeordneten OSMData zu durchlaufen, die vom Ajax-Aufruf zurückgegeben werden.
Aakash Sigdel
Ja, im Grunde haben Sie Eltern verwendet componentDidMount(), um einige Manipulationen (AJAX oder was auch immer) durchzuführen, bevor Sie die untergeordneten Komponenten geladen haben. Wenn Ihre untergeordneten Komponenten bereits im übergeordneten Element ohne Abhängigkeit von externen Daten angeordnet wurden, componentDidMount()wird das untergeordnete Element vor dem übergeordneten Element aufgerufen.
Tahir Ahmed
Ich stehe vor dem gleichen Problem. Das Laden von asynchronen Daten unterbricht meinen componentDidMount () -Zyklus, da zuerst ein Platzhalter angezeigt wird. Ich denke, es gibt keine Möglichkeit, das zu umgehen. Vielleicht meine Komponenten umstrukturieren ...
LarryDahooster

Antworten:

67

Ja, die componentDidMountKinder werden vor den Eltern angerufen.

Führen Sie den folgenden Code aus!

Dokumentation besagt :

Einmal aufgerufen, nur auf dem Client (nicht auf dem Server), unmittelbar nach dem ersten Rendern. Zu diesem Zeitpunkt im Lebenszyklus können Sie auf alle Refs Ihrer Kinder zugreifen (z. B. um auf die zugrunde liegende DOM-Darstellung zuzugreifen). Die componentDidMount()Methode der untergeordneten Komponenten wird vor der der übergeordneten Komponenten aufgerufen.

Dies liegt daran, dass Sie zum Zeitpunkt des Renderns auf interne / untergeordnete Knoten verweisen können sollten. Der Versuch, auf übergeordnete Knoten zuzugreifen, wird nicht akzeptiert.

Führen Sie den folgenden Code aus . Es zeigt die Konsolenausgabe.

var ChildThing = React.createClass({
  componentDidMount: function(){console.log('child mount')},
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var Parent = React.createClass({
  componentDidMount: function(){console.log('parent')},
  render: function() {
    return <div>Sup, child{this.props.children}</div>;
  }
});

var App = React.createClass({
  componentDidMount: function(){console.log('app')},
  render: function() {
    return (
      <div>
        <Parent>
          <ChildThing name="World" />
        </Parent>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Blair Anderson
quelle
1
Könnten Sie den Link angeben, der besagt The componentDidMount() method of child components is invoked before that of parent components, dass ich ihn auf der Reaktionsseite nicht finden konnte?
Hendra Uzia
Dies scheint nicht mehr in den Dokumenten zu erscheinen, da die einzigen offiziellen Dokumente, die ich hier sehe, componentDidMounthier sind: facebook.github.io/react/docs/…
Chris W.
Richtig, es war in der älteren Version von docs github.com/facebook/react/blob/v15.0.1/docs/docs/…
Blair Anderson
FWIW componentWillMount () eines übergeordneten Elements wird vor den Routinen componentWillMount () oder componentDidMount () des untergeordneten Elements aufgerufen. Hier möchten Sie also den Code ausführen, der dort bereit sein muss. Was noch verrückter ist, ist, dass selbst wenn Sie eine Anweisung in Ihrem übergeordneten Rendering wie folgt haben: {codeThatNeedsToBeRunFirstBoolean? <mycomponent />: null} und der codeThatNeedsToBeRunFirstBoolean ist false, componentDidMount () in mycompoment wird weiterhin aufgerufen.
Dave Cole