Introducció

En aquest tema, explorarem els conceptes d'estat i cicle de vida en React Native. Aquests conceptes són fonamentals per crear aplicacions dinàmiques i interactives. Aprendrem com gestionar l'estat dels components i com utilitzar els mètodes del cicle de vida per controlar el comportament dels components en diferents etapes del seu cicle de vida.

Estat en React Native

Què és l'estat?

L'estat és un objecte que conté dades que poden canviar durant el cicle de vida d'un component. A diferència de les props, que són immutables, l'estat és mutable i pot ser actualitzat utilitzant el mètode setState.

Exemple bàsic d'ús de l'estat

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

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

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.incrementCount} />
      </View>
    );
  }
}

export default Counter;

Explicació del codi

Constructor: El constructor inicialitza l'estat del component amb un valor inicial.
Mètode incrementCount: Aquest mètode actualitza l'estat utilitzant setState.
Render: El mètode render mostra el valor actual de l'estat i un botó per incrementar-lo.

Mètodes del cicle de vida

Els mètodes del cicle de vida són funcions especials que es criden en diferents etapes del cicle de vida d'un component. Aquests mètodes permeten executar codi en moments específics, com ara quan un component es munta, s'actualitza o es desmunta.

Principals mètodes del cicle de vida

componentDidMount: Es crida després que el component s'hagi muntat (inserit en el DOM).
componentDidUpdate: Es crida després que el component s'hagi actualitzat.
componentWillUnmount: Es crida just abans que el component es desmunti i es destrueixi.

Exemple d'ús dels mètodes del cicle de vida

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

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

  componentDidMount() {
    // Simulació d'una crida a una API
    setTimeout(() => {
      this.setState({ data: 'Dades carregades!' });
    }, 2000);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      console.log('El component s\'ha actualitzat amb noves dades.');
    }
  }

  componentWillUnmount() {
    console.log('El component es desmuntarà.');
  }

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

export default LifecycleDemo;

Explicació del codi

componentDidMount: Simula una crida a una API que actualitza l'estat després de 2 segons.
componentDidUpdate: Comprova si les dades han canviat i mostra un missatge a la consola.
componentWillUnmount: Mostra un missatge a la consola just abans que el component es desmunti.

Exercicis pràctics

Exercici 1: Crear un component de temporitzador

Crea un component que mostri un temporitzador que s'incrementi cada segon.

Solució

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

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

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

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

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

export default Timer;

Exercici 2: Crear un component que mostri dades d'una API

Crea un component que faci una crida a una API i mostri les dades obtingudes.

Solució

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

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

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <View>
        {this.state.data ? (
          <Text>{this.state.data.title}</Text>
        ) : (
          <Text>Carregant...</Text>
        )}
      </View>
    );
  }
}

export default FetchData;

Conclusió

En aquest tema, hem après sobre l'estat i els mètodes del cicle de vida en React Native. Hem vist com gestionar l'estat dels components i com utilitzar els mètodes del cicle de vida per controlar el comportament dels components en diferents etapes del seu cicle de vida. Aquests conceptes són fonamentals per crear aplicacions React Native dinàmiques i interactives. En el proper tema, explorarem com gestionar esdeveniments en React Native.

Mètodes d'estat i cicle de vida

Introducció

Estat en React Native

Què és l'estat?

Exemple bàsic d'ús de l'estat

Explicació del codi

Mètodes del cicle de vida

Principals mètodes del cicle de vida

Exemple d'ús dels mètodes del cicle de vida

Explicació del codi

Exercicis pràctics

Exercici 1: Crear un component de temporitzador

Solució

Exercici 2: Crear un component que mostri dades d'una API

Solució

Conclusió

Curs de React Native

Mòdul 1: Introducció a React Native

Mòdul 2: Components bàsics i estilització

Mòdul 3: Estat i cicle de vida

Mòdul 4: Navegació

Mòdul 5: Xarxes i dades

Mòdul 6: Conceptes avançats

Mòdul 7: Desplegament i publicació

Mòdul 8: Projectes del món real