こちらの記事は以下の書籍を参考にアウトプットとして執筆しました
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
ライフサイクル
マウントに関するライフサイクルメソッド
| 単語 | 説明 |
|---|---|
| マイント | 新たにReactコンポを配置すること |
| コンポのrenderが初めて呼ばれたとき | |
| →コンポーネントがマウントされた状態 |
2回目以降でrenderが呼ばれたら
→コンポがアップデートされた
componentWillMount
コンポがマウント直前に呼ばれる
renderよりも先に呼ばれる
通常はコンストラクタで代用できる
componentDidMount
コンポがマウント直後に呼ばれる
マウントされているためDOMに直接アクセスできる。
DOMに対してイベントリスナーを登録するならこのタイミング
ライフサイクルでsetStateは使わないように
stateが変更されるとrenderメソッドが実行される
render→componentDidMount→setState→rendre
のようにrenderが2回実行される。
componentWillUnMount
コンポがアンマウントされる直前に呼ばれる
このライフサイクルは、各コンポに紐付いた処理の掃除をする
どこかでsetIntervalを使っていたらここでclearIntervalを実行するなど。
データアップデートに関するライフサイクルメソッド
コンポのアップデートと関連で呼ばれる
アップデートはpropsかstateが変更されたときに行われる。
componentWillReceiveProps
引数に受け取る予定のpropsをとる
componentWillReceiveProps(nextProps)
参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
この時点ではthis.propsには以前音値が入っている。
propsの比較結果をstateとして扱いたいときに。