0
210
Vistas¿Cómo es exactamente el DOM virtual de React más rápido?
Entiendo que hay dos argumentos para que el DOM virtual de React sea más rápido:
Actualiza SOLAMENTE aquellos elementos que realmente necesitan ser actualizados (usando diff).
Agrupa las actualizaciones y, por lo tanto, actualizamos el DOM real solo una vez. Por lo tanto, el repintado también se realiza solo una vez, lo que de otro modo se habría realizado varias veces.
Tengo preguntas con respecto a estos dos puntos:
Hasta donde yo sé, todos los navegadores modernos son lo suficientemente eficientes como para actualizar solo los elementos necesarios en el DOM. Por ejemplo, si tengo dos etiquetas 'p' y cambio el texto en una de las etiquetas p haciendo clic en un botón, safari solo actualizará esa etiqueta p (he verificado esto usando flasheo de pintura). Entonces, ¿cómo es el punto 1 una ventaja si los navegadores ya lo están implementando?
¿Cómo procesa exactamente React las actualizaciones? Eventualmente, React también tendrá que usar la API DOM para actualizar el DOM real. Entonces, ¿por qué si usamos directamente la API DOM, los cambios no se procesarán por lotes, mientras que cuando React lo usa, se procesarán por lotes?
1 Respuestas
Responde la pregunta0
Una vez que React sabe qué objetos DOM virtuales han cambiado, React actualiza solo esos objetos, en el DOM real. Esto hace que el rendimiento sea mucho mejor en comparación con la manipulación directa del DOM real. Esto hace que React se destaque como una biblioteca de JavaScript de alto rendimiento.
Con respecto a la actualización por lotes:
React sigue un mecanismo de actualización por lotes para actualizar el DOM real. Por lo tanto, conduce a un mayor rendimiento. Esto significa que las actualizaciones del DOM real se envían por lotes, en lugar de enviar actualizaciones para cada cambio de estado.
El repintado de la interfaz de usuario es la parte más costosa, y React garantiza de manera eficiente que el DOM real reciba solo actualizaciones por lotes para repintar la interfaz de usuario.