最近 React の勉強をしてる。で、Hooks の勉強しようと思ってここを開いたら
↓の React Conf 2018 の動画が紹介されてたので見てみた
React Today and Tomorrow and 90% Cleaner React With Hooks - YouTube
とても面白かった。忘れる前に、感じたことをメモしておくことにする。もう数年前にひととおりみんな通ったあとをてくてく歩いてる感じ。
Class Component の場合
僕の印象ね。
Class Component が State の管理や、ライフサイクルの管理をするので、関心事はそれに合わせて書く。だから例えば関心事Aを実装しようと思うと State の定義の部分や componentDidMount() や componentDidUpdate() に必要な処理を分けて書くことになる。
その Component が取り扱いたい関心事が複数になると、同じようにそれぞれの部分に処理を書くことになって、イベントごとに処理が集まってしまって、関心事としての凝集度は下がってしまう。また、そのような処理の再利用は難しい。
絵にするとこう↓
Function Component + Hooks の場合
というわけで、Function Component と Hooks の場合。
Function Componentは、関心事の塊としての Hooks を「使う(use)」というカタチ。それによって、Function Component自体はレンダリングに集中できる。Class Component のときに Render Props でやってたことも、Hooks を使うことで単純にローカル変数を使って扱うことができる。
さらに、その関心事の塊である Hooks は、別の Component から use することもできる。
好きな感じ。
ちょうどいい時期
自分はちょうどいい時期に勉強を始めたなぁって思う。Hooks も出たてではなくて、エコシステムもサポートしてきてるから、ちょうどいい時期。まぁ、これからの数年で Hooks 地獄とかの事例が出てきて、Hooks are dead ってなるくらいには便利そうだなって思う。
（絵の線が薄かった！ごめんね）
