ResponseのコンテキストAPIは、多くのための選択の状態管理ツールとなっている、何度も完全にreduxを交換します.この簡単な5分チュートリアルでは、どのようなコンテキストには、導入を参照してくださいどのようにそれを使用する!
あなたがこの主題に適切な導入を望むならば、あなたは私のためにwaitlistに加わることができます、あるいは、あなたがまだ初心者であるならば、私のチェックアウト
下のボックスが別々のコンポーネントを表すこのツリーを考えます.

私たちは簡単に下のコンポーネントに状態を追加することができますが、今までコンポーネントの兄弟にデータを渡すために唯一の方法は、より高いコンポーネントに状態を移動し、小道具を介して兄弟に戻ってそれを渡すことでした.

後に、状態を持つコンポーネントの兄弟がデータを必要としていることがわかったなら、再び状態を持ち上げなければなりません.

この解決策が機能している間、異なる分岐のコンポーネントがデータを必要とする場合に問題が発生します.

この場合、中間レベルがそれを必要としないとしても、アプリケーションの最上位レベルからすべての仲介コンポーネントを下にデータを必要とするものに渡す必要があります.この退屈で時間がかかるプロセスは、プロップドリルとして知られています.

コンテキストAPIが入るところです.それはすべてのレベルを介して小道具を渡すことなく、プロバイダの消費者ペアを介してコンポーネントツリーを介してデータを渡す方法を提供します.データをキャッチするコンポーネントとして考えてください.仲介コンポーネントは、何かが起こっていることを「知る」こともありません.

これを実証するために、我々は、このファンキーな(そして超便利な)日の夜のイメージを切り替えるを作成します.

あなたが完全なコードを見たいならば、チェックアウトしてくださいthe Scrimba playground for this article .

コンテキストの作成

開始するには、新しいコンテキストを作成します.我々は全体のアプリは、これにアクセスする必要があるように、我々は行くindex.js アプリをラップThemeContext.Provider .
私たちもvalue 我々のプロバイダへの支柱.これは保存したいデータを保持します.今のところ、我々は'Day' .

import React from "react";
import ReactDOM from "react-dom";
import ThemeContext from "./themeContext";

import App from "./App";

ReactDOM.render(
  <ThemeContext.Provider value={"Day"}>
    <App />
  </ThemeContext.Provider>,
  document.getElementById("root")
);

コンテキストを使用したコンテキストの消費

現在はApp.js , 我々は、単に<Image /> コンポーネント.

import React from "react";
import Image from "./Image";

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Image />
      </div>
    );
  }
}

export default App;

私たちの目標は、コンテキスト名を使用してImage.js からDay to Night , どの画像に応じてレンダリングします.これを行うには、静的プロパティをコンポーネントContextType そして、文字列補間を使用して<Image /> コンポーネント.
さて、クラス名はvalue プロップ注意:私は移動しましたThemeContext バグを防ぐために、独自のファイルに.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

class Image extends React.Component {
  render() {
    const theme = this.context;
    return (
      <div className={`${theme}-image image`}>
        <div className={`${theme}-ball ball`} />
        <Button />
      </div>
    );
  }
}

Image.contextType = ThemeContext;

export default Image;

コンテキスト.消費者

残念ながら、このアプローチはクラスベースのコンポーネントでのみ動作します.あなたが学んだならばHooks in React すでに、あなたは、我々が最近機能的なコンポーネントで何についてでもすることができるということを知っています.したがって、良い測定のために、我々はコンポーネントを機能的なコンポーネントに変えて、それから使用をしなければなりませんThemeContext.Consumer コンポーネントは、アプリケーションを介して情報を渡すために.
これは、<ThemeContext.Consumer> そしてその中でchildren 要素を返す関数を提供します.これは、レンダリングするいくつかのJSXを返す子として通常の関数を提供する“Render Prop”パターンを使用します.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

function Image(props) {
  // We don't need this anymore
  // const theme = this.context

  return (
    <ThemeContext.Consumer>
      {theme => (
        <div className={`${theme}-image image`}>
          <div className={`${theme}-ball ball`} />
          <Button />
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

// We don't need this anymore
// Image.contextType = ThemeContext;

export default Image;

注:私たちもラップする必要があります<Button /> コンポーネント<ThemeContext.Consumer> - これは、後でボタンに機能を追加することができます.

import React from "react";
import ThemeContext from "./themeContext";

function Button(props) {
  return (
    <ThemeContext.Consumer>
      {context => (
        <button className="button">
          Switch
          <span role="img" aria-label="sun">
            🌞
          </span>
          <span role="img" aria-label="moon">
            🌚
          </span>
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default Button;

コンテキストプロバイダーの抽出

我々は現在、プロバイダを介してハードコーディングされた値を通過していますが、我々の目標は、我々のボタンで夜と昼の間を切り替えることです.
これは、プロバイダを別のファイルに移動し、それを自分のコンポーネントに入れる必要がありますThemeContextProvider .

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

class ThemeContextProvider extends Component {
  render() {
    return <Provider value={"Day"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

注: Valueプロパティは、新しいファイルのthemecontextで処理されています.したがって、JSはインデックスから削除されるべきです.js
変化する文脈
ボタンを配線するには、まずThemeContextProvider :

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

// Note: You could also use hooks to provide state and convert this into a functional component.
class ThemeContextProvider extends Component {
  state = {
    theme: "Day"
  };
  render() {
    return <Provider value={"Day"}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

次に昼と夜の切り替え方法を追加します.

toggleTheme = () => {
  this.setState(prevState => {
    return {
      theme: prevState.theme === "Day" ? "Night" : "Day"
    };
  });
};

現在、我々は我々を変えますvalue プロパティthis.state.theme 状態からの情報を返す.

 render() {
    return <Provider value={this.state.theme}>{this.props.children}</Provider>;
  }
}

次は変更value を含む{theme: this.state.theme, toggleTheme: this.toggleTheme} , そして、我々が探すために一つの価値を使うすべての場所を更新してくださいtheme オブジェクトで.これはすべてのtheme なるcontext そしてtheme 値がcontext.theme .
最後に、我々はボタンをonClick イベントとその後context.toggleTheme - これは、プロバイダーから状態を使用している消費者を更新します.ボタンのコードは次のようになります.

import React from "react";
import { ThemeContextConsumer } from "./themeContext";

function Button(props) {
  return (
    <ThemeContextConsumer>
      {context => (
        <button onClick={context.toggleTheme} className="button">
          Switch
          <span role="img" aria-label="sun">
            🌞
          </span>
          <span role="img" aria-label="moon">
            🌚
          </span>
        </button>
      )}
    </ThemeContextConsumer>
  );
}

export default Button;

我々のボタンは、1つのクリックで夜と日の間でイメージを変えます!

コンテキスト警告

コードのすべての良いものと同様に、コンテキストを使用するにはいくつかの警告があります.

ちょうど1つまたは2つの層を掘削小道具を避けるためにコンテキストを使用しないでください.コンテキストは、アプリケーションの大部分によって必要とされる状態を管理するのに最適です.しかし、プロップ掘削は速い場合は、層のカップルダウン情報を渡すだけです.

ローカルで保存されるべき状態を保存するためにコンテキストを使用しないでください.たとえば、ユーザーのフォーム入力を保存する必要がある場合は、ローカルの状態を使用してコンテキストではありません.

常にツリー内の可能な限り低い共通の親の周りのプロバイダをラップ-アプリケーションの最高レベルのコンポーネントではありません.overkillの必要はありません.

最後に、あなたの値の小道具としてオブジェクトを渡す場合は、必要に応じてパフォーマンスとリファクタを監視します.パフォーマンスの低下が顕著でない限り、これはおそらく必要ではないでしょう.

包む

この例はかなり簡単です、それはおそらくアプリの状態を入れて、小道具を介してそれを渡すのは簡単でしょう.しかし、木の上のコンポーネントと独立してデータにアクセスすることができる消費者を持つことは、うまくいけば力を示します.
反応のコンテキストと反応の他の偉大な機能についての詳細については、あなたのためのwaitlistに参加することができますか、あなたが私のチェックアウトすることができますより初心者フレンドリーを探しているなら
ハッピーコーディング