Introducción

En React Native, el estado y el ciclo de vida de los componentes son conceptos fundamentales que permiten crear aplicaciones dinámicas y reactivas. En esta lección, aprenderemos cómo manejar el estado de los componentes y cómo utilizar los métodos del ciclo de vida para controlar el comportamiento de los componentes en diferentes etapas de su existencia.

Estado en React Native

El estado es un objeto que determina cómo se renderiza y se comporta un componente. A diferencia de las props, que son inmutables y se pasan desde el componente padre, el estado es mutable y se gestiona dentro del propio componente.

Definiendo el Estado

Para definir el estado en un componente de clase, se utiliza el constructor y se inicializa el estado con this.state.

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

class Contador extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contador: 0
    };
  }

  render() {
    return (
      <View>
        <Text>{this.state.contador}</Text>
        <Button
          title="Incrementar"
          onPress={() => this.setState({ contador: this.state.contador + 1 })}
        />
      </View>
    );
  }
}

export default Contador;

Actualizando el Estado

Para actualizar el estado, se utiliza el método setState. Este método acepta un objeto que se fusiona con el estado actual.

this.setState({ contador: this.state.contador + 1 });

Ciclo de Vida de los Componentes

El ciclo de vida de un componente se refiere a las diferentes etapas por las que pasa un componente desde su creación hasta su destrucción. React Native proporciona varios métodos del ciclo de vida que permiten ejecutar código en momentos específicos.

Métodos del Ciclo de Vida

componentDidMount(): Se invoca inmediatamente después de que un componente se monta (inserta en el árbol). Es un buen lugar para inicializar solicitudes de red o suscripciones.
componentDidUpdate(prevProps, prevState): Se invoca inmediatamente después de que una actualización ocurre. Este método no se llama para la primera renderización.
componentWillUnmount(): Se invoca inmediatamente antes de que un componente se desmonte y destruya. Es un buen lugar para limpiar suscripciones o cancelar solicitudes de red.

Ejemplo de Ciclo de Vida

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

class CicloDeVida extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datos: null
    };
  }

  componentDidMount() {
    // Simulación de una solicitud de red
    setTimeout(() => {
      this.setState({ datos: 'Datos cargados' });
    }, 2000);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.datos !== this.state.datos) {
      console.log('El estado ha cambiado:', this.state.datos);
    }
  }

  componentWillUnmount() {
    console.log('El componente se desmontará');
  }

  render() {
    return (
      <View>
        <Text>{this.state.datos ? this.state.datos : 'Cargando...'}</Text>
      </View>
    );
  }
}

export default CicloDeVida;

Ejercicios Prácticos

Ejercicio 1: Contador con Ciclo de Vida

Crea un componente de contador que incremente el valor cada segundo utilizando los métodos del ciclo de vida.

Solución

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

class ContadorAutomatico extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contador: 0
    };
  }

  componentDidMount() {
    this.intervalo = setInterval(() => {
      this.setState({ contador: this.state.contador + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalo);
  }

  render() {
    return (
      <View>
        <Text>Contador: {this.state.contador}</Text>
      </View>
    );
  }
}

export default ContadorAutomatico;

Ejercicio 2: Fetch de Datos con Ciclo de Vida

Crea un componente que realice una solicitud de red para obtener datos cuando se monte y los muestre en la pantalla.

Solución

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

class DatosRemotos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datos: null,
      cargando: true
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => this.setState({ datos: data, cargando: false }))
      .catch(error => console.error(error));
  }

  render() {
    const { datos, cargando } = this.state;
    return (
      <View>
        {cargando ? (
          <Text>Cargando...</Text>
        ) : (
          <Text>{datos.title}</Text>
        )}
      </View>
    );
  }
}

export default DatosRemotos;

Conclusión

En esta lección, hemos aprendido sobre el estado y los métodos del ciclo de vida en React Native. Estos conceptos son esenciales para crear aplicaciones dinámicas y reactivas. Asegúrate de practicar con los ejercicios proporcionados para consolidar tu comprensión. En la próxima lección, exploraremos cómo manejar eventos en React Native.

Métodos de Estado y Ciclo de Vida

Introducción

Estado en React Native

Definiendo el Estado

Actualizando el Estado

Ciclo de Vida de los Componentes

Métodos del Ciclo de Vida

Ejemplo de Ciclo de Vida

Ejercicios Prácticos

Ejercicio 1: Contador con Ciclo de Vida

Solución

Ejercicio 2: Fetch de Datos con Ciclo de Vida

Solución

Conclusión

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real