※exportとimportを詳しく知りたい時はハンズオンjavascriptを見た方が良い。
モジュール化とは
- 基本的には1ファイルに1モジュール。
- 任意の場所で使うことができる。
- 分割統治できる。
- 再利用できる。
名前なし(default)エクスポート。
- ES6で推奨されているエクスポート。
- クラスをエクスポートできる。
React Hooks
フック(Hook)とは
- クラスの機能(stateやライフサイクル)をFunctional componentでも使える。
- あくまで選択肢の一つ。
useState()
- ステートフック。
- this.stateとthis.setStateの代替。
- 複数のstateを使う時はstate毎に宣言。
使い方
useEffect()
- ライフサイクルメソッドの代替できる。
- functional componentでライフサイクルが使える。
書き方1
- useEffect内でCallBack関数を書く。
- CallBackはレンダー毎に呼ばれる。
- returnするCallBackはunmount時に呼ばれる(クリーンアップ関数)。
書き方2
- マウント時のみ実行。
- useEffectは第二引数の配列内の値を前回レンダーと今回レンダーで比較、変更があればCallBack関数を実行。
書き方3
- マウント、アンマウント時のみ実行。
- 1,2の複合。
書き方4
- 特定のレンダー時実行。
- buttonなどで第二引数の値が変わった時に実行。