こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
私的アウトプットです。
ライフサイクル
ライフサイクルの種類
- コンポーネントのマウントで呼ばれるメソッド
- コンポーネントでのデータの変化によって呼ばれるメソッド
- エラーハンドリングで使うメソッド
マウントのライフサイクル
| 用語 | 説明 |
|---|---|
| マウント | 新たにReactコンポーネントが配置されること。 |
| renderメソッドを初めて呼び出してマウント | |
| 2回目の呼び出しでアップデート | |
| コンポーネントがDOMからなくなったらアンマウント |
oncomponentWillMount
マウント直前に呼ばれる
普通はコンストラクタで十分
oncomponenDidMount
マウント直後に呼ばれる
イベントリスナの登録をする
oncomponentWillUnMount
アンマウント直前に呼ばれる
後処理
setIntervalのcleaIntervalを実行するなど
データアップデートのライフサイクル
componentWillReceiveProps
| 引数 | 説明 |
|---|---|
| 引数 | 受け取る予定のpropsをとる |
componentWillReceiveProps(NextProps)
今のthis.propsをNextPropsを比較できる
shoulComponentUpdate
| 引数 | 説明 |
|---|---|
| 第1引数 | 受け取る予定のpropsをとる |
| 第2引数 | 受け取る予定のstateをとる |
shoulComponentUpdate(NextProps,NextState)
主にパフォーマンスチューニングに使われる
componentWillUpdate
| 引数 | 説明 |
|---|---|
| 第1引数 | 受け取る予定のpropsをとる |
| 第2引数 | 受け取る予定のstateをとる |
componentWillUpdate(NextProps,NextState)
render前に呼ばれる最後のメソッド
エラーハンドリング関連のライフサイクル
エラーが起きたときに呼ばれる
componentDidCatch
子コンポーネントでエラーが起きたときによばれる
componentDidCatch(error,info)
| 引数 | 説明 |
|---|---|
| error | 受け取る予定のpropsをとる |
| info | 受け取る予定のstateをとる |