javascript - 在父组件 `componentDidMount` 生命周期调用 ReactDOM.render

Question

我只是好奇这个。我在下面写了一个演示:

class ChildComponent extends React.Component{
    componentWillMount() {
        console.log('ChildComponent will mount');
    }
    componentDidMount() {
        console.log('ChildComponent did mount');
    }
    render() {
        console.count('ChildComponent render');
        return <div>
            ChildComponent
        </div>
    }
}

class ParentComponent extends React.Component{
    componentWillMount() {
        console.log('ParentComponent will mount');
    }
    componentDidMount() {
        console.log('ParentComponent did mount')
        ReactDOM.render(
            <ChildComponent/>,
            document.getElementById('content')
        )
    }
    render() {
        console.count('ParentComponent render');
        return <div id='parent'>
            ParentComponent
            <div id='content'></div>
        </div>
    }
}

ReactDOM.render(
  <ParentComponent />,
  document.body
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

//normal way:
//ParentComponent will mount
//ParentComponent render: 1
//ChildComponent will mount
//ChildComponent render: 1
//ChildComponent did mount
//ParentComponent did mount

//ReactDOM.render way:
//ParentComponent will mount
//ParentComponent render: 1
//ParentComponent did mount
//ChildComponent will mount
//ChildComponent render: 1
//ChildComponent did mount

看来可行!但是我发现了这两种方式的区别。生命周期执行顺序不同。但是，还有其他区别吗？我的意思是，也许在某些情况下，ReactDOM.render 方式会导致麻烦或错误。

我还发现，如果使用开发工具检查浏览器中的元素，您会发现 ParentComponent 和 ChildComponent< 中的 data-reactroot 属性 根节点。而正常的渲染方式，它只是消失在 ParentComponent 根节点。

Answer 1

在正常情况下，我们会这样使用。

<ParentComponent>
    <ChildComponent />
</ParentComponent>

所以 ChildComponent 是 ParentComponent 的一部分。所以 child 的 componentDidMount 将在 parent 之前运行。只有当 child 已经安装时， parent 才会完成。

如果您在父组件的 ComponentDidMount 方法中渲染 ChildComponent。这意味着 ParentComponent 不包含 ChildComponent。您似乎使用 jQuery 来更改已安装组件的某些内容。所以顺序是父组件首先完成挂载，然后是 ChildComponent