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

Context API

Següent ►
►

Introducció

La Context API de React és una eina poderosa que permet compartir dades entre components sense necessitat de passar explícitament les props a través de cada nivell de l'arbre de components. Això és especialment útil en aplicacions grans on moltes dades necessiten ser accessibles per molts components diferents.

Conceptes Clau

  • Context: Un objecte que permet compartir dades entre components sense necessitat de passar props manualment a través de cada nivell.
  • Provider: Un component que proporciona el context als seus fills.
  • Consumer: Un component que consumeix el context proporcionat pel Provider.

Creació d'un Context

Per crear un context, utilitzem la funció React.createContext(). Aquesta funció retorna un objecte amb dos components: Provider i Consumer.

import React from 'react';

// Creem el context
const MyContext = React.createContext();

Utilització del Provider

El Provider és un component que envolta els components que necessiten accedir al context. Proporciona el valor del context a tots els components fills.

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

// Creem el context
const MyContext = React.createContext();

const App = () => {
  return (
    <MyContext.Provider value="Hola, món!">
      <MyComponent />
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  return (
    <View>
      <MyContext.Consumer>
        {value => <Text>{value}</Text>}
      </MyContext.Consumer>
    </View>
  );
};

export default App;

Utilització del Consumer

El Consumer és un component que consumeix el valor del context proporcionat pel Provider. Utilitza una funció de renderització per accedir al valor del context.

const MyComponent = () => {
  return (
    <View>
      <MyContext.Consumer>
        {value => <Text>{value}</Text>}
      </MyContext.Consumer>
    </View>
  );
};

Exemple Pràctic

A continuació, es mostra un exemple pràctic d'ús de la Context API per compartir un estat global entre components.

Creació del Context

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

// Creem el context
const CounterContext = React.createContext();

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

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <View>
        <CounterDisplay />
        <CounterButtons />
      </View>
    </CounterContext.Provider>
  );
};

const CounterDisplay = () => {
  return (
    <CounterContext.Consumer>
      {({ count }) => <Text>Count: {count}</Text>}
    </CounterContext.Consumer>
  );
};

const CounterButtons = () => {
  return (
    <CounterContext.Consumer>
      {({ setCount }) => (
        <View>
          <Button title="Increment" onPress={() => setCount(prev => prev + 1)} />
          <Button title="Decrement" onPress={() => setCount(prev => prev - 1)} />
        </View>
      )}
    </CounterContext.Consumer>
  );
};

export default App;

Exercicis Pràctics

Exercici 1: Crear un Context per a l'Usuari

  1. Crea un context per a gestionar la informació de l'usuari (nom i correu electrònic).
  2. Proporciona el context a través d'un Provider en el component principal.
  3. Consumeix el context en un component fill per mostrar la informació de l'usuari.

Solució

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

// Creem el context
const UserContext = React.createContext();

const App = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  return (
    <UserContext.Provider value={user}>
      <View>
        <UserProfile />
      </View>
    </UserContext.Provider>
  );
};

const UserProfile = () => {
  return (
    <UserContext.Consumer>
      {user => (
        <View>
          <Text>Name: {user.name}</Text>
          <Text>Email: {user.email}</Text>
        </View>
      )}
    </UserContext.Consumer>
  );
};

export default App;

Exercici 2: Actualitzar el Context

  1. Afegeix una funció per actualitzar la informació de l'usuari en el context.
  2. Proporciona aquesta funció a través del Provider.
  3. Consumeix la funció en un component fill per permetre l'actualització de la informació de l'usuari.

Solució

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

// Creem el context
const UserContext = React.createContext();

const App = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  const updateUser = (newUser) => {
    setUser(newUser);
  };

  return (
    <UserContext.Provider value={{ user, updateUser }}>
      <View>
        <UserProfile />
        <UpdateUserButton />
      </View>
    </UserContext.Provider>
  );
};

const UserProfile = () => {
  return (
    <UserContext.Consumer>
      {({ user }) => (
        <View>
          <Text>Name: {user.name}</Text>
          <Text>Email: {user.email}</Text>
        </View>
      )}
    </UserContext.Consumer>
  );
};

const UpdateUserButton = () => {
  return (
    <UserContext.Consumer>
      {({ updateUser }) => (
        <Button
          title="Update User"
          onPress={() => updateUser({ name: 'Jane Doe', email: '[email protected]' })}
        />
      )}
    </UserContext.Consumer>
  );
};

export default App;

Conclusió

La Context API de React és una eina poderosa per gestionar l'estat global en aplicacions React Native. Permet compartir dades entre components sense necessitat de passar props manualment a través de cada nivell de l'arbre de components. Amb la pràctica, es pot utilitzar la Context API per simplificar la gestió de l'estat en aplicacions complexes.

En el següent tema, explorarem els Hooks a React Native, que ens permetran gestionar l'estat i els efectes col·laterals de manera més eficient.

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