React.js, Ist `DOMContentLoaded` gleich'componentDidMount`?

Question

Leute sagen immer, dass Sie die dom in componentDidMount bekommen können.

Ist das componentDidMount ist gleich mit DOMContentLoaded oder bedeutet, wenn componentDidMount, die dom ist immer bereit?

Answer 1

Das DOMContentLoaded Ereignis ist exclusiv zu, wenn die entire HTML page loads. Daher wird dieses Ereignis nur einmal während der gesamten Lebensdauer der Webseite ausgelöst. componentDidMount wird andererseits aufgerufen, wenn eine React-Komponente gerendert wird. Daher ist es durchaus möglich, dass componentDidMount mehrmals aufgerufen wird, wenn auch für ganz andere Instanzen der Klasse derselben Komponente.

Und ja, das DOM des Browsers befindet sich immer im "Bereitschaftszustand", zu dem Zeitpunkt, zu dem ein componentDidMount Ereignis aufgerufen wird.

Answer 2

Die Reaktion componentDidMount wird vor der DOMContentLoaded gefeuert und das DOM ist hier fertig.

einen Blick auf Konsolenprotokoll in dieser Demo haben: http://codepen.io/PiotrBerebecki/pen/EgdkXB

Es protokolliert die folgenden:

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! 

Voll Code:

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); 
});