javascript - vida - react purecomponent

¿Se llama a componentDidMount of parent después de todos componentDidMount of children?

Question

Tengo el siguiente código en mi render de padre

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

Y el código a continuación en mi tabla de niño

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

Pensé que el componenteDidMount de parent se llama solo después de que se cargan todos los hijos. Pero aquí el componenteDidMount del padre se llama antes que el componenteDidMount del hijo.

¿Es así como funcionan las cosas? ¿O estoy haciendo algo mal?

Si así es como funcionan las cosas, ¿cómo detectaría cuando todos los componentes secundarios se cargan desde el padre?

Answer 1

Sí, el componentDidMount de los hijos se llama antes que el padre.

¡Ejecute el código a continuación!

estados de documentación :

Se invoca una vez, solo en el cliente (no en el servidor), inmediatamente después de que se produce el renderizado inicial. En este punto del ciclo de vida, puede acceder a cualquier referencia a sus hijos (por ejemplo, para acceder a la representación DOM subyacente). El método componentDidMount() de los componentes secundarios se invoca antes que el de los componentes principales.

Esto se debe a que, en el momento de la representación, debe poder hacer referencia a los nodos internos / secundarios, no se acepta intentar acceder a los nodos principales.

Ejecute el código a continuación . Muestra la salida de la consola.

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>