Si eres nuevo en React Native o React, te habrás encontrado con las palabras estado y accesorios. Comprender estos dos es esencial para desarrollar aplicaciones móviles dinámicas y adaptables. Profundizaremos en el estado y los accesorios en este artículo del blog, examinaremos sus diferencias y aprenderemos cómo manejar eficazmente el flujo de datos en su aplicación React Native.

¿Qué son el estado y los accesorios?

Estado

State es un objeto integrado que permite a los componentes crear y administrar sus propios datos. Contiene información que puede cambiar durante el ciclo de vida del componente. Siempre que el estado cambia, el componente se vuelve a representar para reflejar esos cambios.

• Mutable: El estado se puede cambiar usando setState (en componentes de clase) o useState gancho (en componentes funcionales).
• Local para el componente: El estado está completamente encapsulado y es local para el componente.
• Activa la nueva renderización: La actualización del estado hace que el componente se vuelva a renderizar.

Accesorios

Los accesorios, abreviatura de propiedades, son componentes de solo lectura. Son parámetros externos que se pasan a un componente, de forma similar a cómo se pasan los argumentos a una función.

• Inmutable: Los accesorios no pueden ser modificados por el componente que los recibe.
• Transmitido desde el componente principal: Los accesorios se pasan de los componentes principales a los componentes secundarios.
• Utilizado para Configuración: Configuran un componente y controlan su comportamiento externamente.

Comprender la diferencia

Comprender cuándo usar el estado y cuándo usar los accesorios es clave para administrar el flujo de datos en tu aplicación.

¿Por qué son importantes?

• El estado es esencial para los componentes que necesitan rastrear y responder a las entradas del usuario, las respuestas de API u otros datos dinámicos.
• Los accesorios permiten que los componentes sean reutilizables al aceptar datos y funciones dinámicas, lo que hace que su código sea más modular y fácil de mantener.

Gestión eficaz del flujo de datos

La gestión eficaz del flujo de datos garantiza que su aplicación se comporte de forma predecible y sea más fácil de depurar y mantener.

1. Flujo de datos unidireccional

React Native utiliza un flujo de datos unidireccional. Los datos se mueven de los componentes padre a hijo a través de accesorios. Esto hace que el flujo de datos sea más fácil de entender y depurar.

2. Levantando el estado

Cuando varios componentes necesitan acceder al mismo dato, es mejor elevar el estado al ancestro común más cercano. De esta manera, el estado compartido se puede transmitir a través de accesorios.

3. Uso de devoluciones de llamada para la comunicación entre padres e hijos

Para permitir que los componentes secundarios se comuniquen con los componentes principales, puede transmitir funciones (devoluciones de llamada) como accesorios. Luego, el componente secundario puede llamar a esta función para enviar datos al componente principal.

Ejemplos

Veamos algunos ejemplos de código para ilustrar estos conceptos.

Ejemplo 1: uso de accesorios

Componente principal (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

Componente secundario (Greeting.js):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

Explicación:

• El componente Aplicación pasa el nombre de propiedad al componente Saludo.
• El componente Saludo recibe accesorios y utiliza props.name para mostrar un mensaje personalizado.

Ejemplo 2: uso del estado

Componente de contador (Counter.js):

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    
      You clicked {count} times
       setCount(count   1)} />
    
  );
};

export default Counter;

Explicación:

• Usamos el gancho useState para inicializar el recuento a 0.
• La función setCount actualiza el estado.
• Cuando se presiona el botón, el conteo aumenta y el componente se vuelve a renderizar para mostrar el nuevo conteo.

Ejemplo 3: Levantar el estado

Componente principal (TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
      
      
    
  );
};

export default TemperatureConverter;

Componente secundario (TemperatureInput.js):

import React from 'react';
import { TextInput, Text } from 'react-native';

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:
      
    >
  );
};

export default TemperatureInput;

Explicación:

• La temperatura y la escala del estado compartido se elevan al componente TemperatureConverter.
• Los componentes TemperatureInput reciben accesorios y comunican los cambios al padre a través de devoluciones de llamada.

Mejores prácticas

1. Mantenga los componentes sin estado cuando sea posible

Los componentes sin estado son más fáciles de probar y depurar. Utilice accesorios para pasarles datos.

2. Minimizar el estado

Utilice el estado únicamente cuando sea necesario. Demasiados componentes con estado pueden hacer que tu aplicación sea más difícil de administrar.

3. Evite la mutación de estado directa

Nunca mutes el estado directamente. Utilice siempre setState o la función de actualización de useState.

4. Utilice PropTypes para la verificación de tipos

Utilice PropTypes para documentar los tipos previstos de propiedades pasadas a los componentes.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. Utilice la API de contexto para el estado global

Para datos a los que muchos componentes deben acceder en diferentes niveles de anidamiento, considere usar la API de contexto.

Errores comunes que se deben evitar

• Estado mutante directamente:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• Uso de accesorios para modificar el estado principal directamente:

Los componentes secundarios no deben intentar modificar los accesorios o el estado principal directamente. Utilice devoluciones de llamada.

Conclusión

Comprender y gestionar eficazmente el estado y los accesorios es esencial para cualquier desarrollador de React Native. Al dominar estos conceptos, podrá crear aplicaciones que no solo sean funcionales sino también limpias, eficientes y fáciles de mantener.

Recordar:

• Estado es para datos que cambian con el tiempo y se administran dentro del componente.
• Los accesorios sirven para pasar datos y funciones al árbol de componentes.

Tómate el tiempo para practicar estos conceptos en tus proyectos y verás una mejora significativa en tu flujo de trabajo de desarrollo.