DOM real/navegador:

DOM significa 'Modelo de objetos de documento'. Es una representación estructurada de HTML en la página web o aplicación. Representa toda la interfaz de usuario. (Interfaz de usuario) del aplicación web como estructura de datos de árbol.

Es un representación estructural de elementos HTML de una aplicación web en palabras simples.

Siempre que haya algún cambio en el estado de la interfaz de usuario de la aplicación, DOM se actualiza y representa el cambio. El DOM se representa y manipula con cada cambio para actualizar la interfaz de usuario de la aplicación, lo que afecta el rendimiento y lo ralentiza.

Por lo tanto, con muchos componentes de la interfaz de usuario y la compleja estructura de DOM, Se actualizará más caro ya que es necesario volver a renderizarlo con cada cambio.

El DOM se constituye como una estructura de datos en árbol. Consiste en el nodo para cada elemento de interfaz de usuario presente en el documento web.

char e int java

Actualizando el DOM:

Si sabemos algo sobre JavaScript, es posible que veas personas usando el 'obtenerElementById()' o 'getElementByClass()' Método para modificar el contenido del DOM.

Siempre que se produce algún cambio en el estado de su aplicación, el DOM se actualiza para reflejar el cambio en la interfaz de usuario.

Cómo Virtual DOM acelera las cosas:

Cuando se agregan elementos nuevos a la aplicación, se crea el DOM virtual, representado como un árbol. Cada elemento de la aplicación es un nodo en el árbol.

Por tanto, siempre que hay un cambio en la posición de un elemento, se crea un nuevo DOM virtual. El árbol DOM virtual más nuevo se compara con el más reciente, donde se anotan los cambios.

Encuentra la forma posible de realizar estos cambios mediante el DOM real. Luego, los elementos actualizados se volverían a representar en la página.

Cómo ayuda Virtual DOM en React:

Todo en React se observa como un componente, un componente funcional y un componente de clase. Un componente tiene un estado. Cada vez que cambiamos algo en el archivo JSX, en pocas palabras, cada vez que cambia el estado del componente, la reacción actualiza su árbol DOM virtual.

React mantiene dos DOM virtuales cada vez. El primero contiene el DOM virtual actualizado y el otro es una versión preactualizada del DOM virtual actualizado. Compara la versión previamente actualizada del DOM virtual actualizado y encuentra qué se cambió en el DOM, como qué componentes se cambiarán.

Aunque pueda parecer ineficaz, el coste ya no lo es, ya que actualizar el DOM virtual no puede llevar mucho tiempo.

Al comparar el árbol DOM virtual actual con el anterior se conoce como 'desafiando'. Una vez que React sabe qué ha cambiado, actualiza los objetos en el DOM real. React utiliza actualizaciones por lotes para actualizar el DOM real. Los cambios en el DOM real se envían en lotes en lugar de enviar actualizaciones para un único cambio en el estado del componente.

Volver a renderizar la UI es la parte más costosa, y React logra hacerlo de manera más eficiente al garantizar que el Real DOM que recibe las actualizaciones por lotes vuelva a renderizar la UI. El proceso de convertir los cambios al DOM real se llama reconciliación.

Mejora el rendimiento y es la razón principal por la que a los desarrolladores les encanta reaccionar y su DOM virtual.

¿Qué es el DOM virtual de React?

El concepto de Virtual DOM viene a hacer que el rendimiento de Real DOM sea mejor y más rápido. Virtual DOM es un símbolo virtual del DOM.

Pero la principal diferencia es que cada vez, con cada cambio, el DOM virtual se actualiza en lugar del DOM real.

Por ejemplo, el real y dominio virtual se representa como un estructura de árbol. Cada elemento del árbol es un nodo. A nodo se agrega al árbol cuando se agrega un nuevo elemento a la interfaz de usuario de la aplicación.

Si la posición de algún elemento cambia, un nuevo Se crea el árbol DOM virtual. El DOM virtual calcula el número mínimo de operaciones en el DOM real para realizar cambios en el DOM real. Es eficiente y funciona mejor al reducir el costo y la operación de volver a renderizar todo el DOM real.

Ahora tenemos una comprensión normal del DOM real y virtual.

Veamos cómo Reaccionar funciona usando DOM virtual.

• Cada UI es un individuo componente, y cada componente tiene su estado.
• Reaccionar sigue patrones observables y observa los cambios de estados.
• Cada vez que se realiza algún cambio en el estado del componente, React actualiza el árbol DOM virtual pero no cambia el árbol DOM real.
• Reaccionar compara el versión actual del dominio virtual con el versión previa después actualización.
• React sabe qué objetos se modifican en el DOM virtuales. Reemplaza los objetos en el DOM real , llevando a manipulación mínima operaciones.
• Este proceso se conoce como 'diferenciación'. Esta imagen aclarará el concepto.

En la imagen, el azul oscuro círculos son los nodos que han sido cambiados. El estado de estos componentes ha cambiado. React calcula la diferencia entre la versión anterior y actual del árbol DOM virtual, y todo el subárbol principal se vuelve a representar para mostrar la interfaz de usuario que ha cambiado.

El árbol actualizado es lote actualizado (que las actualizaciones del DOM real se envían en lotes en lugar de enviar actualizaciones para cada cambio de estado) al DOM real.

Para profundizar en esto, necesitamos conocer la Reaccionar renderizado () función.

Luego, necesitamos conocer algunos de los aspectos importantes. características de Reaccionar.

JSX

JSX representa XML de JavaScript. Es un extensión de sintaxis de JS. Usando JSX, podemos escribir estructuras HTML en el archivo que contiene Código JavaScript.

Componentes

Los componentes son independiente y reutilizable de código. Cada interfaz de usuario en la aplicación React es un componente. Una sola aplicación tiene muchas componentes.

Los componentes son de dos tipos, componentes de clase y componentes funcionales.

Los componentes de clase tienen estado porque usan su 'estado' para cambiar la interfaz de usuario. Los componentes funcionales son componentes sin estado. Actúan como una función de JavaScript que toma un parámetro arbitrario llamado 'props'.

Ganchos de reacción Se han introducido para acceder a estados con componentes funcionales.

Métodos de ciclo de vida

Métodos de ciclo de vida son métodos importantes incorporado reaccionar, que operan sobre los componentes durante su duración en el DOM. Cada componente de React pasó por un ciclo de vida de eventos.

El método render() es el máximo utilizado método del ciclo de vida .

Es el único método dentro Componentes de la clase reaccionar . Entonces, en cada clase, se llama al componente render().

El método render() maneja la representación del componente por parte de la interfaz de usuario. El render() contiene toda la lógica que se muestra en la pantalla. También puede tener un nulo valor si no queremos mostrar nada en pantalla.

El ejemplo se muestra a continuación:

 class Header extends React.Component{ render(){ return React Introduction } } 

El ejemplo mostrará el JSX escrito en el render().

Cuando un estado o apuntalar se actualiza dentro del componente, prestar() devolverá un árbol diferente de elementos de React.

Al escribir el código en la consola o en el archivo JavaScript, sucederá lo siguiente:

• El navegador analiza el HTML para encontrar el nodo con el ID.
• Elimina el elemento hijo del elemento.
• Actualiza el elemento (DOM) con el 'valor actualizado'.
• Se recalcula CSS para nodos padre e hijo.
• Luego, actualice el diseño.

Finalmente, recorra el árbol en la pantalla.

jvm

Como sabemos, la actualización de la DOMINGO Implica cambiar el contenido. Está más apegado a ello.

Se utilizan algoritmos complejos para recalcular CSS y cambiar los diseños, lo que afecta el rendimiento.

Entonces, React tiene muchas formas de abordarlo, ya que utiliza algo conocido como DOM virtual.

cúpula de reacción

El paquete react-dom proporciona métodos específicos de DOM en el nivel superior de la aplicación para escapar de la ruta fuera del modelo React si es necesario.

 import * as ReactDOM from 'react-dom'; 

Si usas ES5 con npm, también debes escribir:

 var ReactDOM = require('react-dom'); 

El reaccionar-dom El paquete también proporciona módulos específicos para las aplicaciones de cliente y servidor:

• reaccionar-dom/cliente
• reaccionar-dom/servidor

El paquete reaccionar-dom exporta estos métodos:

• crearPortal()
• descargaSincronización()

Los métodos de reacción también se exportan:

• prestar ()
• hidratar ()
• encontrarDOMNodo()
• desmontarComponentAtNode()

Nota: Tanto la hidratación como el renderizado se han reemplazado con métodos de cliente más nuevos.

Soporte del navegador

React es compatible con todos los navegadores modernos y se requieren algunos polyfills para versiones anteriores.

Nota: No podemos admitir navegadores antiguos que no admitan métodos ES5, como Internet Explorer. Puede encontrar que las aplicaciones funcionan en los navegadores más recientes si se incluyen polyfills como es5-shim y es5-sham en la página, pero estará solo si toma el camino.

Referencia

crearPortal()

Creates Portal () El portal proporciona la forma de leer elementos secundarios en el nodo DOM, que existe fuera de la clasificación del componente DOM.

descargaSincronización()

Force React se actualiza simultáneamente en la devolución de llamada proporcionada. Garantiza que el DOM se actualice inmediatamente.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Nota:

• Utilizar con moderación. Flush Sync perjudicó significativamente el rendimiento.
• FlushSync forzará que los límites pendientes muestren el estado de reserva.
• Ejecuta efectos pendientes y aplica simultáneamente las actualizaciones antes de devolverlas.
• FlushSync descarga las actualizaciones fuera de la devolución de llamada para vaciar las actualizaciones de la devolución de llamada. Por ejemplo, Si hay actualizaciones pendientes de un clic, React puede eliminarlas antes de eliminar las actualizaciones en la devolución de llamada.

Referencia heredada

prestar()

 render(element, container[, callback]) 

Nota: Render se reemplaza con la creación de Root en React. Renderice un elemento React en el DOM en el contenedor proporcionado y proporcione una referencia al componente.

Si un elemento de React se renderizó previamente en cualquier contenedor, se realizaría una actualización y es necesario reflejar el último elemento de React.

Se ejecuta cuando se procesa el componente si se proporciona la devolución de llamada opcional.

Nota:

El método render() controla el contenido del nodo contenedor cuando pasa. Se reemplaza cualquier elemento DOM existente.

Render() no altera el nodo del contenedor (solo puede modificar los hijos del contenedor). Podría ser posible insertar un componente en un nodo DOM existente sin sobrescribir los elementos secundarios.

Render () actualmente hace referencia a la instancia raíz de ReactComponent.

Sin embargo, su valor de retorno se hereda y se puede evitar ya que, en algunos casos, las versiones futuras de React pueden generar componentes de forma asincrónica.

Si necesita una referencia al prototipo de ReactComponent, la mejor solución es adjuntar una referencia de recuperación al elemento.

Render() se utiliza para hidratar un contenedor renderizado en el servidor que está obsoleto. Usar hidratar raíz() en lugar de ello.

hidratar()

El hidrato se reemplaza con la raíz de hidrato.

Es exactamente como render() pero se usa para un contenedor cuyo contenido HTML es renderizado por ReactDOMServer. React intentará conectar los detectores de eventos al marcado actual.

 hydrate(element, container[, callback]) 

Nota:

React espera que el contenido renderizado sea idéntico entre el servidor y el cliente. Podemos corregir el contenido del texto, pero debemos tratar las inconsistencias como errores y corregirlas. En modo desarrollo, React advierte de la inconsistencia durante la hidratación.

No hay garantía de que las diferencias específicas se corrijan por discrepancias.

Es importante por razones de rendimiento en la mayoría de las aplicaciones y será demasiado costoso validar todas las banderas.

Supongamos que el atributo de un elemento o el contenido del texto inevitablemente difiere entre el servidor y el cliente (por ejemplo, la marca de tiempo ). En este caso, podemos silenciar la alerta agregando suprimirHydrationWarning = {verdadero} al elemento.

Si no es un elemento de texto, no puede intentar parchearlo para que siga siendo inconsistente hasta futuras actualizaciones.

Puede realizar un renderizado de dos pasadas si necesitamos proporcionar deliberadamente información diferente en el servidor y en el cliente. Los componentes que quedan en el cliente pueden leer variables de estado como this.state.isClient, donde se establecerá en verdadero en componenteDidMount().

descomprimir en Linux

El pase de render inicial hará lo mismo que el servidor, evitando inconsistencias, pero el pase adicional se realizará de forma sincrónica después de la hidratación.

Nota: Este enfoque hará que los componentes sean más lentos ya que lo hacen dos veces, así que utilícelo con cuidado.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Nota:

desmontarComponentAtNode ha sido reemplazado con raíz.desmontar() en Reaccionar. Borra el componente React montado del DOM y limpia sus controladores de eventos y su estado.

Si no se montó ningún componente en el contenedor, no puede hacer nada. Devuelve verdadero si no hay ningún componente montado y falso si no hay ningún componente que desmontar.

encontrarDOMNodo()

Nota: findDOMNode es una trampilla de escape que se utiliza para acceder al nodo DOM subyacente. Esta trampilla de escape se desaconseja en la mayoría de los casos porque perfora la abstracción del componente. Ha quedado obsoleto en StrictMode.

buscarDOMNodo(componente)

Si este componente se ha montado en el DOM, esto devuelve el elemento DOM del navegador nativo correspondiente. Este método es útil para leer valores del DOM, como valores de campos de formulario, y realizar mediciones de DOM. En la mayoría de los casos, puede adjuntar una referencia al nodo DOM y evitar el uso de findDOMNode.

Cuando un componente devuelve nulo o falso, findDOMNode devuelve nulo. Cuando un componente se representa en una cadena, findDOMNode devuelve un nodo DOM de texto que contiene ese valor. El componente puede devolver un fragmento con varios hijos en caso de que findDOMNode haya devuelto el nodo DOM correspondiente al primer hijo no vacío.

Nota:

findDOMNode solo funciona en componentes montados (es decir, componentes que se han colocado en el DOM). Si intenta llamar a esto en un componente que aún no se ha montado (como llamar a findDOMNode() en render() en un componente que aún no se ha creado), se generará una excepción.

findDOMNode no se puede utilizar en componentes de funciones.

elementos DOM

React implementa un sistema DOM independiente del navegador para el rendimiento y con compatibilidad entre navegadores. Aprovechamos esta oportunidad para limpiar algunas de las asperezas en la implementación DOM del navegador.

En React, todas las propiedades y atributos del DOM (incluidos los controladores de eventos) deben ser camelcase. Por ejemplo, el atributo tabindex de HTML corresponde al atributo de índice de pestaña en React.

Las excepciones son los atributos aria-* y data-*, que deben estar en minúsculas. Por ejemplo, puede tener una etiqueta de área como etiqueta de área.

Diferencias en atributos

Varios atributos funcionarán de manera diferente entre React y HTML:

comprobado

El atributo marcado es compatible con componentes de una casilla de verificación o radio de tipo. Es útil para fabricar componentes controlados. Puede utilizar esto para determinar si el componente está marcado o no.

DefaultChecked es la contraparte no marcada que determina que el componente se verifica la primera vez que se monta.

nombre de la clase

Para especificar la clase CSS, utilice el atributo className. Se aplica a todos los elementos DOM y SVG normales como, , etc.

Si usa React con componentes web (poco común), use el atributo de clase en su lugar.

peligrosamenteSetInnerHTML

Peligrosamente SetInnerHTML es el reemplazo de React para usar InnerHTML en el navegador DOM. Configurar el código HTML es arriesgado porque es fácil exponer a los usuarios a un ataque de secuencias de comandos entre sitios (XSS).

Entonces podemos configurar HTML directamente desde React, pero debes escribir SetInnerHTML de manera peligrosa y pasar un objeto con la clave __html para recordar que es peligroso.

comprobación nula de java

Por ejemplo:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

Los elementos de React usan htmlFor en su lugar, ya que for es una palabra reservada en JavaScript.

en cambio

El evento onChange se comporta como se esperaba; el evento se activa cada vez que se cambia un campo de formulario.

Intencionalmente no utilizamos el comportamiento existente del navegador porque el cambio es importante para su comportamiento y React depende del evento para manejar la entrada del usuario en tiempo real.

seleccionado

Si desea marcar como seleccionado, consulte el valor de esa opción en el valor de. Consulte 'Seleccionar etiqueta' para obtener instrucciones detalladas.

Nota:

En la mayoría de los casos, los nombres de las clases se refieren a clases definidas en una hoja de estilos CSS externa. Los estilos se utilizan en las aplicaciones React para agregar estilos calculados en el momento del renderizado. El atributo de estilo acepta el objeto JavaScript con propiedades camel en lugar de una cadena CSS.

se ajusta estilo DOM Propiedades de JavaScript, es más eficiente y evita XSS agujeros de seguridad.

Por ejemplo:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Tenga en cuenta que: los estilos no tienen prefijo automático. Para admitir navegadores más antiguos, debemos proporcionar propiedades de estilo:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Las claves de estilo son camel para corresponder al acceso a las propiedades en los nodos DOM desde JS. Los prefijos de proveedores MS comienzan con una letra mayúscula.

React agregará automáticamente un sufijo 'px' a algunas propiedades de estilo numérico en línea. Si queremos utilizar unidades distintas a 'px', especifique el valor como una cadena con la unidad deseada.

Por ejemplo:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Sin embargo, no todas las propiedades de estilo se convierten en cadenas de píxeles.

Suprimir alerta de contenido editable

Hay una advertencia si un elemento para niños está marcado como contenido editable, ya que no funcionará. El atributo suprime la advertencia.

Advertencia de supresión

Si utilizamos el renderizado de React del lado del servidor, es una advertencia cuando el servidor y el cliente renderizan con contenido diferente. Sin embargo, en casos excepcionales es difícil garantizar una coincidencia exacta. Por ejemplo, se espera que las marcas de tiempo difieran en el servidor o en el cliente.

Si establece la advertencia de supresión en verdadero, no advertirá sobre discrepancias entre los atributos y el contenido del elemento.

Sólo funcionaba a un nivel de profundidad y estaba destinado a ser utilizado como escape.

valor

El atributo de valor está diseñado por los componentes y. Puede usarlo para establecer el valor del componente.

Es útil para fabricar componentes controlados. defaultValue e igual a sin marcar establecen el valor del componente cuando se monta en serie.

Todos los atributos HTML soportados

Se admite cualquier atributo DOM personalizado y estándar.

React ha proporcionado una API centrada en JavaScript en el DOM. Y los componentes de React a menudo contienen accesorios personalizados y relacionados con DOM, y luego React usa las mismas convenciones de CamelCase que la API de DOM:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API