Open5
そろそろ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が登場したことにより状態管理が関数コンポーネントで出来る様になって
クラスコンポーネントの出番が減った。