React Hooks 試し切り

さようなら Class 構文

Yuji Tsuburaya
Feb 14 · 3 min read

さようならは言い過ぎかもしれないけど、いままで Class で書いていた React Component を関数で表記できるようになったそうなので試し切り。

いままでの自分

自分は Atomic Design の思想に則って、 Container 層は ClassComponents 層( Atom/ Molecules / Organisms ) は SFC ( Stateless Functional Component) 、つまり関数で書いていた。

これからの自分

まだ分かってない。けど、 Container 層も Class 使わずに済む未来がありそう。上の構成そのままだけど、 Classが駆逐される未来もあるかもしれない。いままでなんでContainerClassで書いていたかっていうと、 Redux を使いたかったから。


実際に試し切り

さいきん気に入っている Parcel 使って動作環境構築。

Hooks are a new addition in React 16.8

とのことなので、 @next をつけて Reactをインストールする。

npm i -S react@next react-dom@next

以下で起動。

parcel index.html

Functional Componentでいままでの Stateっぽい振る舞いはもちろん、 redux っぽい振る舞いもできるっぽくて素敵だった。useReducer を使うと実現できる。また、通常の Redux と同様で、使いたい ViewStore の情報を引き出したり、 action を実行したりすることができる。以下コード参照。通常の Redux に比べてだいぶシンプルに記述できるので素敵。

React Hooks でできないこと

ほぼ Class と同じふるまいができるような印象だった。おそらく、できないことはほぼない。

ただ、mizchi さんのブログによると middleware 仕込むことが現段階だとできないとのこと。まあこのへんそのうち解決されそうな気もする。


結論

これからは React Hooks ゴリゴリ使っていきたい。

サンプルコードは以下に Push した。

___35d

日報

Yuji Tsuburaya

Written by

株式会社ビズリーチのフロントエンドエンジニア。個人開発もやってます。

___35d

___35d

日報

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade