Reactクリエイティブディビジョンからインプルーブメントディビジョンに異動してきました、17新卒の早津です。APIがアップデートされました。その使い方や以前とどのように変わったのかをコードを交えて紹介していきたいと思います。そもそもContextとは何かというと公式サイトでは以下のように説明されています。level.ざっくり言うと親から子、子から孫といったような順番にstate(状態)をpropsを通じて渡さなくてもコンポーネントツリーを介さずにstateを渡す方法があるよーということです。下図のように子コンポーネントを横断してstateを渡すことができます。従来は最上位のコンポーネントで定義しているstateやactionなどをpropsを通じて親から子と都度渡さなくてはなりません。このような場合バケツリレーが発生してしまいます。実際にコードを書いてみました。document.querySelector("#app"))親が管理しているstate(状態)を下記のように子のコンポーネントを経由して渡しています。今回は親→子→孫と3階層でしたが、10階層など階層が深い場合には記述量が増えかなりしんどいです。(詳細のコードは以下のリンクから確認してみてください。v16.3以前のContextを使った簡単な例です。Parents;stateを受け取りたいコンポーントでthis.context.countと書くとルートコンポーネント(ここでいう親コンポーネント)のstateを受け取ることができます。これまでのContextはchildContextTypes、getChildContext、contextTypesなどを使ってバケツリレーの問題に対応していました。下記のようにpropsの型を定義しています。PropTypes.number,}この型を定義するのは任意ではなく、必須になります。このPropTypesを定義するために別途prop-typesをインストールしなければいけません。階層を飛び越えてpropsを渡すことが可能になりましたが、このように依存するものが多いです。v16.3のContextを使ってみたいと思います。簡単な例として親→孫と横断してstateとactionを渡してみます。親、子、孫それぞれをファイル別に分けてみます。}}<Provider>に渡したいactionやstateをvalueの中に定義します。Child;子のファイルでは単に孫のコンポーネントを読み込んでいるだけになります。GrandChildren;<Consumer>直下にオブジェクトを配置しその中の関数が必須になります。実際にブラウザで動かすとこのようになります。親のcountの値と孫のcountの値が変更しているのがわかります。無事に親→孫とstate、actionを渡すことができました。今回のサンプルはgithubで公開しています。興味のある方は是非リポジトリをcloneしてみてください。github.com簡単ではありますが以上になります。Clientを使ってGitHubクライアントを作成してみたこんにちは、クリラボユニットの早津です。TypeScriptを試すこんにちは、@binarytaです。<後編>こんにちは、@binarytaです。(1)ABOUT株式会社アドウェイズのエンジニアによるブログです!このブログでは、アドウェイズのエンジニアがざっくばらんに技術のことや日常生活について書いていきますので、みなさんよろしくお願いいたします。アドウェイズ中途採用情報スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。