1
私はこれについて興味があります。私は以下のデモを書く：親コンポーネント '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
それは作品です！しかし、私は2つの方法の違いを発見しました。ライフサイクルの実行順序が異なります。しかし、他の違いはありますか？つまり、ReactDOM.renderの方法で問題やエラーが発生する場合があります。
また、ブラウザの開発ツールで要素を調べると、ParentComponentとChildComponentルートノードの両方のdata-reactrootプロパティが見つかることがわかりました。そして通常のレンダー方法では、それはちょうどParentComponentルートノードで消えます。