7 Conceptos que debes conocer en React - Conceptos Básicos

¿Cuáles son las Diferencias más resaltantes entre Shadow DOM y Virtual DOM?

Shadow DOM es una tecnología de navegador diseñada principalmente para evaluar variables y CSS en componentes web. El DOM virtual es un concepto implementado por bibliotecas en JavaScript sobre las API del navegador.

¿Qué son los componentes no controlados?

Los componentes no controlados son los que almacenan su propio estado internamente, y consulta el DOM usando una referencia para encontrar su valor actual cuando lo necesita.

Esto es un poco más como HTML tradicional. En el siguiente componente UserProfile, se accede a la entrada del nombre usando ref.

En la mayoría de los casos, se recomienda usar componentes controlados para implementar formularios

La alternativa son los componentes no controlados, donde los datos del formulario son manejados por el propio DOM.


¿Qué es Lifting State Up en React?

Cuando varios componentes necesitan compartir los mismos datos cambiantes, se recomienda elevar el estado compartido a su ancestro común más cercano. Eso significa que si dos componentes secundarios comparten los mismos datos de su principal, entonces mueva el estado al principal en lugar de mantener el estado local en ambos componentes secundarios.

¿Qué son los componentes de orden superior?

Un componente de orden superior (HOC) es una función que toma un componente y devuelve un nuevo componente.

Los llamamos componentes puros porque pueden aceptar cualquier componente secundario proporcionado dinámicamente, pero no modificarán ni copiarán ningún comportamiento de sus componentes de entrada.

HOC se puede utilizar para muchos casos de uso:

1. Reutilización de código, lógica y abstracción bootstrap.

2. Secuestro de procesamiento.

3. Abstracción y manipulación del Estado.

4. Manipulación de accesorios.

¿Qué es children prop?

Children es un accesorio (this.props.children) que le permite pasar componentes como datos a otros componentes, como cualquier otro accesorio que use. El árbol de componentes colocado entre la etiqueta de apertura y cierre del componente se pasará a ese componente como accesorio secundario.

Hay varios métodos disponibles en la API de React para trabajar con esta propiedad. Éstos incluyen.

React.Children.map,React.Children.forEach,React.Children.count,React.Children.only,React.Children.toArray.

¿Qué es la reconciliación?

Cuando las propiedades o el estado de un componente cambian, React decide si es necesaria una actualización DOM real comparando el elemento recién devuelto con el renderizado anteriormente. Cuando no son iguales, React actualizará el DOM. Este proceso se llama reconciliación.


¿Qué son los fragmentos?

Es un patrón común en React que se usa para que un componente devuelva múltiples elementos. Los fragmentos le permiten agrupar una lista.

¿Por qué los fragmentos son mejores que los divs de contenedores?

A continuación se muestra la lista de razones,

● Los fragmentos son un poco más rápidos y usan memoria de archivos al no crear un nodo DOM adicional. Esto solo tiene un beneficio real en árboles muy grandes y profundos.

● Algunos mecanismos CSS, como Flexbox y CSS Grid, tienen relaciones padre-hijo especiales, y agregar divs en el medio dificulta mantener el diseño deseado.

● El Inspector DOM está menos abarrotado.

Publicar un comentario

Artículo Anterior Artículo Siguiente