gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

ページの共通処理をHOCに書きながら感じたなんなんだっけこれ感

Reactでは継承がアンチパターンで、HOCを使うのが推奨されているっぽい。 なので、たとえば似たような前処理をするページコンポーネントが複数あったとして、その共通処理を書く場合、

export default class UsersDetailPage extends UsersPage { ... }

みたいなことはせず

export default enhanceUsersPage(UsersDetailPage)

みたいな感じになる。

ただこれ、reduxのconnectやらreact routerのwithRouterやらを合わせるとなんか長ったらしくなってパット見よくわからんという気持ちになる。みんなどうやって書いてるんだ。

const ConnectedUsersDetailPage = withRouter(connect(mapStateToProps, actions)(UsersDetailPage))
export default enhanceUsersPage(ConnectedUsersDetailPage)

うーむ。

Hooksが出てきたりして、なんかもうReactコンポーネントはclassコンポーネントではなくぜんぶ関数にしていくという雰囲気を感じる。 見た目コンポーネントに関してはprops受け取って要素を返す単純な関数でできていたほうがいいに決まってると思う。

ただ、上のようなHOC(HOC(HOC(Component)))みたいな記述を見ると、なんかなんなんだっけこれ感が出てきてしまうのは自分の作りかたが悪いんだろうか。修行が足りない。