コンテキストAPIのwhatsとwhys -パート1


ねえ、仲間の学習!このブログでは、反応文脈を議論します.私は2つの部分に分割しているので、私は怠惰であり、長く、疲れるブログを書きたくなかったので.パート1は文脈の背後にあるすべての必要な理論をカバーし、パート2は文脈をどのように使うかをコード化する.したがって、あなたがコードのためにここにいるならば、私の次のブログを参照してください.他に前進しましょう!
誰も1つのコンポーネントから別のコンポーネントに狂ったように流れるデータを望んでいないので、状態管理は、常に反応で作業中に痛みのポイントでした.そして、(親コンポーネントから子コンポーネントまで)反応の一方的なデータフローは、さらにデータがどこでプロップ穴を避けるために休むべきかについて理解するのをより難しくします.
プロップドリルは何ですか?
ホームというコンポーネントがあるとしましょう.ホームに署名しているユーザーに関連するすべてのデータがあります.今、家のために、子供のコンポーネントがあると言う.次に、ブックマークと呼ばれる他のコンポーネントがあります.このBookhotelのコンポーネントは、予約を正常に配置するユーザーデータを必要とします.

ために我々は通常、ホテルのコンポーネントにユーザーのデータを渡すし、小道具としてブックホテルにそれを渡すだろうことを行うには.したがって、我々は、我々は部品にコンポーネントをドリルしていると言うことができます.ここで問題を感じられますか.
ホテルのコンポーネントは全くデータを必要としません、そして、一方向のデータフロー制約のために、我々はそれを家庭から小道具としてユーザーデータをとって、それをその子要素に渡す必要があります.これは今のところ非常に厄介なことに聞こえないかもしれませんが、それがさらに5または6レベルであったコンポーネントに渡されることになっているならば、想像してください.すべての中間コンポーネントは、正しいコンポーネントがデータを受け取ることを確認しながら、意味のない作業を行うだけです.データをそれを必要としないコンポーネントに渡すこのプロセスは、小道具穿孔と呼ばれています.
今、あなたは、なぜあなたは、ホテルのコンポーネントでデータを維持しないでください、と主張する可能性があります?しばらくの間、我々がそれをしたと仮定してください.しかし、次に、これについて考えてください.このフライトコンポーネントには、ユーザーデータを必要とするブックフライトコンポーネントもあります.

しかし、私たちは、データがその親コンポーネントに流れることができないので、ホテルから家まで、そして、それから飛行にユーザーデータ流れを作ることができません.我々は慎重にデータを配置しない場合は、我々がやっていることの面倒なことの種類を見ることができますか?
それで、すべてのこのトラブルから私たちを救うために、それが文脈APIの概念で持ってきたバージョン16に反応してください.
コンテキストは基本的には、これまで以上に簡単にデータにアクセスすることができます反応に組み込まれているAPIです.これは、データを必要とするすべてのコンポーネントは、プロップとして任意のデータを渡すことなく、それにアクセスしていることを確認するのに役立ちます.コンテキストをすべてのコンポーネントに使用できるグローバル変数と考えることができます.

それで、文脈を使用してどんな種類のデータを定義するべきですか?
データが更新されるたびに、データが再描画されるすべてのコンポーネントが更新されます.これは、コンポーネント間で突然の再レンダリングを引き起こす可能性があります.したがって、ContextAPIを使用して頻繁に更新されないデータを定義する必要があります.コンテキストは、データの消費を容易にするために使用されるだけではなく、reduxのような状態管理ツールではないことに注意してください.
したがって、
theme data
user data (currently authenticated user)
location-specific data
ContextAPIを使用して定義できる理想的なデータ型です.
私は、これが長い読みであったということを知っています、しかし、私はあなたが現在どんな文脈であるかについてはっきり理解して、そして、なぜ我々がそれを必要とするかについてわかっていることを望みます.次のブログでは、コードに直接ジャンプし、どのように設定することができます参照してください.
読書ありがとうございます!これが何らかの方法であなたを助けたならば、コメントで知らせてください.また、私はブログを書くことに新しいので、私は本当にいくつかの正直なフィードバックを感謝します.
学習を続ける!