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

投稿日: 2022-04-20 2022-10-10
タグ: javascript, React

序章

さまざまなフロントエンドフレームワークが多数存在する世界では、どれを選択するかを常に判断するのは困難です。人気の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 コンポーネントには状態があります。私たちの州には、私たちが渡したい名前が付けられます Lowest と話す必要のないコンポーネント Middle 成分：

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」という名前です。

The Provider そのデータを保持しているので、 consumed 別のコンポーネントによって、それはそれを与えるものを知っています。私たちの中で Lowest コンポーネントあなたは私たちが持っていることがわかります Consumer 最初にデータを渡す必要なしにそのデータが欲しい Middle 成分。その代わりに、そのコンポーネントはたむろし、次のように宣言します Lowest それは子供です。

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

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

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

結論

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

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

getdocs

13036