在所有componentDidMount的子项之后调用parentDidMount吗？

Question

我的父母渲染中有以下代码

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

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

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

我认为只有在加载所有子节点后才调用parentDidMount.但是这里父子的componentDidMount在child的componentDidMount之前被调用.

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

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

Answer 1

是的componentDidMount,孩子们在父母面前被召唤.

运行下面的代码!

文件说明:

在初始渲染发生后立即仅在客户端(不在服务器上)调用一次.在生命周期的这一点上,您可以访问子项的任何引用(例如,访问底层DOM表示).子组件的componentDidMount()方法在父组件之前调用.

这是因为在渲染时,您应该能够引用任何内部/子节点,不接受尝试访问父节点.

运行以下代码.它显示了控制台输出.

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>