javascript - React.js 中 componentWillMount 调用的顺序

Question

根据本页http://busypeoples.github.io/post/react-component-lifecycle/组件的 render 方法在 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() , 开始渲染 child
3. <Child> componentWillMount()第一个 child
4. <Child> render()第一个 child
5. <Child> componentWillMount()第二个 child 的
6. <Child> render()第二个 child 的
7. <Child> componentDidMount()第一个 child 的(这些只会在树中的最后一个渲染运行后开始)
8. <Child> componentDidMount()第二个 child 的
9. <Parent> componentDidMount() (这个只有在它的最后一个 child 运行后才会运行 componentDidMount )

你可以找到一个codepen example here .