Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Comunicación y estado de los componentes en React

Alvaro YusteTorregrosa
  • Escrito por Alvaro YusteTorregrosa el 05 de Agosto de 2019
  • 3 min de lectura | Desarrollo Web
Comunicación y estado de los componentes en React
El reproductor de video será cargado en breves instantes.

Te explicamos en qué consiste la comunicación entre los componentes de React, cómo gestionan su estado interno y en qué consiste el ciclo de vida de un componente.

Propiedades

Las propiedades son la manera que tienen los componentes de React de comunicarse entre sí.

Cualquier componente puede invocar a otro, al que podemos definir como su hijo, y pasarle propiedades que conformarán datos que este va a recibir y poder gestionar de manera interna.

Este paso de propiedades es la forma que tienen de comunicarse entre ambos, y es una forma muy parecida a la que nos podemos encontrar en las funciones.

En general en la programación, y en particular en JavaScript, una función suele ser una capsula que recibe un parámetro de entrada y devuelve unos valores de salida.

Imagen 0 en Comunicación y estado de los componentes en React

Además, está la peculiaridad de las funciones puras, que se pueden definir como esas funciones cuya salida dependen solo de la entrada.

Las ventajas que nos aportan, además de ser funciones deterministas, es que son fáciles de testear y fáciles de optimizar.

Imagen 1 en Comunicación y estado de los componentes en React

 

De la misma manera existen componentes puros, componentes cuya salida va a depender únicamente de la entrada, dicho de otra forma, son componentes cuya vista final que acaban renderizando depende únicamente de los datos que se le han introducido desde arriba.

Imagen 2 en Comunicación y estado de los componentes en React

 

Estos componentes van a ser los más fáciles de manejar, ya que se van a comportar de manera muy determinista y nos van a dar resultados fáciles de testear y comprobar su correcto funcionamiento y optimizado.

La forma en la que llamamos a estos elementos, cuando hablamos de componentes, es propiedades a los elementos de entrada y la vista salida se suele especificar en forma de JSX, el código de marcado que representa bastante bien a la manera que tiene de escribirse React.

Imagen 3 en Comunicación y estado de los componentes en React

 

Estado

Una vez visto por encima que son las propiedades y qué papel juegan en la comunicación entre componentes de React, vamos a ver un poco donde entra en juego el estado, qué es el estado de un componente y cómo se conecta con estas propiedades.

Imagen 4 en Comunicación y estado de los componentes en React

El estado se sitúa dentro de este componente, y al final influye también en la salida, en forma de vista, que acabará devolviendo dicho componente.

Este estado puede recibir datos de las propiedades, gestionarlos, almacenarlos, etcétera, y acaba formando parte también de este renderizado después del procesamiento.

El componente se puede apoyar en este estado para interacciones, tanto por parte del usuario con la propia vista, como por parte de la lógica interna que hayamos podido definir para dicho componente.

Imagen 5 en Comunicación y estado de los componentes en React

 

El estado es lo que le da esa capacidad de ofrecer lógicas más complejas y más sofisticadas, y no solamente respondiendo a lo que se le ha introducido como propiedad.

Ciclo de vida de los componentes

Para acabar vamos a ver un poco por encima en qué consiste el ciclo de vida de los componentes, basándonos sobre todo en las dos partes que acabamos de ver de estado y propiedades.

Imagen 6 en Comunicación y estado de los componentes en React

 

Todo componente tiene un ciclo de vida, que empieza desde su nacimiento hasta su muerte, o en términos más específicos, desde que montamos el componente hasta que lo desmontamos, que son los términos que se emplean cuando hablamos de estos eventos del ciclo de vida.

Desde que sucede el primero hasta que acabamos en el último, pueden suceder eventos intermedios, que son los que van a configurar este ciclo de manera más concreta.

Imagen 7 en Comunicación y estado de los componentes en React

El primer evento importante es la recepción de nuevas propiedades. En el momento del montado el componente normalmente tiene unas propiedades concretas, pero a lo largo de su uso y de su ciclo de vida puede recibir nuevas.

Las propiedades pueden ir cambiando, por parte del padre que lo ha instanciado, y se van a lanzar eventos correspondientes a estas nuevas recepciones.

Estos eventos se pueden gestionar de manera interna en el componente, para reaccionar como consideremos oportuno.

Si simplemente tuviéramos esta estructura de componentes, podríamos estar hablando de un stateless component, porque no entra en juego el estado en ningún momento, y por tanto, tampoco tenemos eventos relacionados con él.

Si pasamos a hablar de lo que llamamos los stateful components, es el momento en el que este estado entra en juego.

Imagen 8 en Comunicación y estado de los componentes en React

Por tanto, aquí cuando cambiemos el estado, como hemos visto antes, por una lógica interna o por interacciones del usuario, vamos de nuevo a recibir unos eventos concretos que vamos a poder gestionar también para que el renderizado se ajuste a nuestras necesidades.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Renderizado en React

Renderizado en React

Desarrollo Web

05 de Agosto de 2019

Conoce los conceptos más importantes que debes conocer sobre el renderizado en React, lo que te ayudará a comprender mejor el funcionamiento de este framework a la hora de trabajar con el mismo.

...

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5 y CSS3
  • Curso de React JS
  • Curso de Angular 6

y 5 cursos más!

Duración: 40 horas y 47 minutos

Curso de React Native para principiantes

Curso de React Native para principiantes

curso

Con este curso aprenderás:

  • Aprenderás a realizar aplicaciones React Native en un nivel básicos.
  • Conocerás los distintos componentes de React Native.
  • Aprenderás JSX y su aplicación sobre React Native.

Duración: 5 horas y 13 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars