componentWillMount()みたいなオリジナルイベントをcomponentに持たせるにはHOC使うと便利的なお話

ReactとかReact Nativeで開発をしているときに、同じメソッドを書いて云々とかあるわけで。
そんなときにはHOC(Higher Order Components)を使うと大体解決するわけで。
簡単な例としてはどのページにもローディングを導入したいみたいな。
もちろんcomponentWillMountとcomponentDidMountでつらつら書けばいいけど、
それを全componentに適用するとなると骨が折れるんだけど、HOC使えば一発的な。
アニメーションの中身を変えたいときも楽ちん的な。

さらにそれだけではなく、500msたったら各component内のとあることをしていきたいとかあるかもしれない。
けどHOCで処理をやっているので、各component毎に調整するのは面倒だったりするわけで。
そういうときに各component内にwillMountみたいなイベントハンドラが作れると、
HOCで定めたタイミングで各component内で任意のタイミングでとあることができるようになるわけで。

ってなわけで前置きが長くなったけど、今日はHOCを使うかつwillMountみたいなものを作るには的なお話をば。

ちなみにHOCについてはこちらがすごく詳しくてのっているからおすすめ。
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較

このサンプルは、以下の手順な感じ。
1：componentHeader.jsのbuttonをクリック
2：hoc.jsでcomponentのhocFiredByHeaderButtonという関数を実行

実際にpropsを渡していけば基本的にはcomponentWillReceivePropsとかでいけるんだけど、
receiveの中でnextProps.hogeのチェックをして云々とかなると汚くなるわけで。
だからこそhoc.jsでcomponent.jsのfunctionを発火させてあげる方が簡単なんじゃないかと。
とくにこれはcomponent.jsは一つだけだけど、複数component.jsがあり、
それら全てでheaderのbuttonが押されたときに各々違う動作をさせたいとかであるならばかなり有用。

ちなみにsnackにあげてあるのはこちら

とりあえずこれが必要になる場面としてはそんなに無いような気がしないでもないけど、
多分覚えておくと便利なときがいずれ来るんじゃ無いかな的な。