在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. <Child> render()
第一个孩子的
7. <Child> componentDidMount()（这些只会在树中的最后一个渲染运行后才开始）
第二个孩子的
8. <Child> componentDidMount()
9. <Parent> componentDidMount()（这个只会在最后一个孩子运行componentDidMount后才会运行）

您可以找到codepen example here。

Answer 2

您可以在每个方法中放置一个console.log（），以便在控制台中查看其订单。