useContext : réagir aux crochets

useContext dans React avec deux mini-projets pratiques

Introduction

Dans React, la gestion des données entre les composants est essentielle, en particulier dans les applications plus volumineuses où plusieurs composants doivent accéder aux mêmes données. Le forage d'accessoires (transmettre des accessoires sur plusieurs niveaux d'une arborescence de composants) peut rapidement devenir fastidieux. C’est là que le hook useContext de React brille. useContext vous permet de partager des données entre composants sans transmettre manuellement d'accessoires, ce qui en fait un outil inestimable pour la gestion de l'état.

Dans cet article, nous commencerons par une explication détaillée de useContext, de sa syntaxe et de ses avantages. Ensuite, nous consoliderons cette compréhension en construisant deux mini-projets :

1. Theme Switcher : un simple sélecteur de thème pour montrer comment useContext gère l'état global.
2. Statut d'authentification de l'utilisateur : une application pour gérer l'état de connexion des utilisateurs, montrant comment utiliser useContext pour des cas d'utilisation réels.

À la fin de ce didacticiel, vous serez bien équipé pour utiliser useContext en toute confiance dans n'importe quel projet React.

---

Qu’est-ce que useContext ?

Les bases de useContext

useContext est un hook React qui permet aux composants de s'abonner directement à un contexte. Cela permet d'éviter les tracas liés au perçage d'accessoires en permettant aux composants d'accéder aux données globales du fournisseur le plus proche au-dessus de lui dans l'arborescence des composants.

Syntaxe de useContext

Voici la syntaxe de base pour créer et utiliser un contexte :

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

Explication

1. Création d'un contexte : createContext initialise un objet de contexte, qui contient les données que nous souhaitons partager. Le paramètre defaultValue est facultatif mais peut être utilisé comme solution de secours si aucun fournisseur n'est trouvé.
2. Utilisation du contexte avec useContext : À l'intérieur d'un composant, nous utilisons useContext(MyContext) pour accéder à la valeur actuelle du contexte. Cette valeur est déterminée par la valeur au-dessus du composant dans l'arborescence des composants.

Exemple de fournisseur de contexte et de consommateur

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

function ThemeProvider({ children }) {
    return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

Dans cet exemple :

• ThemeContext est notre contexte, initialisé avec une valeur par défaut de 'light'.
• ThemeProvider encapsule DisplayTheme et fournit une valeur="dark", faisant de "dark" le thème actuel dans ThemeProvider.
• Le composant DisplayTheme utilise useContext(ThemeContext) pour accéder au thème et le restituer.

Cela couvre les bases. Passons maintenant aux projets pour appliquer ces connaissances dans des scénarios pratiques.

---

Mini-projet 1 : Construire un sélecteur de thème

Notre premier projet est un simple sélecteur de thème qui démontrera comment useContext peut être utilisé pour gérer l'état global des applications pour les thèmes.

Étape 1 : Configurer le contexte

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

Ici, ThemeContext fournit deux valeurs : le thème actuel et une fonction pour le faire basculer. Le fournisseur enveloppe les composants de l'application, rendant le thème et la fonction de bascule disponibles dans le monde entier.

Étape 2 : Consommer le contexte dans les composants

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

function ThemeProvider({ children }) {
    return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

Étape 3 : Utilisez le fournisseur dans l'application principale

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

Maintenant, vous pouvez basculer entre les thèmes clairs et sombres en cliquant sur le bouton, avec l'état du thème affiché à côté. Ce projet montre comment useContext permet à plusieurs composants de partager et de réagir aux changements d'état globaux.

---

Mini projet 2 : Gérer l'authentification des utilisateurs

Pour le deuxième projet, créons une application simple qui suit le statut d'authentification d'un utilisateur à l'aide de useContext.

Étape 1 : Créer un contexte d'authentification

function ThemeToggler() {
    const { theme, toggleTheme } = useContext(ThemeContext); // Access context values
    return (
        <button onClick={toggleTheme}>
            Switch to {theme === 'light' ? 'dark' : 'light'} mode
        </button>
    );
}

function DisplayTheme() {
    const { theme } = useContext(ThemeContext);
    return <p>Current Theme: {theme}</p>;
}

Étape 2 : Créer des composants de connexion et de déconnexion

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
            <ThemeToggler />
        </ThemeProvider>
    );
}

export default App;

Étape 3 : Afficher le statut de l'utilisateur

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    const login = () => setIsAuthenticated(true);
    const logout = () => setIsAuthenticated(false);

    return (
        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

Étape 4 : Combiner les composants dans l'application

function LoginButton() {
    const { login } = useContext(AuthContext); // Access login function
    return <button onClick={login}>Login</button>;
}

function LogoutButton() {
    const { logout } = useContext(AuthContext); // Access logout function
    return <button onClick={logout}>Logout</button>;
}

Vous disposez désormais d'une application de statut d'authentification simple dans laquelle les boutons de connexion et de déconnexion mettent à jour le statut de l'utilisateur dans l'application. Ce projet montre comment useContext peut gérer l'état d'une application dans des scénarios réels.

---

Conclusion

Avec ces deux projets, vous avez vu comment useContext simplifie le partage de données entre les composants sans avoir besoin de percer des accessoires. Les projets de sélecteur de thème et de statut d'authentification donnent des informations pratiques sur la gestion efficace de l'état global. Que vous changiez de thème ou gériez l'authentification des utilisateurs, useContext fournit un outil puissant pour créer des applications efficaces et organisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!