El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Hooks a React Native

Següent ►
►

Els hooks són una característica introduïda a React 16.8 que permeten utilitzar l'estat i altres característiques de React sense escriure una classe. En aquest mòdul, aprendrem com utilitzar els hooks a React Native per gestionar l'estat, els efectes secundaris i altres funcionalitats.

Continguts

  1. Introducció als hooks
  2. useState
  3. useEffect
  4. useContext
  5. useReducer
  6. Exercicis pràctics
  7. Conclusió

Introducció als hooks

Els hooks permeten utilitzar l'estat i altres característiques de React en components funcionals. Els hooks més comuns són useState i useEffect.

Avantatges dels hooks

  • Simplicitat: Els components funcionals són més fàcils de llegir i escriure.
  • Reutilització de la lògica: Els hooks permeten reutilitzar la lògica de l'estat entre components.
  • Millor rendiment: Els components funcionals amb hooks poden ser més eficients que les classes.

useState

El hook useState permet afegir estat a un component funcional.

Exemple

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

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

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

Explicació

  • useState(0): Inicialitza l'estat count a 0.
  • setCount: Funció per actualitzar l'estat count.
  • onPress={() => setCount(count + 1)}: Incrementa el valor de count en 1 quan es prem el botó.

useEffect

El hook useEffect permet executar efectes secundaris en components funcionals, com ara sol·licituds de dades, subscripcions o manipulacions del DOM.

Exemple

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <View>
      <Text>Data: {data ? JSON.stringify(data) : 'Loading...'}</Text>
    </View>
  );
};

export default DataFetcher;

Explicació

  • useEffect(() => { ... }, []): Executa l'efecte només una vegada després del primer renderitzat.
  • fetch('https://api.example.com/data'): Sol·licita dades d'una API.
  • setData(data): Actualitza l'estat data amb les dades obtingudes.

useContext

El hook useContext permet accedir al context de React en components funcionals.

Exemple

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

const MyContext = React.createContext();

const Display = () => {
  const value = useContext(MyContext);

  return (
    <View>
      <Text>Value: {value}</Text>
    </View>
  );
};

const App = () => {
  return (
    <MyContext.Provider value="Hello, World!">
      <Display />
    </MyContext.Provider>
  );
};

export default App;

Explicació

  • React.createContext(): Crea un context.
  • useContext(MyContext): Accedeix al valor del context MyContext.
  • <MyContext.Provider value="Hello, World!">: Proporciona el valor del context als components fills.

useReducer

El hook useReducer és una alternativa a useState per gestionar l'estat complex.

Exemple

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

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <View>
      <Text>Count: {state.count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'increment' })} />
      <Button title="Decrement" onPress={() => dispatch({ type: 'decrement' })} />
    </View>
  );
};

export default Counter;

Explicació

  • useReducer(reducer, initialState): Inicialitza l'estat amb initialState i retorna l'estat actual i la funció dispatch.
  • dispatch({ type: 'increment' }): Envia una acció per incrementar el comptador.
  • dispatch({ type: 'decrement' }): Envia una acció per decrementar el comptador.

Exercicis pràctics

Exercici 1: Crear un component de comptador amb useState

Crea un component que mostri un comptador i dos botons per incrementar i decrementar el valor del comptador.

Solució

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

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

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
    </View>
  );
};

export default Counter;

Exercici 2: Utilitzar useEffect per obtenir dades d'una API

Crea un component que obtingui dades d'una API i les mostri en pantalla.

Solució

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <View>
      <Text>Data: {data ? JSON.stringify(data) : 'Loading...'}</Text>
    </View>
  );
};

export default DataFetcher;

Conclusió

En aquest mòdul, hem après com utilitzar els hooks a React Native per gestionar l'estat, els efectes secundaris i altres funcionalitats. Els hooks com useState, useEffect, useContext i useReducer ens permeten escriure components funcionals més simples i eficients. Practica amb els exercicis proporcionats per consolidar els teus coneixements i prepara't per al següent mòdul.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats