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

我对此很好奇。我在下面写一个演示：

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方式会引起麻烦或错误。

我还发现，如果在浏览器中使用开发工具检查元素，则会发现data-reactroot和ParentComponent根节点中的ChildComponent属性。和普通的渲染方式一样，它只会在ParentComponent根节点中消失。

最佳答案

通常，我们会这样使用。

<ParentComponent>
    <ChildComponent />
</ParentComponent>

因此ChildComponent是ParentComponent的一部分。因此，子级componentDidMount将在父级之前运行。只有在孩子上架后，父母才会完成。

如果在父方法ChildComponent中渲染ComponentDidMount。这表示ParentComponent不包含ChildComponent。似乎您使用jQuery更改了已安装组件的某些内容。因此顺序将是父级将首先完成安装，然后ChildComponent

关于javascript - 在父组件componentDidMount生命周期中调用ReactDOM.render，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39217845/