Reactガイドを読んでいくその46
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
高階 (Higher-Order) コンポーネント
規則：組み立てやすさを最大限保つこと
HOCの使い方はある程度決まっているものの、すべて一致するわけではない。
引数としてラップされるコンポーネントが一つだけという場合もある。
複雑化してわからなかったり、利用方法がわからなくなってきた場合はばらしてみるとよい。
ある程度規模のあるプロジェクトになるとHOCのHOCみたいな使われ方も出てくるので、そうなってくると厄介。
規則：デバッグしやすくするため表示名をラップすること
HOCによって作成されたコンテナコンポーネントはReact Developer Tools に表示される。
HOCとわかりやすくしておくとデバッグがしやすい。
よくある方法としてはラップされるコンポーネントの表示名をラップする。
注意事項
React初心者にはHOCで分かりにくい場所があるらしい。
render メソッド内部で HOC を使用しないこと
React の差分アルゴリズム（“reconciliation” と呼ばれる）は、既存のサブツリーを更新すべきかそれを破棄して新しいものをマウントすべきかを決定する際に、コンポーネントの型が同一かどうかの情報を利用します
基本的には考える必要はないらしいが、HOCの場合は意識しておく必要があるらしい。
Reactがrenderを考えるときに何を意識しているかを認識することでHOCをrender内部で使用してはいけないということがわかるから。
基本的には以下のようなことになるかららしい。
・パフォーマンス低下
・子要素のすべてのstateが再マウントによって失われる
静的メソッドは必ずコピーすること
HOCコンポーネントに静的メソッドを定義すると、元のコンポーネントはコンテナコンポーネントにラップされる。
新しいコンポーネントは元のコンポーネントの静的メソッドを一つも持っていないことになってしまう。
この問題を解決するためにコンテナコンポーネントを返す前にメソッドをコピーする。
この方法ではどのメソッドがコピーされる必要があるのか正確に知っておく必要があるため、hoist-non-react-statics を使用することで、全ての非 React の静的メソッドを自動的にコピーできるようになる。
上記以外の解決策として、静的メソッドを自身とは別にしてエクスポートする。
ref 属性は渡されない
HOCの通例として、すべてのpropsはラップされたコンポーネントに渡されるが、refに関してはそうならない。
ref属性が実際のプロパティではなく、Reactによって特別に処理されているもののためそうなってしまう。
React.forwardRef API を使うことで、HOCから出力されたコンポーネントの要素にrefを追加しても最も外側のコンテナコンポーネントを参照していしまうような状態を回避できる。
今日はここまで。
