Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactのHigher-order Componentsの利用方法

numanomanu
December 15, 2016

ReactのHigher-order Componentsの利用方法

numanomanu

December 15, 2016
Tweet

More Decks by numanomanu

Other Decks in Technology

Transcript

  1. A higher-order component is just a function that takes an

    existing component and returns another component that wraps it. (引用: Mixins Are Dead. Long Live Composition) - コンポーネントを引数にして、カスタマイズしたコンポーネントを返す関数のこ と - 既存のコンポーネントに新しい機能を追加することが可能 HOC とは何か? HOCの基礎
  2. • react-redux • connect() • material-ui (material design を react

    のコンポーネントで利用できるライブラリ) • muiThemeable() • redux-form (フォームの処理を react-redux のフローに乗せてくれるライブラリ) • reduxForm() • react-router(react のコンポーネント単位でルーティングを行えるライブラリ) • withRouter() • radium (cssの擬似セレクタをインラインで扱うライブラリ) • enhanceWithRadium() 最近よく見かける HOC を利用しているライブラリとその実装 ライブラリについて
  3. ここまでのまとめ2 1. 関数がコンポーネントを引数にとって 2. 何らかの処理を加えて a. 新しい props の注入 b.

    共通のライフサイクル処理 3. 引数にとったコンポーネントに合成して返す 案外、 HOC の実装はパッと見で複雑でも、元のコンポーネントに新しく props を注入したりしているだけかもしれません。 ライブラリについて
  4. HOC の 2 つのパターン React Higher Order Components in depthの記事によると、HOC

    には2つの パターンがあります 1. 先ほどまでの props を新しく追加する例は Props Proxy 2. PropsProxy 以外には Inheritance Inversion (逆継承) 実際の実装を見ながら順に説明していきます 弊社での利用実例
  5. HOC の具体的な実装例1:HOCを作成 - createPrimaryButton という関数で、HOCを作成 - material-ui の RaisedButton コンポーネントを拡張

    1.引数にコンポーネントをとる関数を作る 2.処理を加えて、引数にとったコンポーネントに合成して返す 3. コンポーネントを引数に、ボタンを作成 弊社での利用実例
  6. HOC の具体的な実装例1 - createButton に引数をつけて、バリエーションを増やす - color, size, shape をそれぞれ追加

    弊社での利用実例 1.引数に変数を加える 2.引数から、一意の名前のコンポーネントを作成する
  7. HOC の具体的な実装例2 で行っていること ラップしたコンポーネント自身を extends している。(Inheritance inversion) - HOCのライフサイクルメソッドを、ラップしたコンポーネントに適応 -

    HOCから、ラップしたコンポーネントの state や props に thisでアクセス - 条件によって、レンダリングしないように、 render をハイジャックできる ログインが必要なコンポーネントは、このHOCを利用すれば良いため、他のコンポーネ ント内にif文などを書かなくて良くなり、コンポーネント自身の責務に集中出来る。 弊社での利用実例
  8. まとめ - HOC はコンポーネントを引数にして、カスタマイズしたコンポーネントを返 す関数のこと - material-ui や redux-form など、様々なライブラリで利用されている -

    組み合わせることで、既存のコンポーネントに新しい機能を追加することが 可能 - アプリケーション内で共通に利用する機能や、パーツをまとめるのに便利 - 慣れればコードを読みやすくかける