React: Manipulando DOM en componentDidUpdate

Creado en 23 sept. 2016 · 3Comentarios · Fuente: facebook/react

Hola, esto es más como una pregunta, me gustaría abrir una discusión sobre la manipulación del DOM en componentDidUpdate .

Estoy creando un complemento de React. Tiene que hacer algunos cálculos DOM, porque CSS no es lo suficientemente poderoso como para cubrir todo lo que este complemento necesita hacer. El problema es que necesito ajustar algunas propiedades CSS dependiendo del valor de retorno de getBoundingClientRect () de algún otro elemento DOM representado por el mismo componente .

Entonces técnicamente tenemos 3 opciones:

1) Calcule getBoundingClientRect en componentDidUpdate y llame a setState con valores calculados. Tengo miedo del bucle infinito que podría suceder en ciertos casos, así que no iría por este.

2) Hazlo como en 1) y juega un poco con shouldComponentUpdate , pero esto parece muy complejo y no legible. Surgen muchas preguntas que dependen del caso de uso específico.

3) Actualice DOM desde componentDidUpdate. Esta es la solución que decidí elegir, funciona, es simple, estable y funciona según lo previsto. Sin embargo, siento que estoy al límite, así que quería comprobar que esta es una buena forma de hacer las cosas. ¿Está bien manipular DOM en componentDidUpdate ? Se llama cada vez que se hace render , y estoy de acuerdo con tirar mis cambios, porque para el próximo render modificaré DOM nuevamente.

Aquí hay una parte del código.

componentDidMount() {
  this.recalculateIndent();
}

componentDidUpdate() {
  this.recalculateIndent();
}

recalculateIndent() {
  // calculate indent based on getBoundingClientRect of some DOM reference
  this.textareaRef.style.textIndent = `${indent}px`;
}

render() {
   return (
   ...
   <textarea ref={ref => this.textareaRef = ref}/>
   ...
   );
}

Fuente

jvorcak

👍2

Comentario más útil

@jvorcak usando componentDidUpdate es el lugar correcto para manipular el DOM manualmente después de un render. Según los documentos:

Utilice esto como una oportunidad para operar en el DOM cuando el componente se haya actualizado.

Además, intentamos utilizar el rastreador de problemas únicamente para solicitudes de funciones e informes de errores. Las preguntas de uso deben dirigirse a otra parte, como discus.reactjs.org o StackOverflow. ¡Gracias!

aweary en 27 sept. 2016

👍8

Todos 3 comentarios

Cada solución (método del ciclo de vida del componente) es adecuada para una situación concreta, pero la manipulación del DOM es incorrecta. Utilice el estado y vuelva a renderizar el componente. Ejemplo de mi último caso de uso "encabezado fijo para la tabla + desplazamiento virtual para el cuerpo de la tabla", espero que esto le ayude a comprender el flujo correcto.

Constructor de componentes: valor de estado inicial: bodyHeight = 0 (o nulo, como desee).
Primero renderiza, renderiza el encabezado de la tabla pero el cuerpo de la tabla está vacío (0 filas).
componentDidMount: lee el encabezado y la altura del DOM del contenedor (+ algunos cálculos ...) y setState para bodyHeight (volver a renderizar).
Segundo render, bodyHeight! == 0, se renderizará el cuerpo de la tabla. Ahora, el parámetro de altura es conocido ( puedo configurarlo usando el accesorio de componente de "estilo", en lugar de la manipulación del DOM ), puedo agregar componentes para las filas.
Detector de eventos adicional para "cambiar el tamaño" (cambiar el tamaño del documento / navegador), agregar en componentDidMount, eliminar en componentWillUnmount. En el controlador de eventos, hago lo mismo que en componentDidMount: leer nuevos valores de altura DOM y setState.
No hay manipulación de DOM a mano, reaccionar hace el trabajo.