useContext: React Hooks

useContext dalam React dengan Dua Projek Mini Praktikal

pengenalan

Dalam React, mengurus data antara komponen adalah penting, terutamanya dalam aplikasi yang lebih besar di mana berbilang komponen memerlukan akses kepada data yang sama. Penggerudian prop—melalui prop ke bawah berbilang peringkat pokok komponen—boleh menjadi menyusahkan dengan cepat. Di sinilah cangkuk useContext React bersinar. useContext membolehkan anda berkongsi data merentas komponen tanpa menghantar prop secara manual, menjadikannya alat yang tidak ternilai untuk pengurusan negeri.

Dalam artikel ini, kami akan mulakan dengan penerangan terperinci tentang useContext, sintaksnya dan faedahnya. Kemudian, kami akan mengukuhkan pemahaman ini dengan membina dua projek mini:

1. Penukar Tema: Penukar tema ringkas untuk menunjukkan cara useContext mengurus keadaan global.
2. Status Pengesahan Pengguna: Apl untuk mengendalikan keadaan log masuk pengguna, menunjukkan cara menggunakan useContext untuk kes penggunaan dunia sebenar.

Menjelang akhir tutorial ini, anda akan dilengkapi dengan baik untuk menggunakan useContext dengan yakin dalam mana-mana projek React.

---

Apakah useContext?

Asas penggunaanKonteks

useContext ialah cangkuk React yang membenarkan komponen melanggan konteks secara langsung. Ia membantu mengelakkan kerumitan penggerudian prop dengan membolehkan komponen mengakses data global daripada pembekal terdekat di atasnya dalam pepohon komponen.

Sintaks penggunaanKonteks

Berikut ialah sintaks asas untuk mencipta dan menggunakan konteks:

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>;
}

Penjelasan

1. Mencipta Konteks: createContext memulakan objek konteks, yang menyimpan data yang ingin kami kongsikan. Parameter defaultValue adalah pilihan tetapi boleh digunakan sebagai sandaran jika tiada Pembekal ditemui.
2. Menggunakan Konteks dengan useContext: Di dalam komponen, kami menggunakan useContext(MyContext) untuk mengakses nilai semasa konteks. Nilai ini ditentukan oleh di atas komponen dalam pokok komponen.

Contoh Penyedia Konteks dan Pengguna

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>
    );
}

Dalam contoh ini:

• Konteks Tema ialah konteks kami, dimulakan dengan nilai lalai 'cahaya'.
• ThemeProvider membalut DisplayTheme dan memberikan nilai="gelap", menjadikan 'gelap' tema semasa dalam ThemeProvider.
• Komponen Tema Paparan menggunakan useContext(ThemeContext) untuk mengakses tema dan menjadikannya.

Ini merangkumi perkara asas. Sekarang, mari kita selami projek untuk menggunakan pengetahuan ini dalam senario praktikal.

---

Projek Mini 1: Membina Penukar Tema

Projek pertama kami ialah penukar tema ringkas yang akan menunjukkan cara useContext boleh digunakan untuk mengurus keadaan aplikasi global untuk tema.

Langkah 1: Sediakan Konteks

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>;
}

Di sini, ThemeContext menyediakan dua nilai: tema semasa dan fungsi untuk menogolnya. Pembekal membungkus komponen apl, menjadikan tema dan fungsi togol tersedia secara global.

Langkah 2: Gunakan Konteks dalam Komponen

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>
    );
}

Langkah 3: Gunakan Pembekal dalam Apl Utama

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>
    );
}

Kini, anda boleh bertukar-tukar antara tema terang dan gelap dengan mengklik butang, dengan status tema dipaparkan di sebelah. Projek ini menunjukkan cara useContext membenarkan berbilang komponen berkongsi dan bertindak balas terhadap perubahan keadaan global.

---

Projek Mini 2: Menguruskan Pengesahan Pengguna

Untuk projek kedua, mari bina apl ringkas yang menjejak status pengesahan pengguna menggunakan useContext.

Langkah 1: Cipta Konteks Pengesahan

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>;
}

Langkah 2: Cipta Komponen Log Masuk dan Log Keluar

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

export default App;

Langkah 3: Paparkan Status Pengguna

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>
    );
}

Langkah 4: Gabungkan Komponen dalam Apl

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>;
}

Kini, anda mempunyai apl status pengesahan ringkas yang mana butang log masuk dan log keluar mengemas kini status pengguna merentas apl. Projek ini menunjukkan cara useContext boleh mengendalikan keadaan merentas aplikasi dalam senario dunia sebenar.

---

Kesimpulan

Dengan kedua-dua projek ini, anda telah melihat cara useContext memudahkan perkongsian data antara komponen tanpa memerlukan penggerudian prop. Projek penukar tema dan status pengesahan memberikan cerapan praktikal dalam mengurus keadaan global dengan berkesan. Sama ada anda menogol tema atau mengendalikan pengesahan pengguna, useContext menyediakan alat yang berkuasa untuk membina aplikasi yang cekap dan teratur.

Atas ialah kandungan terperinci useContext: React Hooks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!