React - 父组件 DidMount 早于子组件

Question

直到现在，我一直认为 React 生命周期是这样工作的：

<ComponentA>
  <ComponentB />
</ComponentA>

1. 组件A（组件WillMount）

   1.1。组件B（组件WillMount）

   1.2：组件B（componentDidMount）

2. ComponentA (componentDidMount)

因此，父级总是必须等待子级被渲染才能完成 DidMount 状态。

但是，我发现在我拥有的复杂组件上，这不会发生。

它调用：

1. 组件A (componentWillMount)

2. ComponentA (componentDidMount)

3. ComponentB (componentWillMount)

4. ComponentB (componentDidMount)

这真的会发生吗？ （或者我可能做错了什么）

如果 ComponentA 渲染而没有渲染它的子级 (ComponentB)，它应该在 DOM 中是什么？

Answer 1

经过努力调试，发现问题出在哪里：

我正在使用 SizeMe HOC 的其中一个儿童组件。

阅读该库的源代码，我检查了它的渲染创建“WrappedComponent”或“PlaceHolder”。 因此，它正在创建这个 PlaceHolder，使该组件被认为是 Mounted，但它还没有渲染我真正的孩子。

这里可以看到SizeMe.js code:

/**
 * As we need to maintain a ref on the root node that is rendered within our
 * SizeMe component we need to wrap our entire render in a sub component.
 * Without this, we lose the DOM ref after the placeholder is removed from
 * the render and the actual component is rendered.
 * It took me forever to figure this out, so tread extra careful on this one!
 */
const renderWrapper = (WrappedComponent) => {
  function SizeMeRenderer(props) {
    const {
      explicitRef,
      className,
      style,
      size,
      disablePlaceholder,
      ...restProps,
    } = props;
    const { width, height } = size;

    const toRender = (width === undefined && height === undefined && !disablePlaceholder)
      ? <Placeholder className={className} style={style} />
    : <WrappedComponent className={className} style={style} size={size} {...restProps} />;

    return (
      <ReferenceWrapper ref={explicitRef}>
        {toRender}
      </ReferenceWrapper>
    );
  }
  ...

所以，我可以假设是的，生命周期顺序就像我在第一个实例中假设的那样工作

Answer 2

我很好奇，所以我整理了一个simple example in jsfiddle

var Container = React.createClass({
  componentWillMount: function() {
    return console.log("Container will mount");
  },
  componentDidMount: function() {
    return console.log("Container did mount");
  },
  render: function() {
    return <div>{this.props.children}</div>;
  }
});

var Child = React.createClass({
  componentWillMount: function() {
    return console.log("Child will mount");
  },
  componentDidMount: function() {
    return console.log("Child did mount");
  },
  render: function() {
    return <div> Hello World </div>;
  }
});


ReactDOM.render(
  <Container>
    <Child />
  </Container>,
  document.getElementById('container')
);

这会产生输出

容器将挂载

孩子会坐骑

孩子确实骑马

容器确实挂载了

这符合您最初的期望。

不确定这是否对您有帮助。