React.js中componentWillMount調用的順序

Question

根據此頁面http://busypeoples.github.io/post/react-component-lifecycle/組件的渲染方法在其他地方的componentWillMount和componentDidMount方法之間調用正確。

但組件生命週期的react.js文檔https://facebook.github.io/react/docs/component-specs.html表示所有子活動的componentDidMount方法都在父級之前調用。我可以理解componentDidMount在渲染任何子組件後可以調用，但運行時如何知道哪些子代在渲染之前調用componentWillMount函數？或者我正確地認爲componentWillMount首先被調用，然後是兒童（不像componentDidMount）？

謝謝！

Answer 1

好的。所以在這裏。如果你有一個父一個簡單的結構和2名兒童是這樣的：

<Parent> 
    <Child/> 
    <Child/> 
</Parent> 

隨後的事件序列發射將是：

1. <Parent> componentWillMount()
2. <Parent> render()，開始呈現兒童
3. <Child> componentWillMount()第一個孩子
4. <Child> render()第一個孩子
5. 老二<Child> componentWillMount()
6. 老二
7. 第一個孩子的<Child> componentDidMount()的<Child> render()（這些纔會啓動後的最後呈現在樹已運行）
8. 老二<Child> componentDidMount()
9. <Parent> componentDidMount() （這個只在最後一個孩子跑完後才能運行）

你可以找到一個codepen example here。

Answer 2

您可以在每個方法中放置一個console.log（）以查看它們在控制檯中打印的順序。