javascript - 父级的componentDidMount是否在子级的所有componentDidMount之后调用？

我 parent 的渲染中有以下代码

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

以及下面我 child 图表中的代码

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

我以为父级的componentDidMount仅在加载所有子级后才被调用。但是这里，父级的componentDidMount在子级的componentDidMount之前被调用。

这是工作方式吗？还是我做错了什么。

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

最佳答案

是的，在父级之前调用子级的componentDidMount。

运行以下代码!

documentation states:



这是因为在渲染时，您应该能够引用任何内部/子节点，并且不尝试访问父节点。

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

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>