useContext: React フック-jsチュートリアル-php.cn

useContext: React Hooks

2 つの実用的なミニプロジェクトを使用した React での useContext

導入

React では、特に複数のコンポーネントが同じデータにアクセスする必要がある大規模なアプリケーションでは、コンポーネント間のデータ管理が不可欠です。プロップのドリル作業 (コンポーネントツリーの複数のレベルにプロップを渡す) は、すぐに面倒になる可能性があります。ここで React の useContext フックが威力を発揮します。 useContext を使用すると、props を手動で渡さずにコンポーネント間でデータを共有できるため、状態管理にとって非常に貴重なツールになります。

この記事では、useContext、その構文、およびその利点の詳細な説明から始めます。次に、2 つのミニプロジェクトを構築して、この理解を確実にします。

テーマスイッチャー: useContext がグローバル状態をどのように管理するかを示すシンプルなテーマトグラー。
ユーザー認証ステータス: ユーザーのログイン状態を処理するアプリで、実際のユースケースで useContext を使用する方法を示します。

このチュートリアルが終わるまでに、React プロジェクトで自信を持って useContext を使用できるようになります。

useContextとは何ですか?

useContext の基本

useContext は、コンポーネントがコンテキストを直接サブスクライブできるようにする React フックです。コンポーネントがコンポーネントツリー内でその上にある最も近いプロバイダーからグローバルデータにアクセスできるようにすることで、プロップドリルの煩わしさを回避できます。

useContextの構文

コンテキストを作成および使用するための基本的な構文は次のとおりです。

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

ログイン後にコピー

説明

コンテキストの作成: createContext は、共有したいデータを保持するコンテキストオブジェクトを初期化します。 defaultValue パラメーターはオプションですが、プロバイダーが見つからない場合のフォールバックとして使用できます。
useContext によるコンテキストの使用: コンポーネント内では、useContext(MyContext) を使用してコンテキストの現在の値にアクセスします。この値は、最も近いによって決定されます。コンポーネントツリーのコンポーネントの上にあります。

コンテキストプロバイダーとコンシューマーの例

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

ログイン後にコピー

この例では:

ThemeContext はコンテキストであり、デフォルト値 'light' で初期化されます。
ThemeProvider は DisplayTheme をラップし、value="dark" を提供し、「dark」を ThemeProvider 内の現在のテーマにします。
DisplayTheme コンポーネントは useContext(ThemeContext) を使用してテーマにアクセスし、テーマをレンダリングします。

これは基本をカバーしています。ここで、この知識を実際のシナリオに適用するためのプロジェクトに飛び込んでみましょう。

ミニプロジェクト 1: テーマスイッチャーの構築

私たちの最初のプロジェクトは、useContext を使用してテーマのグローバルアプリケーション状態を管理する方法を示す単純なテーマスイッチャーです。

ステップ 1: コンテキストを設定する

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

ログイン後にコピー

ここで、ThemeContext は 2 つの値を提供します: 現在のテーマとそれを切り替える関数です。プロバイダーはアプリのコンポーネントをラップし、テーマと切り替え機能をグローバルに利用できるようにします。

ステップ 2: コンポーネント内のコンテキストを使用する

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

ログイン後にコピー

ステップ 3: メインアプリでプロバイダーを使用する

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

ログイン後にコピー

ボタンをクリックすると、テーマのステータスが横に表示され、明るいテーマと暗いテーマを切り替えることができます。このプロジェクトは、useContext を使用して、複数のコンポーネントがグローバルな状態の変更を共有し、それに反応する方法を示します。

ミニプロジェクト 2: ユーザー認証の管理

2 番目のプロジェクトでは、useContext を使用してユーザーの認証ステータスを追跡する単純なアプリを構築しましょう。

ステップ 1: 認証コンテキストを作成する

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

ログイン後にコピー

ステップ 2: ログインおよびログアウトコンポーネントを作成する

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

export default App;

ログイン後にコピー

ステップ 3: ユーザーステータスの表示

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

ログイン後にコピー

ステップ 4: アプリ内でコンポーネントを結合する

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

ログイン後にコピー

これで、ログインボタンとログアウトボタンによってアプリ全体のユーザーのステータスが更新される、シンプルな認証ステータスアプリが完成しました。このプロジェクトは、実際のシナリオで useContext がアプリケーション全体の状態をどのように処理できるかを示します。

結論

これら 2 つのプロジェクトでは、useContext がプロップのドリルを必要とせずにコンポーネント間のデータ共有を簡素化する方法を理解しました。テーマスイッチャーと認証ステータスプロジェクトは、グローバル状態を効果的に管理するための実践的な洞察を提供します。テーマを切り替える場合でも、ユーザー認証を処理する場合でも、useContext は効率的で組織化されたアプリケーションを構築するための強力なツールを提供します。

以上がuseContext: React フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。