Reactの新しいコンテキストAPIを知る

序章

さまざまなフロントエンドフレームワークが多数存在する世界では、どれを選択するかを常に判断するのは困難です。人気のAngularを使用しますか？それとも、VueJSに飛び込むことは、私の知識の範囲にとって有益でしょうか？

次に、Facebookによって作成されたフレームワークであるReactJSがあります。これは、フロントエンドフレームワークの世界を席巻しているようです。コンポーネント、仮想DOM、およびJSX（それは別の日です！）を使用して、Reactはすべてをカバーしているようで、強力なフレームワークになっています。

新しいコンテキストAPIは、最近React16.3で次のように導入されました。

すべてのレベルで小道具を手動で渡す必要なしに、コンポーネントツリーを介してデータを渡す方法

いいね！掘り下げてみましょう。

小道具と状態

Reactには、propsとstateがあります。理解すべき2つの非常に重要なこと。

Props は、プロパティの略で、親コンポーネントからコンポーネントに渡されるデータです。

State は、コンポーネント内で管理されているデータです。では、各コンポーネントに独自の状態がある場合、その情報を別のコンポーネントとどのように共有するのでしょうか。小道具を使用することもできますが、小道具は親コンポーネントと子コンポーネントの間でのみ渡すことができます。

では、1ビットの情報を渡すためにコンポーネントのレイヤーが多数ある場合はどうすればよいでしょうか。プロップドリルとも呼ばれますか？

プロップドリル（コンテキストAPIが解決するもの）

Context APIが何を解決しているのかを理解できるように、プロップドリルの例を見てみましょう。この例では、1つのコンポーネントから子コンポーネントに、次にそのコンポーネントの子に情報を渡す方法を説明します。

const Lowest = (props) => (
  <div className="lowest">{props.name}</div>
)

const Middle = (props) => (
  <div className="middle">
    <Lowest name={props.name} />
  </div>
)
 
class Highest extends Component {
  state = {
    name: "Context API"
  }
  
  render() {
    return  <div className="highest">
      {this.state.name}
      <Middle name={this.state.name} />
    </div>
  }
}

ネーミングが最も現実的なものではないことは知っていますが、ネストされたコンポーネントに受け継がれるコンテキストの機能を示すのに役立ちます。より現実的なシナリオは、カードベースのユーザーインターフェイス内で発生する可能性のあるシナリオです：CardGrid-> CardContent-> CardFooter->LikeButton。

例に戻ると、これらのHighest-> Middle->Lowestコンポーネントがネストされる方法は次のとおりです。

<Highest>

    <Middle>
  
        <Lowest>
    
            {/* we want our content here but dont want to prop pass ALLLL the way down ! */}
      
        </Lowest>
    
    </Middle>
  
</Highest>

最高と最低が話すために、彼らはミドルがメッセンジャーである必要があることに注意してください。

見よ、私たちにはすべての作業を処理できるReactContextがあります。

ReactのコンテキストAPI

React Contextを使用すると、アプリケーション全体に対してグローバルに表示できる状態を設定できます。

送信するデータを定義するには、コンテキストプロバイダー（<Provider />）から始める必要があり、そのデータを取得して呼び出された場所で使用するコンテキストコンシューマー（<Consumer />）が必要です。

Contextを使用すると、状態を一度宣言してから、アプリケーションのすべての部分で、コンテキストコンシューマーを介してそのデータを使用できるようになります。

信じられないですね。さて、単純なReactアプリケーションでそれを設定する方法を見てみましょう。

作りましょう！

コンテキストAPIを使用した名前転送の構築

今日は、基本的なReactアプリをセットアップします。あるコンポーネントから別のコンポーネントに名前を渡すアプリを作成してみましょう。この名前は、たまたま子コンポーネントではありません。素晴らしい！ 3つの異なるレベルがあります。1つは、状態に名前が格納されている最高のコンポーネント、中間のコンポーネント、そして最低のコンポーネントです。

私たちのアプリケーションは、真ん中と話をすることなく、最高から最低の状態で名前を送信します。使用したいコードエディタを開いて、コーディングを始めましょう！

まず、アプリのreact依存関係が必要になります。先に進み、それを依存関係に追加するか、テキストエディタで作業している場合は、次の手順を実行してインストールします。

npmをまだインストールしていない場合は、マシンにグローバルにインストールします。
npm install —save react
package.jsonでreactの依存関係を確認してください。

メインの.jsファイルでは、ここで魔法が起こります。 Reactアプリを構築するときはいつでも、依存関係をインポートする必要があります。そうしないと、そのファイルはそれを使用することを認識しません。したがって、index.jsファイルの先頭で、必要なものをインポートしましょう。

import React, { Component } from 'react';

インポートが完了しました。次に、コンポーネントに移りましょう。読みやすくするために、コンテキストを変数で宣言する必要があります。私たちのインポートの下でやってみましょう：

const AppContext = React.createContext()

コンポーネントのレイヤー

Highestコンポーネントに状態があります。私たちの州には、Middleコンポーネントと通信せずにLowestコンポーネントに渡したい名前が付けられます。

class Highest extends Component {
    state = {
        name : “React Context API”,
    }

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

Middleコンポーネントと呼ばれる子コンポーネントを作成します。

const Middle = () => (
  <div>
    <p>I’m the middle component</p>
    <Lowest />
  </div>
)

そして、その子コンポーネントはLowestと呼ばれます。

const Lowest = () => (
  <div>
     <AppContext.Consumer>
        {(context) => context.name}
      </AppContext.Consumer>
  </div>
)

これを調べてみましょう。 Highestに、Lowestに渡したい状態があることがわかります。 静的プロパティがあり、コンテキストを宣言できます。この例では、「ReactContextAPI」という名前です。

Providerはそのデータを保持しているため、別のコンポーネントによるconsumedの場合、データに何を与えるかがわかります。 Lowestコンポーネントでは、最初にMiddleコンポーネントにデータを渡すことなく、そのデータを必要とするConsumerがあることがわかります。その代わりに、そのコンポーネントはたむろして、Lowestが子であると宣言します。

コンテキストを使用しない場合

きちんと拡張できるシンプルな支柱掘削ソリューションについては、コンテキストを試してみてください。複数の（そしてより複雑な）状態、レデューサーなどを持つ大規模なアプリの場合、Reduxの方が適している可能性があります。

アプリケーション全体でコンテキストを使用する必要がないため、少し面倒になります。余分な入力をスキップするためにコンテキストを使用するだけでなく、コードに精通してください。

結論

ReactContextAPIはかなり素晴らしいです。ただし、それがあなたとあなたのコードにとって有益であることがわかっている場合を除いて、それを使用しないでください。 Reduxは問題ないかもしれません。小道具の掘削から離れて、文脈のようなものがそれを避けるのに役立つことを知ってください。それは素晴らしい選択肢です！

すべてのコードをチェックアウトしたい場合は、codesandboxですべてを入手できます。