React.js, ¿Es `DOMContentLoaded` igual a `componentDidMount`?

Posteriormente a indagar en varios repositorios y páginas de internet finalmente hemos descubierto la solución que te enseñaremos pronto.

Solución:

los DOMContentLoaded el evento es exclusivo hasta cuando se carga toda la página HTML. Por lo tanto, este evento solo se dispara una vez y solo una vez, durante toda la vida útil de la página web. componentDidMount, por otro lado, se llama cuando se procesa un componente React. Por lo tanto, es completamente posible que componentDidMount para ser llamado varias veces, aunque para instancias completamente diferentes de la misma clase de componente.

Y sí, el DOM del navegador siempre está en “estado listo”, en el momento en que un componentDidMount se llama evento.

la reacción componentDidMount es despedido antes del DOMContentLoaded y el DOM está listo aquí.

Eche un vistazo al inicio de sesión de la consola en esta demostración: http://codepen.io/PiotrBerebecki/pen/EgdkXB

Registra lo siguiente:

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!

Código completo:

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 (
      

        React rendered!
      
    );
  



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


ReactDOM.render(
  ,
  document.getElementById('app')
);


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

Si conservas alguna vacilación y capacidad de afinar nuestro artículo eres capaz de realizar una aclaración y con placer lo analizaremos.

---

---

Utiliza Nuestro Buscador