reactjs - React - 父组件DidMount早于子组件

Question

到目前为止，我一直认为 React 生命周期是这样工作的:

<ComponentA>
  <ComponentB />
</ComponentA>

1. 组件A(componentWillMount)

   1.1。组件B(componentWillMount)

   1.2:ComponentB(componentDidMount)

2. 组件A(componentDidMount)

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

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

它调用:

1. 组件A(componentWillMount)

2. 组件A(componentDidMount)

3. ComponentB(componentWillMount)

4. ComponentB(componentDidMount)

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

如果 ComponentA 渲染后尚未渲染其子组件(ComponentB)，那么 DOM 中应该有什么？

Answer 1

经过一番努力调试，我发现了问题所在:

我正在使用这个 SizeMe 的 child 组件之一HOC。

阅读该库的源代码，我检查了它的渲染创建了“WrappedComponent”或“PlaceHolder”。因此，它正在创建这个占位符，使该组件被视为已安装，而它仍然没有渲染我真正的 child 。

在这里你可以看到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>
    );
  }
  ...

所以，我可以假设是的，生命周期顺序按照我在第一个实例中假设的方式工作