コンテキストの定義と目的コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コンポーネント間でデータを共有する方法を提供します。 アプリケーション シナリオで共有する必要があるデータは何ですか?
使い方1. コンテキストの作成と初期化 定数MyContext = createContext(デフォルト値); Context オブジェクトを作成します。 React がこの Context オブジェクトをサブスクライブするコンポーネントをレンダリングすると、コンポーネントはコンポーネント ツリー内で自身に最も近い一致する 2. コンテキストを購読する <MyContext.Provider value={/* 何らかの値*/> プロバイダーは ここでは2つの関連する概念がある
3. Conextを使用する 3.1 Reactコンポーネントでの使用 定数値 = useContext(MyContext); 消費コンポーネント内のコンテキストを参照します。 value は、コンポーネント ツリー内で自身に最も近い一致するプロバイダーから現在のコンテキスト値を読み取ります。 3.2 純粋機能コンポーネントでの使用 純粋に機能的なコンポーネントでは、 <MyContext.コンシューマー> {value => /* コンテキスト値に基づいてレンダリング */ </MyContext.Consumer> 4. コンテキストの更新 4.1 上から下へのコンテキストの更新 トップダウン更新とは、プロバイダーの値を更新することを指します。プロバイダーの //アプリ.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 ボトムアップ(消費コンポーネントから)コンテキスト更新 場合によっては、 // アプリ.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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)
>>: Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル
この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...
tomcatでは、jspは文字化けしませんが、htmlの中国語は文字化けします理由はいくつかあります...
この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...
1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...
TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...
まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...
古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...
この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...
まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...
この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...
MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...
問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...
序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...
Ubuntu のバージョンに関係なく、MySQL データベースのインストールは基本的に同じです。具...
1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...