反応文脈簡略化

コンテキストは、プロップを使用し、各ステージでデータをドリルダウンすることなく、コンポーネントツリーを介してデータを渡すために簡単な方法を提供する反応オブジェクトです.
文脈ののイラスト:Scrimba反応コースからのイメージ
文脈ののイラスト:Scrimba反応コースからのイメージ
小道具を使用するという欠点は、子コンポーネントに渡されるまで、コンポーネントの1つのブランチからデータをもう一方に渡す必要があることです.掘削として知られているデータのこのパイプラインは、イライラすることができます.
コンテキストは、ライト/ダークモードなどのアプリケーション内のさまざまな状態を管理するために使用できる状態管理ツールとして考えることができるいくつかの人々のために、これはReduxのような状態管理ツールを置き換えるために使用されています.
コンテキストを使用するには、Responseパッケージに付属するCreateContextメソッドを使用します.これは次の構文を使用して呼び出されます
反応する.createContext ()またはimport { createContext }
このメソッドは、プロバイダと消費者の2つのコンポーネントが付属しています.プロバイダーは、状態を保持し、消費者にそれを渡すために使用され、消費者は順番にそれをレンダリングするコンポーネントに渡します.
コンテキストでは、実際に使用されている方法を確認するには、我々のアプリは、ライトモードと暗いモードを持つようにコンテキストを使用します.コンテキストオブジェクトをアプリケーション全体で使用できるようにするには、次の行のコードでどのように使用されているかを確認できます.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

const ThemeContext = React.createContext()

ReactDOM.render(
<ThemeContext.Provider>
    <App/>
<ThemeContext.Provider>,
document.getElementById("root")
)

インデックス.js
ベストプラクティスの場合は、インデックスオブジェクトにインデックスオブジェクトが作成されていることをお勧めしません.これがバグにつながるので、jsファイル.このように、我々は我々の文脈のために異なるファイルを作成して、我々のインデックスに輸出されるそこでそれを例示します.jsファイル.これを以下に示す

import React from "react"
const ThemeContext = React.createContext
export default ThemeContext

テーマテキスト.js
インデックス内のテーマコンテキストを呼び出すことができます.jsファイルをthemecontextからインポートします.JSファイルは、アプリケーションコンポーネントの周りにそれをラップし、プロバイダコンポーネントに提供される値を下に表示されます.この場合に提供される値は、インデックス内のスタイルになる暗く、またはライトです.CSSファイルは暗いとライトモードを反映します.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ThemeContext from "./themeContext"

ReactDOM.render(
<ThemeContext.Provider value="dark">
    <App/>
</ThemeContext.Provider>, 
document.getElementById("root")
)

インデックス.コンテキストプロバイダが別のファイルからインポートされているファイルの更新
次のコード行では、コンテキストメソッドのコンシューマーコンポーネントを使用する方法を説明します.下のファイルは、暗い/ライトモードのテーマプロジェクトのヘッダーファイルです.親プロバイダーの値に基づいてテーマ色を変更するには、状態をクラス名に渡すために、コンシューマーコンテキストを使用します.

import React, {Component} from "react"
import ThemeContext from "./themeContext"

class Header from extends Component{
        static contextType = ThemeContext()
        render(){
                const theme = this.context
                return(
                        <header className={`${theme}-theme`}>
                                <h2> Light {theme}</h2>
                        </header>=\
                )
            }
}

ヘッダ.js
私は、これが反応で文脈を理解するあなたの探求で役に立つことを望みます.あなたが素晴らしいフロントエンドエンジニアに進化して、ハッピーハッキング.
反応242479152からの公式文書をチェックアウトしてください.