React メモ

主要ライフサイクルメソッド

Mount

・constructor()

初期化（stateなど）

変数などを最初に定義しておきたいときに使う

・render()

virtuald DOMを描画、この時JSXをリターンする

・componentDidMount()

render()の後に一度だけ呼ばれる。

リスナーの設定やAPI通信など、描画の準備に使われる。

初期化（constructor()）-> render() -> 一度だけcomponentDidMount()が呼ばれる

ここまでがMounting

Update

・render() VDOM を再描画する

・componentDidUpdate()

　再render()後に呼ばれる。

　スクロールイベントや条件イベント

Updating: render() -> componentDidUpdate() がrender()のたびに走る。 

Unmount

・componentWillUnmount()

　コンポーネントが破棄される直前に呼ばれる。

ライフサイクルメソッドを使う理由：

・関数の外に影響を与える関数を記述するため

　DOM変更、API通信、ログ出力、setState

　副作用＝適切な場所に配置すべき処理

名前付きexport

・1モジュールから複数の関数をexport

・クラスはexportできない

名前無し（default）export

・1ファイル　1export

・ES6 で推奨

・アロー関数は宣言語にexport

・クラスもexport可能

モジュール全体のimport

・名前無しexportしたモジュールをimportする

・モジュール全体のimport

関数ごとのimport

・名前付きexportされたモジュールをimportする時に使用

 hookとは

・クラスの機能をFunctional Componentでも使える

・後方互換

useState()を使う

・ステートフックと呼ばれる

useEffect()のメリット

・ライフサイクルメソッドを代替できる