Reactにおけるコンテキスト適用シナリオの分析

Reactにおけるコンテキスト適用シナリオの分析

コンテキストの定義と目的

コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コンポーネント間でデータを共有する方法を提供します。

アプリケーション シナリオで共有する必要があるデータは何ですか?

コンテキストは、現在認証されているユーザー、テーマ、優先言語など、コンポーネントのツリーに対して「グローバル」なデータを共有するように設計されています。

使い方

1. コンテキストの作成と初期化

定数MyContext = createContext(デフォルト値);

Context オブジェクトを作成します。 React がこの Context オブジェクトをサブスクライブするコンポーネントをレンダリングすると、コンポーネントはコンポーネント ツリー内で自身に最も近い一致するProviderから現在のコンテキスト値を読み取ります。

2. コンテキストを購読する

<MyContext.Provider value={/* 何らかの値*/>

プロバイダーはvalue属性を受け取り、それを消費コンポーネントに渡します。プロバイダーは、複数のコンシューマー コンポーネントと対応する関係を持つことができます。複数のプロバイダーをネストすることもでき、その場合、内側のプロバイダーは外側のプロバイダーのデータを上書きします。

ここでは2つの関連する概念がある

  • プロバイダー - コンテキスト プロバイダー、またはコンテキストのサブスクライバー。これは、プロバイダーを通じて内部コンポーネントのコンテキスト値の変更をサブスクライブするものとして理解できます。コンテキスト値が変更されると、内部コンポーネントの再レンダリングがトリガーされます。
  • コンシューマー - コンテキスト コンシューマー (消費コンポーネント)、またはコンテキスト ユーザー。つまり、Context コンポーネントを使用または消費するには、Provider 内でuseContext()を使用します。これらのコンポーネントは、useContext() を通じて Context の最新の値を取得して使用します。

3. Conextを使用する

3.1 Reactコンポーネントでの使用

定数値 = useContext(MyContext);

消費コンポーネント内のコンテキストを参照します。 value は、コンポーネント ツリー内で自身に最も近い一致するプロバイダーから現在のコンテキスト値を読み取ります。

3.2 純粋機能コンポーネントでの使用

純粋に機能的なコンポーネントでは、 Consumerを使用してコンテキストの値を参照できます。上位層に対応するプロバイダーがない場合、 value はcreateContext()に渡されるdefaultValueと同等になります。

<MyContext.コンシューマー>
  {value => /* コンテキスト値に基づいてレンダリング */
</MyContext.Consumer>

4. コンテキストの更新

4.1 上から下へのコンテキストの更新

トップダウン更新とは、プロバイダーの値を更新することを指します。プロバイダーのvalueが変更されると、その中のすべての消費コンポーネントのuseContextを通じて取得された値が自動的に更新され、再レンダリングがトリガーされます。

//アプリ.js

// ....

デフォルト関数App()をエクスポートする{
    //...
    
    // 
    const {contextValue, setContextValue} = React.useState(initialValue);

    // コンテキスト値を更新する関数
    関数 updateContext(newValue) {
        // ...

        // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
        setContextValue(新しい値)
    }

    ...
    戻る (
        <アプリ>
            <MyContext.Provider 値 = {contextValue}>
                <コンシューマーコンポーネント1>
                    <コンシューマーコンポーネント11>
    					// ....
                    </コンシューマーコンポーネント11>
                </コンシューマーコンポーネント1>

                <コンシューマーコンポーネント2 />
                <コンシューマーコンポーネント3 />
            </MyContext.Provider>
        </アプリ>
    );
    
}

4.2 ボトムアップ(消費コンポーネントから)コンテキスト更新

場合によっては、 contextを消費コンポーネントで更新し、プログラム全体に適応させる必要があります。たとえば、アプリケーションのsettingコンポーネントを通じて UI スタイルを変更します。 このとき、コールバックを通じて更新をレイヤーごとに対応するプロバイダーに渡し、Provide に対応するvalueを更新して、関連するすべてのコンシューマー コンポーネントの更新をトリガーする必要があります。

// アプリ.js

デフォルト関数App()をエクスポートする{
    ...
    const {contextValue, setContextValue} = React.useState(initialValue);

    // コンテキスト値を更新する関数
    関数 updateContext(newValue) {
        // ...

        // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
        setContextValue(新しい値)
    }

    ...
    戻る (
        <アプリ>
            <MyContext.Provider 値 = {contextValue}>
                <コンシューマーコンポーネント1>
                    <ConsumerComponent11 updateValue={updateContext}> // コールバック プロパティを通じて ConsumerComponent11 の contextValue を更新します。contextValue は最上位レベルの Provider の値に属しているため、ConsumerComponent1、ConsumerComponent2、および ConsumerComponent3 の再レンダリングもトリガーされます。
                    </コンシューマーコンポーネント11>
                </コンシューマーコンポーネント1>

                <コンシューマーコンポーネント2 />
                <コンシューマーコンポーネント3 />
            </MyContext.Provider>
        </アプリ>
    );
}

4.3 プロバイダのネスト

場合によっては、同じコンテキストのプロバイダーがネストされ、2 つのコンテキストとして認識されることがあります。違いは、

...
React のコンテキスト値を設定します。

// コンテキスト値を更新する関数
関数 updateContext(newValue) {
    // ...
    
    // contextValue、ConsumerComponent1、ConsumerComponent2、ConsumerComponent3、ConsumerComponent11 を更新すると、再レンダリングがトリガーされます。
    setContextValue(新しい値)
}

...
戻る (
	<アプリ>
        <MyContext.Provider 値 = {contextValue}>
            <コンシューマーコンポーネント1>
                <コンシューマーコンポーネント11 />
            </コンシューマーコンポーネント1>

            <コンシューマーコンポーネント2>
                ...
                // ConsumerComponent21 と ConsumerComponent22 の値のみを更新する場合 const localContextValue = useContext(MyContext); // 上位層プロバイダーから現在の値を取得します const {tempContextValue, setTempContextValue} = React.useState(localContextValue);

				関数 updateTempContext(newValue) {
                    // ここでの更新は ConsumerComponent21 と ConsumerComponent22 の再レンダリングのみをトリガーします setTempContextValue(newValue); 
                }

				// ここで ConsumerComponent21 と ConsumerComponent22 間でデータを共有するための新しいプロバイダーを作成します。
                <MyContext.Provider 値 = {tempValue}>
                    <コンシューマーコンポーネント21>
                    	// ConsumerComponent21 で useContext(MyContext) 経由でサブスクライブします // 取得される値は、自身に最も近い一致するプロバイダーから読み取られたコンテキスト値、つまり tempValue です
                    </コンシューマーコンポーネント21>
                    <コンシューマーコンポーネント22>
                    </コンシューマーコンポーネント22>
				</MyContext.Provider 値 = {contextValue}>
            </コンシューマーコンポーネント2>
            <コンシューマーコンポーネント3 />
        </MyContext.Provider>
    </アプリ>
);

公式ドキュメント

公式ドキュメントについては、以下の基本および上級チュートリアルを参照してください。

フック API インデックス – React (reactjs.org)

コンテキスト – React (reactjs.org)

上記は、React における Context アプリケーション シナリオの分析の詳細な内容です。React における Context の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React Contextの理解と応用についてお話ししましょう
  • Reactコンテキストを使用してvueスロット関数を実装する
  • ReactのPropsの簡単な比較
  • Reactでpropsを使用する方法と制限する方法
  • Reactの3つの主要属性におけるpropsの使用の詳細な説明
  • Reactのコンテキストとプロパティの説明

<<:  Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)

>>:  Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

推薦する

LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

CentOS7 で yum を使用して PostgreSQL と PostGIS をインストールする方法

1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

react setStateの詳細な説明

目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

Mailtoを使えばHTMLでメールを送るのは簡単

最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...

JavaScriptの原理と方向性

これが何を指しているのかをどのように判断するのでしょうか? ①グローバル環境で呼び出された場合はwi...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...