在所有componentDidMount子项之后调用的父级的componentDidMount？

Question

我在下面的代码在我的孩子图表

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

父

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

而下面的代码使我想到父母的componentDidMount是所有孩子的加载后才能调用。但是在这里parent的componentDidMount在child的componentDidMount之前被调用。

这是怎么回事？或者我做错了什么。

如果这是事情的工作方式，我将如何检测何时从父级加载所有子组件？

Answer 1

是的孩子的componentDidMount被称为父母之前。

运行下面的代码！

documentation states：

调用一次，只有客户端（未在服务器上）上时，发生初始渲染之后立即。在生命周期的这一点上，您可以访问任何参考给您的孩子（例如，访问底层的DOM表示）。 方法子组件在父组件之前被调用。

这是因为在渲染时，你应该能够引用任何内部/子节点，试图访问父节点是不被接受的。

运行下面的代码。它显示控制台输出。

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>