Javascript 在所有子组件的 componentDidMount 之后调用父组件的 componentDidMount 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32814970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is componentDidMount of parent called after all componentDidMount of children?
提问by Aakash Sigdel
I have the code below in my render of parent
我的父级渲染中有以下代码
<div>
{
this.state.OSMData.map(function(item, index) {
return <Chart key={index} feature={item} ref="charts" />
})
}
</div>
And code below in my child Chart
和下面的代码在我的孩子图表中
<div className="all-charts">
<ChartistGraph data={chartData} type="Line" options={options} />
</div>
I thought the componentDidMount of parent is called only after all childs are loaded. But here the componentDidMount of parent is called before the componentDidMount of child.
我认为只有在加载所有孩子之后才会调用 parent 的 componentDidMount 。但是这里父组件的componentDidMount在子组件的componentDidMount之前被调用。
Is this how things work? Or am I doing something wrong.
这就是事情的运作方式吗？或者我做错了什么。
If this is how things work, how would I detect when all the child components are loaded from parent?
如果这是工作原理，我将如何检测所有子组件何时从父组件加载？
采纳答案by Blair Anderson
Yes the componentDidMountof children are called before the parent.
是的componentDidMount，孩子的孩子在父母之前被调用。
Run the code below!
运行下面的代码！
文件指出：
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The
componentDidMount()method of child componentsis invoked before that of parent components.
仅在客户端（不在服务器）上调用一次，在初始渲染发生后立即调用。在生命周期的这一点上，您可以访问任何对您的孩子的引用（例如，访问底层 DOM 表示）。子组件的
componentDidMount()方法先于父组件调用。
This is because at time of rendering, you should be able to reference any internal/child nodes, attempting to access parent nodes is not accepted.
这是因为在渲染时，您应该能够引用任何内部/子节点，不接受尝试访问父节点。
Run the code below. It shows the console output.
运行下面的代码。它显示控制台输出。
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>