そろそろReact hooks頭に叩き込みたい。hooksとは

ankou22

何回調べたら気が済むのかと思い始めたのでまとめる

参考書籍

参考記事

ankou22

そもそもhooksとは
React16.8から導入された機能。
状態管理ができる。
クラスコンポーネントでしか出来なかったことが関数コンポーネントでも出来るようになった。

ankou22

クラスコンポーネントと関数コンポーネントって何
reactには２種類のコンポーネントがあり、クラスコンポーネントと関数コンポーネントがある。
関数コンポーネントはよりシンプルに書ける。

	クラスコンポーネント	関数コンポーネント
記法	JSの関数と同じ	ES6のクラス
return値	JSX	renderメソッド内でJSXを返却

ankou22

クラスコンポーネントでしか出来なかったことって何
・State
・Lifecycle

Stateとは
ユーザーがアクションした際に変わったりする値(count等)
以前の関数コンポーネントはStateless Componentだった為Stateに合わせてレンダリングが出来なかったらしい。

Lifecycleとは
Mounting(マウント)、Updating(更新)、Unmounting(アンマウント)のこと
以前はState同様関数コンポーネントでは操作できなかったらしい。

Mounting: コンポーネントが初期化され、DOMが描画され、componentDidMount()が呼ばれる一連の流れ
Updating: PropsやStateが更新され、DOMが再描画され、componentDidUpdate()が呼ばれる一連の流れ
Unmounting: componentWillUnmount()が呼ばれコンポーネントが破棄される

ankou22

簡単に言うと
React16.8でhooksが登場したことにより状態管理が関数コンポーネントで出来る様になって
クラスコンポーネントの出番が減った。