Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Operador de Spreed ES6 en React by Example: Props y setState

 Si eres un principiante de React, es posible que te hayas encontrado con la sintaxis de tres puntos ( ...) en muchos ejemplos de código de React, lo que puede haberlo confundido. De hecho, esta sintaxis es parte de ES6 y no React en sí misma y es utilizada por dos operadores: los operadores Spread y Rest.

El operador Spread le permite expandir un iterable como una cadena, objeto o matriz en sus elementos, mientras que el operador Rest hace lo inverso al reducir un conjunto de elementos en una matriz.

Ambos operadores tienen muchos casos de uso y actualmente la mayoría de los desarrolladores de JavaScript los utilizan para lograr los viejos trucos de JS sin complicar las cosas. La sintaxis de los puntos es compatible con todos los navegadores modernos, lo que significa que puede usarla con React sin preocupaciones. De hecho, dado que la mayoría de los desarrolladores de React utilizan sistemas de compilación y transpiladores como Babel para admitir las últimas funciones de JS, puede usar de manera segura la sintaxis de puntos en su código de React.

Pasar accesorios de React usando el operador de propagación en JSX

Puede usar el operador ES6 Spread para pasar accesorios a un componente de React. Tomemos un ejemplo de un componente que espera dos accesorios:

function App() {
  return <Hello firstName="Ahmed" lastName="Bouchefra" />;
}

Usando el operador Spread, escribiría el siguiente código en su lugar:

function App() {
  const props = {firstName: 'Ahmed', lastName: 'Bouchefra'};
  return <Hello {...props} />;
}

Según los documentos de React :

Puede difundir los atributos de accesorios para pasarlos en JSX utilizando el operador Spread que pasa todo el objeto de accesorios. Entonces, cuando su intención es pasar todo el objeto de accesorios, ¡está bien usarlo!

Esta es una sintaxis limpia, pero en algunos casos puede considerarse un anti-patrón, lo que significa que debe evitar su uso. ¿Pero por qué?

Cuando usa la ...propssintaxis, realmente expande el propsobjeto desde el componente principal, lo que significa que todos sus atributos se transmiten al componente secundario que puede que no los necesite todos. Esto hará que cosas como la depuración sean más difíciles.

También de acuerdo con los documentos:

Los atributos de propagación pueden ser útiles, pero también facilitan la transferencia de accesorios innecesarios a componentes que no se preocupan por ellos o la transferencia de atributos HTML no válidos al DOM. Recomendamos utilizar esta sintaxis con moderación.

Uso del operador de propagación con setState () para establecer el estado anidado

Supongamos que necesita usar el método setState () para actualizar el estado de su componente. Dado que setState()puede funcionar de forma asincrónica en casos de manu por razones de rendimiento. Debería escribir el siguiente código:

this.setState((state) => ({
  state1: state.state1 + 1,
}))

La state1variable que forma parte del estado de nuestro componente se incrementará en uno.

Ahora, supongamos que tenemos un estado con un objeto anidado en nuestro componente:

this.state = {
  stateObj: {
    attr1: '',
    attr2: '',
  },
}

Puede utilizar la sintaxis de Spread para actualizar el objeto de estado anidado.

this.setState(state => ({
  person: {
    ...state.stateObj,
    attr1: 'value1',
    attr2: 'value2',
  },
}))

El operador Rest en el ejemplo de React

La sintaxis de los puntos también se puede utilizar para llamar al operador Rest en ES6. Es sobre todo útil cuando desea evitar usar el argumentsobjeto para acceder a los argumentos pasados ​​a una función.

Este es un patrón de ejemplo que usa el operador Rest para crear rutas autenticadas en React usando React Router:

const AuthenticatedRoute = ({ ...rest }) => {
  const id = this.state;
  if (!id) {
    return <Redirect to= />;
  }
  return <Route {...rest} />;
};
// In Use
<AuthenticatedRoute
  path='/dashboard'
  data={this.state.data}
  render={() => (
    <SomeComponent someProps={this.someProps} />
  )}
/>

Referencias

Conclusión

Como resumen, hemos visto varias formas de usar el operador ES6 Spread en reaccionar, como por ejemplo:

  • Pasando accesorios a componentes secundarios,
  • Usar el operador Spread con el setState()método para configurar los datos anidados
  • Usando el operador Rest en React.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas