Propiedades y estado de los componentes React

En este artículo me gustaría despejar una de las dudas más comunes para los desarrolladores que empiezan con React. Intentaremos comprender las diferencias que existen entre las propiedades o props y el estado o state de los componentes. Al fin y al cabo realizan una función similar pero con algunas diferencias.

 

propiedades-estado-componentes-react

 

Contexto

Teniendo en cuenta que la principal función de un componente React es la de traducir datos y pintarlos en un HTML, podemos decir que tanto props como state constituyen los datos en bruto de dicho componente.

Tanto las props como el state son objetos JavaScript simples y los cambios en ambos desencadenan la ejecución del método render() del componente, entonces, ¿cuándo utilizamos props y cuándo  state?

La respuesta es sencilla. Si un componente va a necesitar modificar alguno de sus atributos en algún momento de su vida, entonces ese atributo debe formar parte de su estado, de lo contrario será una propiedad de dicho componente.

 

Props

Las propiedades de un componente se pueden definir como los atributos de configuración para dicho componente. Son recibidos desde un nivel superior (normalmente al instanciar el componente) y por definición son inmutables, es decir, un componente no puede cambiar sus propias props.

Existen varias formas de pasar props a un componente.

// Regular way 
<Component foo={ x } baz={ y } />;

// Spread attributes 
let props = {}; 
props.foo = x; 
props.baz = y; 
<Component { ...props } />;

// Combined way 
<Component { ...props } foo={ 'nice' } />;

 

State

Podríamos definirlo como una representación del componente en un punto en el tiempo, una instantánea del componente. El state de un componente se iniciará con un valor por defecto pero este valor si podrá mutar durante la vida del componente.

No tenemos porque definir estados para un componente, son opcionales, y al contrario que ocurre con las props, un componente puede gestionar su propio state. Pero debemos ser cautos a la hora de utilizar estados ya que su uso, citando a la propia docu, aumenta la complejidad y reduce la previsibilidad. Se debe evitar tener demasiados componentes con estados, sobre todo tratándose de aplicaciones grandes.

“Try to keep as many of your components as possible stateless”

La manera habitual de informar a un componente React que sus datos han cambiado, es a través de la llamada al método setState(). Este método recibe un objeto JavaScript plano, combina los nuevos datos en el state y re-renderizará el componente. Cuando el render finalize se ejecutará un callback si ha sido especificado.

this.setState( { key: 'value' } );

Otro método relacionado con el estado de los componentes es replaceState. Poco que contar de el, tan solo que es similar a setState pero este eliminará cualquier clave preexistente que no esté definida en el nuevo estado.

Nota: Este método no está disponible en la sintaxis de clase de ES6 y puede ser eliminado en futuras versiones de React.

 

Seteando propiedades y estado en un componente

Podemos setear valores por defecto para las propiedades y el estado de un componente gracias a que React proporciona dos métodos para esto: getInitialState y getDefaultProps. A través de ellos podemos agregar valores que que serán utilizados como valor inicial en nuestro componente.

De momento no me quiero extender en este punto ya que en breve hablaré más a fondo sobre los componentes y sobre su ciclo de vida (del que forman parte estos dos métodos).

Hasta la próxima!

 

  • Pingback: Ciclo de vida componentes React • Blog de Built by Edgar()

  • Wili Wonka

    Te has dejado el tuto a medias..

    Falta definir como se llama a esa variable en el render() { (ej)

    this.setState( { key: ‘value’ } );

    return (

    >

    );

    • La verdad, no entiendo lo que comentas… ¿A que variable te refieres?
      Si quieres acceder a cualquier propiedad del estado del componente es tan sencillo como; this.state.propertyName. Lo que si te puedo decir es que como intentes setear el estado dentro del método render te va a ‘explotar’.

  • Lucas Michailian

    Muy buen tutorial !

  • Buen tuto! bastante claro! ahora sigo chusmeando tu blog. saludos!

  • Sebastian M

    Awesome!

  • Sebastian M

    me surgió una pregunta. entonces las props se puede modificar?

    • Sebastian M

      Me respondo yo mismo xD la manera de modificar las props es que el componente padre ejecute una renderizacion del componente hijo y le pase nuevas props.

  • José

    Mejor imposible!