React props vs state - Diferencias y patrones de diseño

1. React state
2. React props
3. Conexión entre state y props en React
4. Cuándo usar state vs. props en React

React es uno de los frameworks JavaScript más fáciles de aprender. Sin embargo, esta biblioteca presenta algunos conceptos que pueden parecer confusos al principio. Por ejemplo, muchos novatos tienen dificultades para entender la diferencia entre props y state. En este artículo, aprenderá por qué ambos objetos son necesarios y cómo encontrar el mejor uso para ellos.

React state

El concepto de estado no es exclusivo de React u otros marcos de JavaScript que lo utilizan. Incluso algunas aplicaciones creadas con JavaScript vanilla pueden tener un estado. En React, el concepto es un poco diferente pero se basa en el mismo principio.

Cada componente de React mantiene su objeto de estado local. La gestión estatal ocurre internamente. El objeto de estado es mutable; mutarlo es la clave para desarrollar componentes dinámicos de React que cambian en respuesta a las acciones del usuario.

El componente padre no puede mutar el estado de sus hijos. Puede pensar en los valores de estado como variables locales en las funciones simples de JavaScript. Estas variables están limitadas al alcance de la función.

En React, el propósito principal del objeto de estado es simplificar el mantenimiento de todos los datos que alimentan nuestras aplicaciones dinámicas. Cualquier cambio en los valores del objeto de estado desencadenará una nueva representación del componente. De esta manera, cuando cambia la entrada del usuario, la vista del usuario siempre se actualizará instantáneamente.

React props

El objeto props (abreviatura de propiedades) se usa para compartir los datos de los componentes principales con sus hijos. Puede pensar en props como la configuración que se pasa al componente para personalizar su comportamiento. Imagine que tiene un componente <Bargraph/> que genera una imagen. Tales componentes requieren números para representar un gráfico. Cada gráfico muestra datos diferentes, que se pueden introducir a través de props. Este es solo un ejemplo de cómo los props facilitan la reutilización del componente.

Cada componente recibe un objeto props, que es inmutable dentro del componente. Sin embargo, al igual que puede pasar diferentes argumentos a funciones, muchas instancias del mismo componente pueden recibir diferentes valores a través de props.

Debajo del capó, React usa el método React.createElement() para crear componentes de React y pasar las props. Sin embargo, los desarrolladores de React tienden a usar una sintaxis JSX más familiar para crear aplicaciones React. Esta sintaxis similar a HTML proporciona una forma más legible de pasar las props:

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

Esta es una demostración bastante simple de cómo funcionan los props. Primero, definimos un componente hijo. Como puede ver, el componente hijo no mantiene su estado. Solo lee los datos que se le pasan a través de las props.

A continuación, tenemos un componente padre. A diferencia del componente hijo, utiliza los datos de su objeto state para transmitirlo como un accesorio. Como puede ver, la sintaxis JSX no es la misma que la del HTML normal.

React props Desestructuración

Como puede ver en el ejemplo anterior, cada componente funcional acepta un argumento props. Se puede acceder a los datos almacenados en el objeto props leyendo la propiedad con el mismo nombre que el atributo en JSX.

Una forma más sencilla sería desestructurar los props dentro de la definición de la función. Aquí hay un ejemplo de un componente funcional Graph con props desestructurados:

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

Esto le permite usar una sintaxis más simple e incluso establecer valores de propiedad predeterminados. Si el componente secundario no recibe ningún apoyo, el componente puede leer el valor predeterminado en su lugar.

Conexión entre state y props en React

Como mencionamos anteriormente, dentro del componente React, el objeto props es estrictamente inmutable. Sin embargo, hay una advertencia: los componentes secundarios pueden mutar el estado en el componente principal, que se utiliza como fuente de datos que se pasan a través de las props de regreso al secundario. Si esto es difícil de comprender, examinemos este ejemplo de código:

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

En este ejemplo, todavía tenemos los mismos dos componentes que usamos antes. Pasamos un controlador de eventos a través del props. Luego usamos el mismo controlador para actualizar la propiedad color en el estado del componente principal. Una vez que el valor en el estado del componente padre ha cambiado, se volverá a renderizar y pasará un valor de color actualizado a nuestro componente hijo.

Esto puede parecer que el componente hijo actualiza sus propios props, pero en este ejemplo, en realidad usa el controlador de eventos pasado a través de los props para actualizar la fuente de sus propios props: el valor de la propiedad color en el estado del componente principal.

Aquí hay un enlace a código de reproducción. Pruébelo usted mismo: escriba el color en el campo de texto y vea qué sucede.

Este es un excelente ejemplo de cómo las props y el state están interconectados. El estado del componente padre suele ser la fuente de datos que se transmite a todos sus hijos a través de las props.

En nuestro ejemplo, el valor de estado almacenado en la propiedad de estado bgColor se convierte en una propiedad color.

Este ejemplo muestra que state y props son solo dos formas de almacenar los datos y administrar su flujo.

Cuándo usar state vs. props en React

No es una elección de uno u otro - es común que los componentes mantengan el state y también reciban props. Los datos almacenados en el estado a menudo se convierten en props para los componentes de los niños. Los props no se limitan a los datos, también pueden incluir funciones de devolución de llamada.

Para crear una aplicación React que sea fácil de administrar, use el estado de los componentes que están arriba en el árbol de componentes. Todos los demás componentes deben ser apátridas y recibir los datos necesarios a través de los props. Se prefieren los componentes sin estado porque son más fáciles de leer y probar.

En resumen, tanto state como props son necesarios, y props no serían tan efectivos sin el estado. Generalmente, es mejor utilizar componentes con estado para el manejo de eventos y el procesamiento de datos, mientras que los componentes sin estado son mejores para la visualización y el formateo.