Question

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

<ComponentA>
  <ComponentB />
</ComponentA>

ComponentA（componentWillMount）

1.1。 ComponentB（componentWillMount）

1.2：ComponentB（componentDidMount）
ComponentA（componentDidMount）

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

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

它叫：

ComponentA（componentWillMount）
ComponentA（componentDidMount）
ComponentB（componentWillMount）
ComponentB（componentDidMount）

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

如果ComponentA渲染而没有呈现它的子元素（ComponentB），它应该在DOM中是什么？

Answer 1

经过艰苦的调试，我发现了问题所在：

我正在使用其中一个chilren组件SizeMe HOC。

阅读该库的源代码我检查了它的渲染创建了＆＃34; WrappedComponent＆＃34;，或者＃34; PlaceHolder＆＃34;。因此，它正在创建这个PlaceHolder，当它仍然没有渲染我真正的孩子时，将该组件视为已安装。

您可以在此处查看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')
);

这会产生输出

容器将挂载

孩子将装载

孩子装了

容器已挂载

符合您最初的期望。

不确定这对你有帮助。

React - 父组件DidMount早于子

2 个答案: