reactjs - react - ¿Cuándo se dispara exactamente `componentDidMount`?

react meta tags

Question

Este es un problema recurrente que tengo con React. Se garantiza que el método componentDidMount se activará cuando el componente se renderice por primera vez, por lo que parece un lugar natural para tomar medidas DOM, como alturas y compensaciones. Sin embargo, muchas veces recibo lecturas de estilo incorrecto en este punto del ciclo de vida del componente. El componente está en el DOM, cuando rompo con el depurador, pero aún no está pintado en la pantalla. Me sale este problema con los elementos que tienen ancho / alto establecido en 100% en su mayoría. Cuando tomo medidas en componentDidUpdate , todo funciona bien, pero este método no se activará en el procesamiento inicial del componente.

Por lo tanto, mi pregunta es: cuándo se despide exactamente componentDidMount porque, obviamente, no se dispara después de que se realizan todas las pinturas del navegador.

EDITAR: Este problema de Stackoverflow trata el mismo tema:

También hace referencia a esta conversación github que explica lo que sucede.

Answer 1

Como sabrá, componentDidMount se activa solo una vez inmediatamente después de la representación inicial.

Como está tomando mediciones, parece que también desearía activar su medición cuando componentDidUpdate en caso de que sus mediciones cambien cuando su componente se actualice.

Tenga en cuenta que componentDidUpdate no se produce para el procesamiento inicial, por lo que es probable que necesite ambos eventos del ciclo de vida para desencadenar su manejo de mediciones. Vea si este segundo evento se dispara por usted y si tiene diferentes medidas.

En mi opinión, debe evitar usar setTimeout o requestAnimationFrame cuando sea posible.

React Ciclo de vida de referencia .

Answer 2

Dentro de un árbol de componentes de reacción, componentDidMount() se activa después de que también se hayan montado todos los componentes secundarios. Esto significa que cualquier componente componentDidMount() se activa antes de que su padre se haya montado .

Entonces, si desea medir la posición y el tamaño del DOM, etc., el uso de componentDidMount() de un componente secundario es un lugar / momento inseguro para hacer esto.

En su caso: para obtener una lectura precisa del 100% de los componentes de ancho / alto, un lugar seguro para tomar dichas mediciones sería dentro del componentDidMount() del componente de reacción superior .
100% es un ancho / alto relativo al padre / contenedor. Por lo tanto, las mediciones solo se pueden tomar después de que el padre haya sido montado también.

Answer 3

Se llama una sola vez cuando se monta el componente. Ese es el momento perfecto para realizar una solicitud asíncrona para obtener datos de una API. Los datos obtenidos se almacenarán en el estado del componente interno para mostrarlos en el método de ciclo de vida de render ().

Simple: se ejecuta después de las funciones de procesamiento

Answer 4

Si desea responder a algo que se está montando en el DOM, la forma más confiable de hacerlo es con una devolución de llamada de ref . Por ejemplo:

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}

Answer 5

puede intentar retrasar la lógica en componentDidMount() con requestAnimationFrame() . La lógica debe ocurrir después de la próxima pintura.

sin embargo, necesitaríamos saber más sobre su código para ver por qué no se han pintado los nodos. Nunca he encontrado ese problema. componentDidMount() activa justo después de agregar los nodos dom a la página, pero no necesariamente después de que se hayan pintado.