부모의 componentDidMount가 자식의 모든 componentDidMount 후에 호출됩니까?

부모의 componentDidMount가 자식의 모든 componentDidMount 후에 호출됩니까?

---

내 부모 렌더링에 아래 코드가 있습니다.

<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>

부모의 componentDidMount는 모든 자식이로드 된 후에 만 ​​호출된다고 생각했습니다. 그러나 여기서 parent의 componentDidMount는 child의 componentDidMount보다 먼저 호출됩니다.

이것이 어떻게 작동합니까? 아니면 내가 뭔가 잘못하고 있습니까?

이것이 작동하는 방식이라면 모든 자식 구성 요소가 부모에서로드 될 때 어떻게 감지합니까?

---

네, 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>

참고 URL : https://stackoverflow.com/questions/32814970/is-componentdidmount-of-parent-called-after-all-componentdidmount-of-children