React.js、 `DOMContentLoaded`は` componentDidMount`と同じですか？

Question

人々はいつもdomをcomponentDidMountに得ると言っています。

componentDidMountはDOMContentLoadedと等しいか、またはcomponentDidMountのときには、domは常に準備ができていますか？

Answer 1

DOMContentLoadedイベントは、entire HTML page loadsの場合は、となり、となります。したがって、このイベントは、Webページの存続期間の全体を通して、1回だけ、一度だけ起動されます。他方、componentDidMountは、Reactコンポーネントがレンダリングされたときに呼び出されます。したがって、同じコンポーネントのクラスの全く異なるインスタンスであっても、componentDidMountが何度も呼び出される可能性があります。

はい、componentDidMountイベントが呼び出された時点で、ブラウザのDOMは常に「レディ状態」です。

Answer 2

DOMContentLoadedの前に反応componentDidMountが実行され、ここでDOMが準備されています。

は、このデモでコンソールログを見てください：http://codepen.io/PiotrBerebecki/pen/EgdkXB

それは次のように記録します

componentDidMount: React rendered! 
DOMContentLoaded before class: React rendered! 
DOMContentLoaded after class: React rendered! 
DOMContentLoaded in constructor: React rendered! 
DOMContentLoaded in render: React rendered! 
DOMContentLoaded in componentDidMount: React rendered! 
DOMContentLoaded after ReactDOM.render: React rendered! 

全コード：

document.addEventListener('DOMContentLoaded', function(event) { 
    console.log('DOMContentLoaded before class:', document.getElementById('app').textContent); 
}); 


class App extends React.Component { 
    constructor() { 
    super(); 
    document.addEventListener('DOMContentLoaded', function(event) { 
     console.log('DOMContentLoaded in constructor:', document.getElementById('app').textContent); 
    }); 
    } 

    componentDidMount() { 
    document.addEventListener('DOMContentLoaded', function(event) { 
     console.log('DOMContentLoaded in componentDidMount:', document.getElementById('app').textContent); 
    }); 
    console.log('componentDidMount:', document.getElementById('app').textContent); 
    } 

    render() { 
    document.addEventListener('DOMContentLoaded', function(event) { 
     console.log('DOMContentLoaded in render:', document.getElementById('app').textContent); 
    }); 
    return (
     <div> 
     React rendered! 
     </div> 
    ); 
    } 
} 


document.addEventListener('DOMContentLoaded', function(event) { 
    console.log('DOMContentLoaded after class:', document.getElementById('app').textContent); 
}); 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 


document.addEventListener('DOMContentLoaded', function(event) { 
    console.log('DOMContentLoaded after ReactDOM.render:', document.getElementById('app').textContent); 
});