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 のダウンロードとインストール構成のグラフィック チュートリアル

推薦する

JavaScript を使用した Web 計算機の作成

この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...

Tomcat の静的ページ (html) で中国語の文字化けが発生する問題の究極の解決策

tomcatでは、jspは文字化けしませんが、htmlの中国語は文字化けします理由はいくつかあります...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...

Ubuntu 18.04 (コミュニティ エディション) に Docker CE をインストールする方法

古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...

JavaScript でシンプルなタイマーを実装する

この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...

Centos7 への mysql8.0rpm のインストール チュートリアル

まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

MySQLのイベントスケジューラEVENTを理解する

MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...

MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策

問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...

CSS3 を使用したテキスト折り紙効果のサンプルコード

序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...

Ubuntu での mysql のインストールと使用 (一般版)

Ubuntu のバージョンに関係なく、MySQL データベースのインストールは基本的に同じです。具...

docker で Apollo をデプロイする詳細なチュートリアル

1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...